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 #316 from learnhouse/feat/payments

Browse source 
Payments & Subscriptions
This commit is contained in:
Badr B. 2024-11-26 00:03:48 +01:00 • committed by GitHub
commit 60740c4166
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
176 changed files with 7282 additions and 1882 deletions
Download patch file Download diff file Expand all files Collapse all files

39
apps/web/app/api/health/route.ts Normal file
View file

@ -0,0 +1,39 @@
export const dynamic = 'force-dynamic' // defaults to auto
export const revalidate = 0
import { NextResponse } from 'next/server';
import { checkHealth } from '@services/utils/health';
export async function GET() {
const health = await checkHealth()
if (health.success === true) {
return NextResponse.json(
{
status: 'healthy',
timestamp: new Date().toISOString(),
health: health.data,
},
{
status: 200,
headers: {
'Content-Type': 'application/json',
},
}
)
} else {
return NextResponse.json(
{
status: 'unhealthy',
timestamp: new Date().toISOString(),
health: null,
error: health.HTTPmessage,
},
{
status: 503,
headers: {
'Content-Type': 'application/json',
},
}
);
}
}

2
apps/web/app/auth/forgot/forgot.tsx
View file

@ -6,7 +6,7 @@ import FormLayout, {
FormField,
FormLabelAndMessage,
Input,
} from '@components/StyledElements/Form/Form'
} from '@components/Objects/StyledElements/Form/Form'
import * as Form from '@radix-ui/react-form'
import { getOrgLogoMediaDirectory } from '@services/media/media'
import { AlertTriangle, Info } from 'lucide-react'

2
apps/web/app/auth/layout.tsx
View file

@ -1,6 +1,6 @@
'use client'
import { OrgProvider } from '@components/Contexts/OrgContext'
import ErrorUI from '@components/StyledElements/Error/Error'
import ErrorUI from '@components/Objects/StyledElements/Error/Error'
import { useSearchParams } from 'next/navigation'

2
apps/web/app/auth/login/login.tsx
View file

@ -4,7 +4,7 @@ import FormLayout, {
FormField,
FormLabelAndMessage,
Input,
} from '@components/StyledElements/Form/Form'
} from '@components/Objects/StyledElements/Form/Form'
import Image from 'next/image'
import * as Form from '@radix-ui/react-form'
import { useFormik } from 'formik'

2
apps/web/app/auth/reset/reset.tsx
View file

@ -6,7 +6,7 @@ import FormLayout, {
FormField,
FormLabelAndMessage,
Input,
} from '@components/StyledElements/Form/Form'
} from '@components/Objects/StyledElements/Form/Form'
import * as Form from '@radix-ui/react-form'
import { getOrgLogoMediaDirectory } from '@services/media/media'
import { AlertTriangle, Info } from 'lucide-react'

8
apps/web/app/auth/signup/InviteOnlySignUp.tsx
View file

@ -7,7 +7,7 @@ import FormLayout, {
FormLabelAndMessage,
Input,
Textarea,
} from '@components/StyledElements/Form/Form'
} from '@components/Objects/StyledElements/Form/Form'
import * as Form from '@radix-ui/react-form'
import { AlertTriangle, Check, User } from 'lucide-react'
import Link from 'next/link'
@ -110,8 +110,10 @@ function InviteOnlySignUpComponent(props: InviteOnlySignUpProps) {
<div className="font-bold text-sm">{message}</div>
</div>
<hr className="border-green-900/20 800 w-40 border" />
<Link className="flex space-x-2 items-center" href={'/login'}>
<User size={14} /> <div>Login </div>
<Link className="flex space-x-2 items-center" href={
`/login?orgslug=${org?.slug}`
} >
<User size={14} /> <div>Login to your account</div>
</Link>
</div>
)}

2
apps/web/app/auth/signup/OpenSignup.tsx
View file

@ -7,7 +7,7 @@ import FormLayout, {
FormLabelAndMessage,
Input,
Textarea,
} from '@components/StyledElements/Form/Form'
} from '@components/Objects/StyledElements/Form/Form'
import * as Form from '@radix-ui/react-form'
import { AlertTriangle, Check, User } from 'lucide-react'
import Link from 'next/link'

2
apps/web/app/auth/signup/signup.tsx
View file

@ -14,7 +14,7 @@ import InviteOnlySignUpComponent from './InviteOnlySignUp'
import { useRouter, useSearchParams } from 'next/navigation'
import { validateInviteCode } from '@services/organizations/invites'
import PageLoading from '@components/Objects/Loaders/PageLoading'
import Toast from '@components/StyledElements/Toast/Toast'
import Toast from '@components/Objects/StyledElements/Toast/Toast'
import toast from 'react-hot-toast'
import { BarLoader } from 'react-spinners'
import { joinOrg } from '@services/organizations/orgs'

2
apps/web/app/install/install.tsx
View file

@ -1,7 +1,7 @@
'use client'
import React, { useEffect } from 'react'
import { INSTALL_STEPS } from './steps/steps'
import GeneralWrapperStyled from '@components/StyledElements/Wrappers/GeneralWrapper'
import GeneralWrapperStyled from '@components/Objects/StyledElements/Wrappers/GeneralWrapper'
import { useRouter, useSearchParams } from 'next/navigation'
import { Suspense } from 'react'

2
apps/web/app/install/steps/account_creation.tsx
View file

@ -4,7 +4,7 @@ import FormLayout, {
FormField,
FormLabelAndMessage,
Input,
} from '@components/StyledElements/Form/Form'
} from '@components/Objects/StyledElements/Form/Form'
import * as Form from '@radix-ui/react-form'
import { getAPIUrl } from '@services/config/config'
import { createNewUserInstall, updateInstall } from '@services/install/install'

2
apps/web/app/install/steps/org_creation.tsx
View file

@ -3,7 +3,7 @@ import FormLayout, {
FormField,
FormLabelAndMessage,
Input,
} from '@components/StyledElements/Form/Form'
} from '@components/Objects/StyledElements/Form/Form'
import * as Form from '@radix-ui/react-form'
import { useFormik } from 'formik'
import { BarLoader } from 'react-spinners'

2
apps/web/app/orgs/[orgslug]/(withmenu)/collection/[collectionid]/error.tsx
View file

@ -1,6 +1,6 @@
'use client' // Error components must be Client Components
import ErrorUI from '@components/StyledElements/Error/Error'
import ErrorUI from '@components/Objects/StyledElements/Error/Error'
import { useEffect } from 'react'
export default function Error({

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

@ -1,4 +1,4 @@
import GeneralWrapperStyled from '@components/StyledElements/Wrappers/GeneralWrapper'
import GeneralWrapperStyled from '@components/Objects/StyledElements/Wrappers/GeneralWrapper'
import { getUriWithOrg } from '@services/config/config'
import { getCollectionById } from '@services/courses/collections'
import { getCourseThumbnailMediaDirectory } from '@services/media/media'

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

@ -1,17 +1,17 @@
import AuthenticatedClientElement from '@components/Security/AuthenticatedClientElement'
import TypeOfContentTitle from '@components/StyledElements/Titles/TypeOfContentTitle'
import GeneralWrapperStyled from '@components/StyledElements/Wrappers/GeneralWrapper'
import TypeOfContentTitle from '@components/Objects/StyledElements/Titles/TypeOfContentTitle'
import GeneralWrapperStyled from '@components/Objects/StyledElements/Wrappers/GeneralWrapper'
import { getUriWithOrg } from '@services/config/config'
import { getOrganizationContextInfo } from '@services/organizations/orgs'
import { Metadata } from 'next'
import Link from 'next/link'
import CollectionThumbnail from '@components/Objects/Thumbnails/CollectionThumbnail'
import NewCollectionButton from '@components/StyledElements/Buttons/NewCollectionButton'
import ContentPlaceHolderIfUserIsNotAdmin from '@components/ContentPlaceHolder'
import NewCollectionButton from '@components/Objects/StyledElements/Buttons/NewCollectionButton'
import { nextAuthOptions } from 'app/auth/options'
import { getServerSession } from 'next-auth'
import { getOrgCollections } from '@services/courses/collections'
import { getOrgThumbnailMediaDirectory } from '@services/media/media'
import ContentPlaceHolderIfUserIsNotAdmin from '@components/Objects/ContentPlaceHolder'
type MetadataProps = {
params: { orgslug: string; courseid: string }

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

@ -7,7 +7,7 @@ import { BookOpenCheck, Check, CheckCircle, MoreVertical, UserRoundPen } from 'l
import { markActivityAsComplete } from '@services/courses/activity'
import DocumentPdfActivity from '@components/Objects/Activities/DocumentPdf/DocumentPdf'
import ActivityIndicators from '@components/Pages/Courses/ActivityIndicators'
import GeneralWrapperStyled from '@components/StyledElements/Wrappers/GeneralWrapper'
import GeneralWrapperStyled from '@components/Objects/StyledElements/Wrappers/GeneralWrapper'
import { usePathname, useRouter } from 'next/navigation'
import AuthenticatedClientElement from '@components/Security/AuthenticatedClientElement'
import { getCourseThumbnailMediaDirectory } from '@services/media/media'
@ -24,8 +24,9 @@ import { AssignmentsTaskProvider } from '@components/Contexts/Assignments/Assign
import AssignmentSubmissionProvider, { useAssignmentSubmission } from '@components/Contexts/Assignments/AssignmentSubmissionContext'
import toast from 'react-hot-toast'
import { mutate } from 'swr'
import ConfirmationModal from '@components/StyledElements/ConfirmationModal/ConfirmationModal'
import ConfirmationModal from '@components/Objects/StyledElements/ConfirmationModal/ConfirmationModal'
import { useMediaQuery } from 'usehooks-ts'
import PaidCourseActivityDisclaimer from '@components/Objects/Courses/CourseActions/PaidCourseActivityDisclaimer'
interface ActivityClientProps {
activityid: string
@ -129,7 +130,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' &&
<>
@ -173,40 +174,44 @@ function ActivityClient(props: ActivityClientProps) {
)}
{activity && activity.published == true && (
<div
className={`p-7 drop-shadow-sm rounded-lg ${bgColor}`}
>
<div>
{activity.activity_type == 'TYPE_DYNAMIC' && (
<Canva content={activity.content} activity={activity} />
)}
{/* todo : use apis & streams instead of this */}
{activity.activity_type == 'TYPE_VIDEO' && (
<VideoActivity course={course} activity={activity} />
)}
{activity.activity_type == 'TYPE_DOCUMENT' && (
<DocumentPdfActivity
course={course}
activity={activity}
/>
)}
{activity.activity_type == 'TYPE_ASSIGNMENT' && (
<>
{activity.content.paid_access == false ? (
<PaidCourseActivityDisclaimer course={course} />
) : (
<div className={`p-7 drop-shadow-sm rounded-lg ${bgColor}`}>
{/* Activity Types */}
<div>
{assignment ? (
<AssignmentProvider assignment_uuid={assignment?.assignment_uuid}>
<AssignmentsTaskProvider>
<AssignmentSubmissionProvider assignment_uuid={assignment?.assignment_uuid}>
<AssignmentStudentActivity />
</AssignmentSubmissionProvider>
</AssignmentsTaskProvider>
</AssignmentProvider>
) : (
<div></div>
{activity.activity_type == 'TYPE_DYNAMIC' && (
<Canva content={activity.content} activity={activity} />
)}
{activity.activity_type == 'TYPE_VIDEO' && (
<VideoActivity course={course} activity={activity} />
)}
{activity.activity_type == 'TYPE_DOCUMENT' && (
<DocumentPdfActivity
course={course}
activity={activity}
/>
)}
{activity.activity_type == 'TYPE_ASSIGNMENT' && (
<div>
{assignment ? (
<AssignmentProvider assignment_uuid={assignment?.assignment_uuid}>
<AssignmentsTaskProvider>
<AssignmentSubmissionProvider assignment_uuid={assignment?.assignment_uuid}>
<AssignmentStudentActivity />
</AssignmentSubmissionProvider>
</AssignmentsTaskProvider>
</AssignmentProvider>
) : (
<div></div>
)}
</div>
)}
</div>
)}
</div>
</div>
</div>
)}
</>
)}
{<div style={{ height: '100px' }}></div>}
</div>

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

@ -1,6 +1,6 @@
'use client' // Error components must be Client Components
import ErrorUI from '@components/StyledElements/Error/Error'
import ErrorUI from '@components/Objects/StyledElements/Error/Error'
import { useEffect } from 'react'
export default function Error({

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

@ -1,5 +1,4 @@
'use client'
import { removeCourse, startCourse } from '@services/courses/activity'
import Link from 'next/link'
import React, { useEffect, useState } from 'react'
import { getUriWithOrg } from '@services/config/config'
@ -7,7 +6,7 @@ import PageLoading from '@components/Objects/Loaders/PageLoading'
import { revalidateTags } from '@services/utils/ts/requests'
import ActivityIndicators from '@components/Pages/Courses/ActivityIndicators'
import { useRouter } from 'next/navigation'
import GeneralWrapperStyled from '@components/StyledElements/Wrappers/GeneralWrapper'
import GeneralWrapperStyled from '@components/Objects/StyledElements/Wrappers/GeneralWrapper'
import {
getCourseThumbnailMediaDirectory,
getUserAvatarMediaDirectory,
@ -15,15 +14,13 @@ import {
import { ArrowRight, Backpack, Check, File, Sparkles, Video } from 'lucide-react'
import { useOrg } from '@components/Contexts/OrgContext'
import UserAvatar from '@components/Objects/UserAvatar'
import CourseUpdates from '@components/Objects/CourseUpdates/CourseUpdates'
import CourseUpdates from '@components/Objects/Courses/CourseUpdates/CourseUpdates'
import { CourseProvider } from '@components/Contexts/CourseContext'
import { useLHSession } from '@components/Contexts/LHSessionContext'
import { useMediaQuery } from 'usehooks-ts'
import CoursesActions from '@components/Objects/Courses/CourseActions/CoursesActions'
const CourseClient = (props: any) => {
const [user, setUser] = useState<any>({})
const [learnings, setLearnings] = useState<any>([])
const session = useLHSession() as any;
const courseuuid = props.courseuuid
const orgslug = props.orgslug
const course = props.course
@ -37,33 +34,6 @@ const CourseClient = (props: any) => {
setLearnings(learnings)
}
async function startCourseUI() {
// Create activity
await startCourse('course_' + courseuuid, orgslug, session.data?.tokens?.access_token)
await revalidateTags(['courses'], orgslug)
router.refresh()
// refresh page (FIX for Next.js BUG)
// window.location.reload();
}
function isCourseStarted() {
const runs = course.trail?.runs
if (!runs) return false
return runs.some(
(run: any) =>
run.status === 'STATUS_IN_PROGRESS' && run.course_id === course.id
)
}
async function quitCourse() {
// Close activity
let activity = await removeCourse('course_' + courseuuid, orgslug, session.data?.tokens?.access_token)
// Mutate course
await revalidateTags(['courses'], orgslug)
router.refresh()
}
useEffect(() => {
getLearningTags()
}, [org, course])
@ -80,7 +50,7 @@ const CourseClient = (props: any) => {
<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}>
{!isMobile && <CourseProvider courseuuid={course.course_uuid}>
<CourseUpdates />
</CourseProvider>}
</div>
@ -113,11 +83,11 @@ const CourseClient = (props: any) => {
course={course}
/>
<div className="flex flex-col md:flex-row pt-10">
<div className="course_metadata_left grow space-y-2">
<h2 className="py-3 text-2xl font-bold">Description</h2>
<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">{course.description}</p>
<p className="py-5 px-5 whitespace-pre-wrap">{course.about}</p>
</div>
{learnings.length > 0 && learnings[0] !== 'null' && (
@ -187,7 +157,7 @@ const CourseClient = (props: any) => {
/>
</div>
)}
{activity.activity_type ===
{activity.activity_type ===
'TYPE_ASSIGNMENT' && (
<div className="bg-gray-100 px-2 py-2 rounded-full">
<Backpack
@ -273,7 +243,7 @@ const CourseClient = (props: any) => {
</Link>
</>
)}
{activity.activity_type ===
{activity.activity_type ===
'TYPE_ASSIGNMENT' && (
<>
<Link
@ -305,60 +275,8 @@ const CourseClient = (props: any) => {
})}
</div>
</div>
<div className="course_metadata_right space-y-3 w-full md:w-72 antialiased flex flex-col md:ml-10 h-fit p-3 py-5 bg-white shadow-md shadow-gray-300/25 outline outline-1 outline-neutral-200/40 rounded-lg overflow-hidden mt-6 md:mt-0">
{user && (
<div className="flex flex-row md:flex-col mx-auto space-y-0 md:space-y-3 space-x-4 md:space-x-0 px-2 py-2 items-center">
<UserAvatar
border="border-8"
avatar_url={course.authors[0].avatar_image ? getUserAvatarMediaDirectory(course.authors[0].user_uuid, course.authors[0].avatar_image) : ''}
predefined_avatar={course.authors[0].avatar_image ? undefined : 'empty'}
width={isMobile ? 60 : 100}
/>
<div className="md:-space-y-2">
<div className="text-[12px] text-neutral-400 font-semibold">
Author
</div>
<div className="text-lg md:text-xl font-bold text-neutral-800">
{course.authors[0].first_name &&
course.authors[0].last_name && (
<div className="flex space-x-2 items-center">
<p>
{course.authors[0].first_name +
' ' +
course.authors[0].last_name}
</p>
<span className="text-xs bg-neutral-100 p-1 px-3 rounded-full text-neutral-400 font-semibold">
{' '}
@{course.authors[0].username}
</span>
</div>
)}
{!course.authors[0].first_name &&
!course.authors[0].last_name && (
<div className="flex space-x-2 items-center">
<p>@{course.authors[0].username}</p>
</div>
)}
</div>
</div>
</div>
)}
{isCourseStarted() ? (
<button
className="py-2 px-5 mx-auto rounded-xl text-white font-bold h-12 w-full md:w-[200px] drop-shadow-md bg-red-600 hover:bg-red-700 hover:cursor-pointer"
onClick={quitCourse}
>
Quit Course
</button>
) : (
<button
className="py-2 px-5 mx-auto rounded-xl text-white font-bold h-12 w-full md:w-[200px] drop-shadow-md bg-black hover:bg-gray-900 hover:cursor-pointer"
onClick={startCourseUI}
>
Start Course
</button>
)}
<div className='course_metadata_right basis-1/4'>
<CoursesActions courseuuid={courseuuid} orgslug={orgslug} course={course} />
</div>
</div>
</GeneralWrapperStyled>

8
apps/web/app/orgs/[orgslug]/(withmenu)/courses/courses.tsx
View file

@ -1,13 +1,13 @@
'use client'
import CreateCourseModal from '@components/Objects/Modals/Course/Create/CreateCourse'
import Modal from '@components/StyledElements/Modal/Modal'
import Modal from '@components/Objects/StyledElements/Modal/Modal'
import React from 'react'
import { useSearchParams } from 'next/navigation'
import GeneralWrapperStyled from '@components/StyledElements/Wrappers/GeneralWrapper'
import TypeOfContentTitle from '@components/StyledElements/Titles/TypeOfContentTitle'
import GeneralWrapperStyled from '@components/Objects/StyledElements/Wrappers/GeneralWrapper'
import TypeOfContentTitle from '@components/Objects/StyledElements/Titles/TypeOfContentTitle'
import AuthenticatedClientElement from '@components/Security/AuthenticatedClientElement'
import CourseThumbnail from '@components/Objects/Thumbnails/CourseThumbnail'
import NewCourseButton from '@components/StyledElements/Buttons/NewCourseButton'
import NewCourseButton from '@components/Objects/StyledElements/Buttons/NewCourseButton'
import useAdminStatus from '@components/Hooks/useAdminStatus'
interface CourseProps {

2
apps/web/app/orgs/[orgslug]/(withmenu)/courses/error.tsx
View file

@ -1,6 +1,6 @@
'use client' // Error components must be Client Components
import ErrorUI from '@components/StyledElements/Error/Error'
import ErrorUI from '@components/Objects/StyledElements/Error/Error'
import { useEffect } from 'react'
export default function Error({

2
apps/web/app/orgs/[orgslug]/(withmenu)/error.tsx
View file

@ -1,6 +1,6 @@
'use client' // Error components must be Client Components
import ErrorUI from '@components/StyledElements/Error/Error'
import ErrorUI from '@components/Objects/StyledElements/Error/Error'
import { useEffect } from 'react'
export default function Error({

6
apps/web/app/orgs/[orgslug]/(withmenu)/layout.tsx
View file

@ -1,8 +1,8 @@
'use client'
import '@styles/globals.css'
import { Menu } from '@components/Objects/Menu/Menu'
import { SessionProvider } from 'next-auth/react'
import Watermark from '@components/Watermark'
import Watermark from '@components/Objects/Watermark'
import { OrgMenu } from '@components/Objects/Menus/OrgMenu'
export default function RootLayout({
children,
@ -14,7 +14,7 @@ export default function RootLayout({
return (
<>
<SessionProvider>
<Menu orgslug={params?.orgslug}></Menu>
<OrgMenu orgslug={params?.orgslug}></OrgMenu>
{children}
<Watermark />
</SessionProvider>

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

@ -4,14 +4,14 @@ import { getUriWithOrg } from '@services/config/config'
import { getOrgCourses } from '@services/courses/courses'
import Link from 'next/link'
import { getOrganizationContextInfo } from '@services/organizations/orgs'
import GeneralWrapperStyled from '@components/StyledElements/Wrappers/GeneralWrapper'
import TypeOfContentTitle from '@components/StyledElements/Titles/TypeOfContentTitle'
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/StyledElements/Buttons/NewCourseButton'
import NewCollectionButton from '@components/StyledElements/Buttons/NewCollectionButton'
import ContentPlaceHolderIfUserIsNotAdmin from '@components/ContentPlaceHolder'
import NewCourseButton from '@components/Objects/StyledElements/Buttons/NewCourseButton'
import NewCollectionButton from '@components/Objects/StyledElements/Buttons/NewCollectionButton'
import ContentPlaceHolderIfUserIsNotAdmin from '@components/Objects/ContentPlaceHolder'
import { getOrgCollections } from '@services/courses/collections'
import { getServerSession } from 'next-auth'
import { nextAuthOptions } from 'app/auth/options'

4
apps/web/app/orgs/[orgslug]/(withmenu)/trail/trail.tsx
View file

@ -3,8 +3,8 @@ import { useLHSession } from '@components/Contexts/LHSessionContext'
import { useOrg } from '@components/Contexts/OrgContext'
import PageLoading from '@components/Objects/Loaders/PageLoading'
import TrailCourseElement from '@components/Pages/Trail/TrailCourseElement'
import TypeOfContentTitle from '@components/StyledElements/Titles/TypeOfContentTitle'
import GeneralWrapperStyled from '@components/StyledElements/Wrappers/GeneralWrapper'
import TypeOfContentTitle from '@components/Objects/StyledElements/Titles/TypeOfContentTitle'
import GeneralWrapperStyled from '@components/Objects/StyledElements/Wrappers/GeneralWrapper'
import { getAPIUrl } from '@services/config/config'
import { swrFetcher } from '@services/utils/ts/requests'
import React, { useEffect } from 'react'

6
apps/web/app/orgs/[orgslug]/dash/ClientAdminLayout.tsx
View file

@ -1,9 +1,9 @@
'use client';
import DashLeftMenu from '@components/Dashboard/UI/DashLeftMenu'
import DashMobileMenu from '@components/Dashboard/UI/DashMobileMenu'
import DashLeftMenu from '@components/Dashboard/Menus/DashLeftMenu';
import DashMobileMenu from '@components/Dashboard/Menus/DashMobileMenu';
import AdminAuthorization from '@components/Security/AdminAuthorization'
import { SessionProvider } from 'next-auth/react'
import React, { useState, useEffect } from 'react'
import React from 'react'
import { useMediaQuery } from 'usehooks-ts';
function ClientAdminLayout({

2
apps/web/app/orgs/[orgslug]/dash/assignments/[assignmentuuid]/_components/TaskEditor/Subs/AssignmentTaskGeneralEdit.tsx
View file

@ -3,7 +3,7 @@ import { useAssignments } from '@components/Contexts/Assignments/AssignmentConte
import { useAssignmentsTask, useAssignmentsTaskDispatch } from '@components/Contexts/Assignments/AssignmentsTaskContext';
import { useLHSession } from '@components/Contexts/LHSessionContext';
import { useOrg } from '@components/Contexts/OrgContext';
import FormLayout, { FormField, FormLabelAndMessage, Input, Textarea } from '@components/StyledElements/Form/Form';
import FormLayout, { FormField, FormLabelAndMessage, Input, Textarea } from '@components/Objects/StyledElements/Form/Form';
import * as Form from '@radix-ui/react-form';
import { getActivityByID } from '@services/courses/activities';
import { updateAssignmentTask, updateReferenceFile } from '@services/courses/assignments';

2
apps/web/app/orgs/[orgslug]/dash/assignments/[assignmentuuid]/_components/Tasks.tsx
View file

@ -1,5 +1,5 @@
import { useAssignments } from '@components/Contexts/Assignments/AssignmentContext'
import Modal from '@components/StyledElements/Modal/Modal';
import Modal from '@components/Objects/StyledElements/Modal/Modal';
import { FileUp, ListTodo, PanelLeftOpen, Plus } from 'lucide-react';
import React, { useEffect } from 'react'
import NewTaskModal from './Modals/NewTaskModal';

4
apps/web/app/orgs/[orgslug]/dash/assignments/[assignmentuuid]/page.tsx
View file

@ -1,9 +1,9 @@
'use client';
import BreadCrumbs from '@components/Dashboard/UI/BreadCrumbs'
import BreadCrumbs from '@components/Dashboard/Misc/BreadCrumbs'
import { BookOpen, BookX, EllipsisVertical, Eye, Layers2, Monitor, UserRoundPen } from 'lucide-react'
import React, { useEffect } from 'react'
import { AssignmentProvider, useAssignments } from '@components/Contexts/Assignments/AssignmentContext';
import ToolTip from '@components/StyledElements/Tooltip/Tooltip';
import ToolTip from '@components/Objects/StyledElements/Tooltip/Tooltip';
import { updateAssignment } from '@services/courses/assignments';
import { useLHSession } from '@components/Contexts/LHSessionContext';
import { mutate } from 'swr';

2
apps/web/app/orgs/[orgslug]/dash/assignments/[assignmentuuid]/subpages/AssignmentSubmissionsSubPage.tsx
View file

@ -1,6 +1,6 @@
import { useLHSession } from '@components/Contexts/LHSessionContext';
import UserAvatar from '@components/Objects/UserAvatar';
import Modal from '@components/StyledElements/Modal/Modal';
import Modal from '@components/Objects/StyledElements/Modal/Modal';
import { getAPIUrl } from '@services/config/config';
import { getUserAvatarMediaDirectory } from '@services/media/media';
import { swrFetcher } from '@services/utils/ts/requests';

2
apps/web/app/orgs/[orgslug]/dash/assignments/page.tsx
View file

@ -1,7 +1,7 @@
'use client';
import { useLHSession } from '@components/Contexts/LHSessionContext';
import { useOrg } from '@components/Contexts/OrgContext';
import BreadCrumbs from '@components/Dashboard/UI/BreadCrumbs'
import BreadCrumbs from '@components/Dashboard/Misc/BreadCrumbs'
import { getAPIUrl, getUriWithOrg } from '@services/config/config';
import { getAssignmentsFromACourse } from '@services/courses/assignments';
import { getCourseThumbnailMediaDirectory } from '@services/media/media';

6
apps/web/app/orgs/[orgslug]/dash/courses/client.tsx
View file

@ -1,10 +1,10 @@
'use client'
import BreadCrumbs from '@components/Dashboard/UI/BreadCrumbs'
import BreadCrumbs from '@components/Dashboard/Misc/BreadCrumbs'
import CreateCourseModal from '@components/Objects/Modals/Course/Create/CreateCourse'
import CourseThumbnail, { removeCoursePrefix } from '@components/Objects/Thumbnails/CourseThumbnail'
import AuthenticatedClientElement from '@components/Security/AuthenticatedClientElement'
import NewCourseButton from '@components/StyledElements/Buttons/NewCourseButton'
import Modal from '@components/StyledElements/Modal/Modal'
import NewCourseButton from '@components/Objects/StyledElements/Buttons/NewCourseButton'
import Modal from '@components/Objects/StyledElements/Modal/Modal'
import { useSearchParams } from 'next/navigation'
import React from 'react'
import useAdminStatus from '@components/Hooks/useAdminStatus'

8
apps/web/app/orgs/[orgslug]/dash/courses/course/[courseuuid]/[subpage]/page.tsx
View file

@ -1,14 +1,14 @@
'use client'
import EditCourseStructure from '../../../../../../../../components/Dashboard/Course/EditCourseStructure/EditCourseStructure'
import { getUriWithOrg } from '@services/config/config'
import React from 'react'
import { CourseProvider } from '../../../../../../../../components/Contexts/CourseContext'
import Link from 'next/link'
import { CourseOverviewTop } from '@components/Dashboard/UI/CourseOverviewTop'
import { CourseOverviewTop } from '@components/Dashboard/Misc/CourseOverviewTop'
import { motion } from 'framer-motion'
import EditCourseGeneral from '@components/Dashboard/Course/EditCourseGeneral/EditCourseGeneral'
import { GalleryVerticalEnd, Info, UserRoundCog } from 'lucide-react'
import EditCourseAccess from '@components/Dashboard/Course/EditCourseAccess/EditCourseAccess'
import EditCourseStructure from '@components/Dashboard/Pages/Course/EditCourseStructure/EditCourseStructure'
import EditCourseGeneral from '@components/Dashboard/Pages/Course/EditCourseGeneral/EditCourseGeneral'
import EditCourseAccess from '@components/Dashboard/Pages/Course/EditCourseAccess/EditCourseAccess'
export type CourseOverviewParams = {
orgslug: string

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

@ -1,11 +1,11 @@
'use client'
import BreadCrumbs from '@components/Dashboard/UI/BreadCrumbs'
import BreadCrumbs from '@components/Dashboard/Misc/BreadCrumbs'
import { getUriWithOrg } from '@services/config/config'
import { Info } from 'lucide-react'
import Link from 'next/link'
import React, { useEffect } from 'react'
import { motion } from 'framer-motion'
import OrgEditGeneral from '@components/Dashboard/Org/OrgEditGeneral/OrgEditGeneral'
import OrgEditGeneral from '@components/Dashboard/Pages/Org/OrgEditGeneral/OrgEditGeneral'
export type OrgParams = {
subpage: string

142
apps/web/app/orgs/[orgslug]/dash/payments/[subpage]/page.tsx Normal file
View file

@ -0,0 +1,142 @@
'use client'
import React, { useState, useEffect } from 'react'
import { motion } from 'framer-motion'
import BreadCrumbs from '@components/Dashboard/Misc/BreadCrumbs'
import Link from 'next/link'
import { getUriWithOrg } from '@services/config/config'
import { CreditCard, Settings, Repeat, BookOpen, Users, DollarSign, Gem } from 'lucide-react'
import { useLHSession } from '@components/Contexts/LHSessionContext'
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
orgslug: string
}
function PaymentsPage({ params }: { params: PaymentsParams }) {
const session = useLHSession() as any
const org = useOrg() as any
const [selectedSubPage, setSelectedSubPage] = useState(params.subpage || 'general')
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')
setH2Label('Overview of your payment settings and transactions')
}
if (selectedSubPage === 'configuration') {
setH1Label('Payment Configuration')
setH2Label('Set up and manage your payment gateway')
}
if (selectedSubPage === 'subscriptions') {
setH1Label('Subscriptions')
setH2Label('Manage your subscription plans')
}
if (selectedSubPage === 'paid-products') {
setH1Label('Paid Products')
setH2Label('Manage your paid products and pricing')
}
if (selectedSubPage === 'customers') {
setH1Label('Customers')
setH2Label('View and manage your customer information')
}
}
return (
<div className="h-screen w-full bg-[#f8f8f8] flex flex-col">
<div className="pl-10 pr-10 tracking-tight bg-[#fcfbfc] z-10 shadow-[0px_4px_16px_rgba(0,0,0,0.06)]">
<BreadCrumbs type="payments" />
<div className="my-2 py-3">
<div className="w-100 flex flex-col space-y-1">
<div className="pt-3 flex font-bold text-4xl tracking-tighter">
{H1Label}
</div>
<div className="flex font-medium text-gray-400 text-md">
{H2Label}{' '}
</div>
</div>
</div>
<div className="flex space-x-5 font-black text-sm">
<TabLink
href={getUriWithOrg(params.orgslug, '/dash/payments/customers')}
icon={<Users size={16} />}
label="Customers"
isActive={selectedSubPage === 'customers'}
onClick={() => setSelectedSubPage('customers')}
/>
<TabLink
href={getUriWithOrg(params.orgslug, '/dash/payments/paid-products')}
icon={<Gem size={16} />}
label="Products & Subscriptions"
isActive={selectedSubPage === 'paid-products'}
onClick={() => setSelectedSubPage('paid-products')}
/>
<TabLink
href={getUriWithOrg(params.orgslug, '/dash/payments/configuration')}
icon={<Settings size={16} />}
label="Configuration"
isActive={selectedSubPage === 'configuration'}
onClick={() => setSelectedSubPage('configuration')}
/>
</div>
</div>
<div className="h-6"></div>
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
transition={{ duration: 0.1, type: 'spring', stiffness: 80 }}
className="flex-1 overflow-y-auto"
>
{selectedSubPage === 'general' && <div>General</div>}
{selectedSubPage === 'configuration' && <PaymentsConfigurationPage />}
{selectedSubPage === 'paid-products' && <PaymentsProductPage />}
{selectedSubPage === 'customers' && <PaymentsCustomersPage />}
</motion.div>
</div>
)
}
const TabLink = ({ href, icon, label, isActive, onClick }: { href: string, icon: React.ReactNode, label: string, isActive: boolean, onClick: () => void }) => (
<Link href={href}>
<div
onClick={onClick}
className={`py-2 w-fit text-center border-black transition-all ease-linear ${isActive ? 'border-b-4' : 'opacity-50'
} cursor-pointer`}
>
<div className="flex items-center space-x-2.5 mx-2">
{icon}
<div>{label}</div>
</div>
</div>
</Link>
)
export default PaymentsPage

64
apps/web/app/orgs/[orgslug]/dash/user-account/owned/page.tsx Normal file
View file

@ -0,0 +1,64 @@
'use client'
import React from 'react'
import { useOrg } from '@components/Contexts/OrgContext'
import { useLHSession } from '@components/Contexts/LHSessionContext'
import useSWR from 'swr'
import { getOwnedCourses } from '@services/payments/payments'
import CourseThumbnail from '@components/Objects/Thumbnails/CourseThumbnail'
import PageLoading from '@components/Objects/Loaders/PageLoading'
import { BookOpen, Package2 } from 'lucide-react'
function OwnedCoursesPage() {
const org = useOrg() as any
const session = useLHSession() as any
const access_token = session?.data?.tokens?.access_token
const { data: ownedCourses, error, isLoading } = useSWR(
org ? [`/payments/${org.id}/courses/owned`, access_token] : null,
([url, token]) => getOwnedCourses(org.id, token)
)
if (isLoading) return <PageLoading />
if (error) return <div>Error loading owned courses</div>
return (
<div className="h-full w-full bg-[#f8f8f8] pl-10 pr-10 pt-5 ">
<div className="flex flex-col bg-white nice-shadow px-5 py-3 rounded-md mb-6">
<div className="flex items-center gap-4">
<Package2 className="w-8 h-8 text-gray-800" />
<div className="flex flex-col -space-y-1">
<h1 className="font-bold text-xl text-gray-800">My Courses</h1>
<h2 className="text-gray-500 text-md">Courses you have purchased or subscribed to</h2>
</div>
</div>
</div>
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 w-full">
{ownedCourses?.map((course: any) => (
<div key={course.course_uuid} className="p-3">
<CourseThumbnail course={course} orgslug={org.slug} />
</div>
))}
{(!ownedCourses || ownedCourses.length === 0) && (
<div className="col-span-full flex justify-center items-center py-8">
<div className="text-center">
<div className="mb-4">
<BookOpen className="w-12 h-12 mx-auto text-gray-400" />
</div>
<h2 className="text-xl font-bold text-gray-600 mb-2">
No purchased courses
</h2>
<p className="text-md text-gray-400">
You haven't purchased any courses yet
</p>
</div>
</div>
)}
</div>
</div>
)
}
export default OwnedCoursesPage

6
apps/web/app/orgs/[orgslug]/dash/user-account/settings/[subpage]/page.tsx
View file

@ -1,12 +1,12 @@
'use client'
import React, { useEffect } from 'react'
import { motion } from 'framer-motion'
import UserEditGeneral from '@components/Dashboard/UserAccount/UserEditGeneral/UserEditGeneral'
import UserEditPassword from '@components/Dashboard/UserAccount/UserEditPassword/UserEditPassword'
import UserEditGeneral from '@components/Dashboard/Pages/UserAccount/UserEditGeneral/UserEditGeneral'
import UserEditPassword from '@components/Dashboard/Pages/UserAccount/UserEditPassword/UserEditPassword'
import Link from 'next/link'
import { getUriWithOrg } from '@services/config/config'
import { Info, Lock } from 'lucide-react'
import BreadCrumbs from '@components/Dashboard/UI/BreadCrumbs'
import BreadCrumbs from '@components/Dashboard/Misc/BreadCrumbs'
import { useLHSession } from '@components/Contexts/LHSessionContext'
export type SettingsParams = {

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

@ -5,13 +5,13 @@ import Link from 'next/link'
import { useMediaQuery } from 'usehooks-ts'
import { getUriWithOrg } from '@services/config/config'
import { Monitor, ScanEye, SquareUserRound, UserPlus, Users } from 'lucide-react'
import BreadCrumbs from '@components/Dashboard/UI/BreadCrumbs'
import BreadCrumbs from '@components/Dashboard/Misc/BreadCrumbs'
import { useLHSession } from '@components/Contexts/LHSessionContext'
import { useOrg } from '@components/Contexts/OrgContext'
import OrgUsers from '@components/Dashboard/Users/OrgUsers/OrgUsers'
import OrgAccess from '@components/Dashboard/Users/OrgAccess/OrgAccess'
import OrgUsersAdd from '@components/Dashboard/Users/OrgUsersAdd/OrgUsersAdd'
import OrgUserGroups from '@components/Dashboard/Users/OrgUserGroups/OrgUserGroups'
import OrgUsers from '@components/Dashboard/Pages/Users/OrgUsers/OrgUsers'
import OrgAccess from '@components/Dashboard/Pages/Users/OrgAccess/OrgAccess'
import OrgUsersAdd from '@components/Dashboard/Pages/Users/OrgUsersAdd/OrgUsersAdd'
import OrgUserGroups from '@components/Dashboard/Pages/Users/OrgUserGroups/OrgUserGroups'
export type SettingsParams = {
subpage: string

9
apps/web/app/orgs/[orgslug]/health/page.tsx
View file

@ -1,9 +0,0 @@
import React from 'react'
function HealthPage() {
return (
<div>OK</div>
)
}
export default HealthPage

4
apps/web/app/orgs/[orgslug]/layout.tsx
View file

@ -1,9 +1,9 @@
'use client'
import { OrgProvider } from '@components/Contexts/OrgContext'
import NextTopLoader from 'nextjs-toploader';
import Toast from '@components/StyledElements/Toast/Toast'
import Toast from '@components/Objects/StyledElements/Toast/Toast'
import '@styles/globals.css'
import Onboarding from '@components/Onboarding/Onboarding';
import Onboarding from '@components/Objects/Onboarding/Onboarding';
export default function RootLayout({
children,

124
apps/web/app/payments/stripe/connect/oauth/page.tsx Normal file
View file

@ -0,0 +1,124 @@
'use client'
import React, { useEffect, useState } from 'react'
import { useRouter, useSearchParams } from 'next/navigation'
import { useLHSession } from '@components/Contexts/LHSessionContext'
import { useOrg } from '@components/Contexts/OrgContext'
import { getUriWithOrg } from '@services/config/config'
import { Check, Loader2, AlertTriangle } from 'lucide-react'
import { motion } from 'framer-motion'
import toast from 'react-hot-toast'
import { verifyStripeConnection } from '@services/payments/payments'
import Image from 'next/image'
import learnhouseIcon from 'public/learnhouse_bigicon_1.png'
function StripeConnectCallback() {
const router = useRouter()
const searchParams = useSearchParams()
const session = useLHSession() as any
const [status, setStatus] = useState<'processing' | 'success' | 'error'>('processing')
const [message, setMessage] = useState('')
useEffect(() => {
const verifyConnection = async () => {
try {
const code = searchParams.get('code')
const state = searchParams.get('state')
const orgId = state?.split('=')[1] // Extract org_id value after '='
if (!code || !orgId) {
throw new Error('Missing required parameters')
}
const response = await verifyStripeConnection(
parseInt(orgId),
code,
session?.data?.tokens?.access_token
)
// Wait for 1 second to show processing state
await new Promise(resolve => setTimeout(resolve, 1000))
setStatus('success')
setMessage('Successfully connected to Stripe!')
// Close the window after 2 seconds of showing success
setTimeout(() => {
window.close()
}, 2000)
} catch (error) {
console.error('Error verifying Stripe connection:', error)
setStatus('error')
setMessage('Failed to complete Stripe connection')
toast.error('Failed to connect to Stripe')
}
}
if (session) {
verifyConnection()
}
}, [session, router, searchParams])
return (
<div className="h-screen w-full bg-[#f8f8f8] flex items-center justify-center">
<div className="flex flex-col items-center">
<div className="mb-10">
<Image
quality={100}
width={50}
height={50}
src={learnhouseIcon}
alt=""
/>
</div>
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.3 }}
className="bg-white p-8 rounded-xl nice-shadow max-w-md w-full mx-4"
>
<div className="flex flex-col items-center text-center space-y-4">
{status === 'processing' && (
<>
<Loader2 className="h-12 w-12 text-blue-500 animate-spin" />
<h2 className="text-xl font-semibold text-gray-800">
Completing Stripe Connection
</h2>
<p className="text-gray-500">
Please wait while we finish setting up your Stripe integration...
</p>
</>
)}
{status === 'success' && (
<>
<div className="bg-green-100 p-3 rounded-full">
<Check className="h-8 w-8 text-green-600" />
</div>
<h2 className="text-xl font-semibold text-gray-800">{message}</h2>
<p className="text-gray-500">
You can now return to the dashboard to start using payments.
</p>
</>
)}
{status === 'error' && (
<>
<div className="bg-red-100 p-3 rounded-full">
<AlertTriangle className="h-8 w-8 text-red-600" />
</div>
<h2 className="text-xl font-semibold text-gray-800">{message}</h2>
<p className="text-gray-500">
Please try again or contact support if the problem persists.
</p>
</>
)}
</div>
</motion.div>
</div>
</div>
)
}
export default StripeConnectCallback

6
apps/web/components/Contexts/LHSessionContext.tsx
View file

@ -1,17 +1,13 @@
'use client'
import PageLoading from '@components/Objects/Loaders/PageLoading';
import { useSession } from 'next-auth/react';
import React, { useContext, createContext, useEffect } from 'react'
import React, { useContext, createContext } from 'react'
export const SessionContext = createContext({}) as any
function LHSessionProvider({ children }: { children: React.ReactNode }) {
const session = useSession();
useEffect(() => {
}, [])
if (session && session.status == 'loading') {
return <PageLoading />
}

4
apps/web/components/Contexts/OrgContext.tsx
View file

@ -4,8 +4,8 @@ import { swrFetcher } from '@services/utils/ts/requests'
import React, { createContext, useContext, useMemo } from 'react'
import useSWR from 'swr'
import { useLHSession } from '@components/Contexts/LHSessionContext'
import ErrorUI from '@components/StyledElements/Error/Error'
import InfoUI from '@components/StyledElements/Info/Info'
import ErrorUI from '@components/Objects/StyledElements/Error/Error'
import InfoUI from '@components/Objects/StyledElements/Info/Info'
import { usePathname } from 'next/navigation'
export const OrgContext = createContext(null)

46
apps/web/components/Dashboard/UI/DashLeftMenu.tsx → apps/web/components/Dashboard/Menus/DashLeftMenu.tsx
View file

@ -1,9 +1,9 @@
'use client'
import { useOrg } from '@components/Contexts/OrgContext'
import { signOut } from 'next-auth/react'
import ToolTip from '@components/StyledElements/Tooltip/Tooltip'
import ToolTip from '@components/Objects/StyledElements/Tooltip/Tooltip'
import LearnHouseDashboardLogo from '@public/dashLogo.png'
import { Backpack, BookCopy, Home, LogOut, School, Settings, Users } from 'lucide-react'
import { Backpack, BadgeDollarSign, BookCopy, Home, LogOut, Package2, School, Settings, Users, Vault } from 'lucide-react'
import Image from 'next/image'
import Link from 'next/link'
import React, { useEffect } from 'react'
@ -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,16 @@ 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"
href={`/dash/payments/customers`}
>
<BadgeDollarSign size={18} />
</Link>
</ToolTip>
)}
<ToolTip
content={'Organization'}
slateBlack
@ -139,23 +151,41 @@ function DashLeftMenu() {
<UserAvatar border="border-4" width={35} />
</div>
</ToolTip>
<div className="flex items-center flex-col space-y-1">
<ToolTip
content={session.data.user.username + "'s Settings"}
<div className="flex items-center flex-col space-y-3">
<div className="flex flex-col space-y-1 py-1">
<ToolTip
content={session.data.user.username + "'s Owned Courses"}
slateBlack
sideOffset={8}
side="right"
>
<Link
href={'/dash/user-account/owned'}
className="py-1"
>
<Package2
className="mx-auto text-neutral-400 cursor-pointer"
size={18}
/>
</Link>
</ToolTip>
<ToolTip
content={session.data.user.username + "'s Settings"}
slateBlack
sideOffset={8}
side="right"
>
<Link
href={'/dash/user-account/settings/general'}
className="py-3"
className="py-1"
>
<Settings
className="mx-auto text-neutral-400 cursor-pointer"
size={18}
/>
</Link>
</ToolTip>
</Link>
</ToolTip>
</div>
<ToolTip
content={'Logout'}
slateBlack

10
apps/web/components/Dashboard/UI/DashMobileMenu.tsx → apps/web/components/Dashboard/Menus/DashMobileMenu.tsx
View file

@ -1,13 +1,13 @@
'use client'
import { useOrg } from '@components/Contexts/OrgContext'
import { signOut } from 'next-auth/react'
import { Backpack, BookCopy, Home, LogOut, School, Settings, Users } from 'lucide-react'
import { Backpack, BadgeDollarSign, BookCopy, Home, LogOut, School, Settings, Users } from 'lucide-react'
import Link from 'next/link'
import React from 'react'
import AdminAuthorization from '@components/Security/AdminAuthorization'
import { useLHSession } from '@components/Contexts/LHSessionContext'
import { getUriWithOrg, getUriWithoutOrg } from '@services/config/config'
import ToolTip from '@components/StyledElements/Tooltip/Tooltip'
import ToolTip from '@components/Objects/StyledElements/Tooltip/Tooltip'
function DashMobileMenu() {
const org = useOrg() as any
@ -42,6 +42,12 @@ function DashMobileMenu() {
<span className="text-xs mt-1">Assignments</span>
</Link>
</ToolTip>
<ToolTip content={'Payments'} slateBlack sideOffset={8} side="top">
<Link href={`/dash/payments/customers`} className="flex flex-col items-center p-2">
<BadgeDollarSign size={20} />
<span className="text-xs mt-1">Payments</span>
</Link>
</ToolTip>
<ToolTip content={'Users'} slateBlack sideOffset={8} side="top">
<Link href={`/dash/users/settings/users`} className="flex flex-col items-center p-2">
<Users size={20} />

13
apps/web/components/Dashboard/UI/BreadCrumbs.tsx → apps/web/components/Dashboard/Misc/BreadCrumbs.tsx
View file

@ -1,11 +1,11 @@
'use client';
import { useOrg } from '@components/Contexts/OrgContext';
import { Backpack, Book, ChevronRight, School, User, Users } from 'lucide-react'
import { Backpack, Book, ChevronRight, CreditCard, School, User, Users } from 'lucide-react'
import Link from 'next/link'
import React from 'react'
type BreadCrumbsProps = {
type: 'courses' | 'user' | 'users' | 'org' | 'orgusers' | 'assignments'
type: 'courses' | 'user' | 'users' | 'org' | 'orgusers' | 'assignments' | 'payments'
last_breadcrumb?: string
}
@ -65,6 +65,15 @@ function BreadCrumbs(props: BreadCrumbsProps) {
) : (
''
)}
{props.type == 'payments' ? (
<div className="flex space-x-2 items-center">
{' '}
<CreditCard className="text-gray" size={14}></CreditCard>
<Link href="/dash/payments">Payments</Link>
</div>
) : (
''
)}
<div className="flex items-center space-x-1 first-letter:uppercase">
{props.last_breadcrumb ? <ChevronRight size={17} /> : ''}
<div className="first-letter:uppercase">

0
apps/web/components/Dashboard/UI/CourseOverviewTop.tsx → apps/web/components/Dashboard/Misc/CourseOverviewTop.tsx
View file

0
apps/web/components/Dashboard/UI/SaveState.tsx → apps/web/components/Dashboard/Misc/SaveState.tsx
View file

4
apps/web/components/Dashboard/Course/EditCourseAccess/EditCourseAccess.tsx → apps/web/components/Dashboard/Pages/Course/EditCourseAccess/EditCourseAccess.tsx
View file

@ -1,7 +1,7 @@
import { useCourse, useCourseDispatch } from '@components/Contexts/CourseContext'
import LinkToUserGroup from '@components/Objects/Modals/Dash/EditCourseAccess/LinkToUserGroup'
import ConfirmationModal from '@components/StyledElements/ConfirmationModal/ConfirmationModal'
import Modal from '@components/StyledElements/Modal/Modal'
import ConfirmationModal from '@components/Objects/StyledElements/ConfirmationModal/ConfirmationModal'
import Modal from '@components/Objects/StyledElements/Modal/Modal'
import { getAPIUrl } from '@services/config/config'
import { unLinkResourcesToUserGroup } from '@services/usergroups/usergroups'
import { swrFetcher } from '@services/utils/ts/requests'

4
apps/web/components/Dashboard/Course/EditCourseGeneral/EditCourseGeneral.tsx → apps/web/components/Dashboard/Pages/Course/EditCourseGeneral/EditCourseGeneral.tsx
View file

@ -3,13 +3,13 @@ import FormLayout, {
FormLabelAndMessage,
Input,
Textarea,
} from '@components/StyledElements/Form/Form';
} from '@components/Objects/StyledElements/Form/Form';
import { useFormik } from 'formik';
import { AlertTriangle } from 'lucide-react';
import * as Form from '@radix-ui/react-form';
import React, { useEffect, useState } from 'react';
import { useCourse, useCourseDispatch } from '../../../Contexts/CourseContext';
import ThumbnailUpdate from './ThumbnailUpdate';
import { useCourse, useCourseDispatch } from '@components/Contexts/CourseContext';
type EditCourseStructureProps = {
orgslug: string

0
apps/web/components/Dashboard/Course/EditCourseGeneral/ThumbnailUpdate.tsx → apps/web/components/Dashboard/Pages/Course/EditCourseGeneral/ThumbnailUpdate.tsx
View file

41
apps/web/components/Dashboard/Course/EditCourseGeneral/UnsplashImagePicker.tsx → apps/web/components/Dashboard/Pages/Course/EditCourseGeneral/UnsplashImagePicker.tsx
View file

@ -3,6 +3,7 @@ import { createApi } from 'unsplash-js';
import { Search, X, Cpu, Briefcase, GraduationCap, Heart, Palette, Plane, Utensils,
Dumbbell, Music, Shirt, Book, Building, Bike, Camera, Microscope, Coins, Coffee, Gamepad,
Flower} from 'lucide-react';
import Modal from '@components/Objects/StyledElements/Modal/Modal';
const unsplash = createApi({
accessKey: process.env.NEXT_PUBLIC_UNSPLASH_ACCESS_KEY as string,
@ -36,9 +37,10 @@ const predefinedLabels = [
interface UnsplashImagePickerProps {
onSelect: (imageUrl: string) => void;
onClose: () => void;
isOpen?: boolean;
}
const UnsplashImagePicker: React.FC<UnsplashImagePickerProps> = ({ onSelect, onClose }) => {
const UnsplashImagePicker: React.FC<UnsplashImagePickerProps> = ({ onSelect, onClose, isOpen = true }) => {
const [query, setQuery] = useState('');
const [images, setImages] = useState<any[]>([]);
const [page, setPage] = useState(1);
@ -54,8 +56,6 @@ const UnsplashImagePicker: React.FC<UnsplashImagePickerProps> = ({ onSelect, onC
});
if (result && result.response) {
setImages(prevImages => pageNum === 1 ? result.response.results : [...prevImages, ...result.response.results]);
} else {
console.error('Unexpected response structure:', result);
}
} catch (error) {
console.error('Error fetching images:', error);
@ -97,16 +97,10 @@ const UnsplashImagePicker: React.FC<UnsplashImagePickerProps> = ({ onSelect, onC
onClose();
};
return (
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
<div className="bg-white rounded-lg p-6 w-3/4 max-w-4xl max-h-[80vh] overflow-y-auto">
<div className="flex justify-between items-center mb-4">
<h2 className="text-2xl font-bold">Choose an image from Unsplash</h2>
<button onClick={onClose} className="text-gray-500 hover:text-gray-700">
<X size={24} />
</button>
</div>
<div className="relative mb-4">
const modalContent = (
<div className="flex flex-col h-full">
<div className="p-4 space-y-4">
<div className="relative">
<input
type="text"
value={query}
@ -116,7 +110,7 @@ const UnsplashImagePicker: React.FC<UnsplashImagePickerProps> = ({ onSelect, onC
/>
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" size={20} />
</div>
<div className="flex flex-wrap gap-2 mb-4">
<div className="flex flex-wrap gap-2">
{predefinedLabels.map(label => (
<button
key={label.name}
@ -128,6 +122,9 @@ const UnsplashImagePicker: React.FC<UnsplashImagePickerProps> = ({ onSelect, onC
</button>
))}
</div>
</div>
<div className="flex-1 overflow-y-auto p-4 pt-0">
<div className="grid grid-cols-3 gap-4">
{images.map(image => (
<div key={image.id} className="relative w-full pb-[56.25%]">
@ -135,7 +132,7 @@ const UnsplashImagePicker: React.FC<UnsplashImagePickerProps> = ({ onSelect, onC
src={image.urls.small}
alt={image.alt_description}
className="absolute inset-0 w-full h-full object-cover rounded-lg cursor-pointer hover:opacity-80 transition-opacity"
onClick={() => handleImageSelect(image.urls.full)}
onClick={() => handleImageSelect(image.urls.regular)}
/>
</div>
))}
@ -144,7 +141,7 @@ const UnsplashImagePicker: React.FC<UnsplashImagePickerProps> = ({ onSelect, onC
{!loading && images.length > 0 && (
<button
onClick={handleLoadMore}
className="mt-4 px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors"
className="mt-4 w-full px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors"
>
Load More
</button>
@ -152,6 +149,18 @@ const UnsplashImagePicker: React.FC<UnsplashImagePickerProps> = ({ onSelect, onC
</div>
</div>
);
return (
<Modal
dialogTitle="Choose an image from Unsplash"
dialogContent={modalContent}
onOpenChange={onClose}
isDialogOpen={isOpen}
minWidth="lg"
minHeight="lg"
customHeight="h-[80vh]"
/>
);
};
// Custom debounce function

2
apps/web/components/Dashboard/Course/EditCourseStructure/Buttons/NewActivityButton.tsx → apps/web/components/Dashboard/Pages/Course/EditCourseStructure/Buttons/NewActivityButton.tsx
View file

@ -1,6 +1,6 @@
import { useCourse } from '@components/Contexts/CourseContext'
import NewActivityModal from '@components/Objects/Modals/Activities/Create/NewActivity'
import Modal from '@components/StyledElements/Modal/Modal'
import Modal from '@components/Objects/StyledElements/Modal/Modal'
import { getAPIUrl } from '@services/config/config'
import {
createActivity,

43
apps/web/components/Dashboard/Course/EditCourseStructure/DraggableElements/ActivityElement.tsx → apps/web/components/Dashboard/Pages/Course/EditCourseStructure/DraggableElements/ActivityElement.tsx
View file

@ -1,4 +1,4 @@
import ConfirmationModal from '@components/StyledElements/ConfirmationModal/ConfirmationModal'
import ConfirmationModal from '@components/Objects/StyledElements/ConfirmationModal/ConfirmationModal'
import { getAPIUrl, getUriWithOrg } from '@services/config/config'
import { deleteActivity, updateActivity } from '@services/courses/activities'
import { revalidateTags } from '@services/utils/ts/requests'
@ -7,6 +7,7 @@ import {
Eye,
File,
FilePenLine,
FileSymlink,
Globe,
Lock,
MoreVertical,
@ -27,6 +28,7 @@ import { useOrg } from '@components/Contexts/OrgContext'
import { useCourse } from '@components/Contexts/CourseContext'
import toast from 'react-hot-toast'
import { useMediaQuery } from 'usehooks-ts'
import ToolTip from '@components/Objects/StyledElements/Tooltip/Tooltip'
type ActivitiyElementProps = {
orgslug: string
@ -176,24 +178,26 @@ function ActivityElement(props: ActivitiyElementProps) {
)}
<span>{!props.activity.published ? 'Publish' : 'Unpublish'}</span>
</button>
<Link
href={
getUriWithOrg(props.orgslug, '') +
`/course/${props.course_uuid.replace(
'course_',
''
)}/activity/${props.activity.activity_uuid.replace(
'activity_',
''
)}`
}
prefetch
className="p-1 px-2 sm:px-3 bg-gradient-to-bl text-cyan-800 from-sky-400/50 to-cyan-200/80 border border-cyan-600/10 shadow-md rounded-md font-bold text-xs flex items-center space-x-1 transition-colors duration-200 hover:from-sky-500/50 hover:to-cyan-300/80"
rel="noopener noreferrer"
>
<Eye strokeWidth={2} size={12} className="text-sky-600" />
<span>Preview</span>
</Link>
<div className="w-px h-3 bg-gray-300 mx-1 self-center rounded-full hidden sm:block" />
<ToolTip content="Preview Activity" sideOffset={8}>
<Link
href={
getUriWithOrg(props.orgslug, '') +
`/course/${props.course_uuid.replace(
'course_',
''
)}/activity/${props.activity.activity_uuid.replace(
'activity_',
''
)}`
}
prefetch
className="p-1 px-2 sm:px-3 bg-gradient-to-bl text-cyan-800 from-sky-400/50 to-cyan-200/80 border border-cyan-600/10 shadow-md rounded-md font-bold text-xs flex items-center space-x-1 transition-colors duration-200 hover:from-sky-500/50 hover:to-cyan-300/80"
rel="noopener noreferrer"
>
<Eye strokeWidth={2} size={14} className="text-sky-600" />
</Link>
</ToolTip>
{/* Delete Button */}
<ConfirmationModal
confirmationMessage="Are you sure you want to delete this activity ?"
@ -205,7 +209,6 @@ function ActivityElement(props: ActivitiyElementProps) {
rel="noopener noreferrer"
>
<X size={15} className="text-rose-200 font-bold" />
{!isMobile && <span className="text-rose-200 font-bold text-xs">Delete</span>}
</button>
}
functionToExecute={() => deleteActivityUI()}

2
apps/web/components/Dashboard/Course/EditCourseStructure/DraggableElements/ChapterElement.tsx → apps/web/components/Dashboard/Pages/Course/EditCourseStructure/DraggableElements/ChapterElement.tsx
View file

@ -1,4 +1,4 @@
import ConfirmationModal from '@components/StyledElements/ConfirmationModal/ConfirmationModal'
import ConfirmationModal from '@components/Objects/StyledElements/ConfirmationModal/ConfirmationModal'
import {
Hexagon,
MoreHorizontal,

2
apps/web/components/Dashboard/Course/EditCourseStructure/EditCourseStructure.tsx → apps/web/components/Dashboard/Pages/Course/EditCourseStructure/EditCourseStructure.tsx
View file

@ -13,7 +13,7 @@ import {
useCourseDispatch,
} from '@components/Contexts/CourseContext'
import { Hexagon } from 'lucide-react'
import Modal from '@components/StyledElements/Modal/Modal'
import Modal from '@components/Objects/StyledElements/Modal/Modal'
import NewChapterModal from '@components/Objects/Modals/Chapters/NewChapter'
import { useLHSession } from '@components/Contexts/LHSessionContext'

2
apps/web/components/Dashboard/Org/OrgEditGeneral/OrgEditGeneral.tsx → apps/web/components/Dashboard/Pages/Org/OrgEditGeneral/OrgEditGeneral.tsx
View file

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

290
apps/web/components/Dashboard/Pages/Payments/PaymentsConfigurationPage.tsx Normal file
View file

@ -0,0 +1,290 @@
'use client';
import React, { useState, useEffect } from 'react';
import { useOrg } from '@components/Contexts/OrgContext';
import { SiStripe } from '@icons-pack/react-simple-icons'
import { useLHSession } from '@components/Contexts/LHSessionContext';
import { getPaymentConfigs, initializePaymentConfig, updatePaymentConfig, deletePaymentConfig, updateStripeAccountID, getStripeOnboardingLink } from '@services/payments/payments';
import FormLayout, { ButtonBlack, Input, Textarea, FormField, FormLabelAndMessage, Flex } from '@components/Objects/StyledElements/Form/Form';
import { AlertTriangle, BarChart2, Check, Coins, CreditCard, Edit, ExternalLink, Info, Loader2, RefreshCcw, Trash2, UnplugIcon } from 'lucide-react';
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 { useRouter } from 'next/navigation';
import { getUriWithoutOrg } from '@services/config/config';
const PaymentsConfigurationPage: React.FC = () => {
const org = useOrg() as any;
const session = useLHSession() as any;
const router = useRouter();
const access_token = session?.data?.tokens?.access_token;
const { data: paymentConfigs, error, isLoading } = useSWR(
() => (org && access_token ? [`/payments/${org.id}/config`, access_token] : null),
([url, token]) => getPaymentConfigs(org.id, token)
);
const stripeConfig = paymentConfigs?.find((config: any) => config.provider === 'stripe');
const [isModalOpen, setIsModalOpen] = useState(false);
const [isOnboarding, setIsOnboarding] = useState(false);
const [isOnboardingLoading, setIsOnboardingLoading] = useState(false);
const enableStripe = async () => {
try {
setIsOnboarding(true);
const newConfig = { provider: 'stripe', enabled: true };
const config = await initializePaymentConfig(org.id, newConfig, 'stripe', access_token);
toast.success('Stripe enabled successfully');
mutate([`/payments/${org.id}/config`, access_token]);
} catch (error) {
console.error('Error enabling Stripe:', error);
toast.error('Failed to enable Stripe');
} finally {
setIsOnboarding(false);
}
};
const editConfig = async () => {
setIsModalOpen(true);
};
const deleteConfig = async () => {
try {
await deletePaymentConfig(org.id, stripeConfig.id, access_token);
toast.success('Stripe configuration deleted successfully');
mutate([`/payments/${org.id}/config`, access_token]);
} catch (error) {
console.error('Error deleting Stripe configuration:', error);
toast.error('Failed to delete Stripe configuration');
}
};
const handleStripeOnboarding = async () => {
try {
setIsOnboardingLoading(true);
const { connect_url } = await getStripeOnboardingLink(org.id, access_token, getUriWithoutOrg('/payments/stripe/connect/oauth'));
window.open(connect_url, '_blank');
} catch (error) {
console.error('Error getting onboarding link:', error);
toast.error('Failed to start Stripe onboarding');
} finally {
setIsOnboardingLoading(false);
}
};
if (isLoading) {
return <div>Loading...</div>;
}
if (error) {
return <div>Error loading payment configuration</div>;
}
return (
<div>
<div className="ml-10 mr-10 mx-auto bg-white rounded-xl shadow-sm px-4 py-4">
<div className="flex flex-col bg-gray-50 -space-y-1 px-5 py-3 rounded-md mb-3">
<h1 className="font-bold text-xl text-gray-800">Payments Configuration</h1>
<h2 className="text-gray-500 text-md">Manage your organization payments configuration</h2>
</div>
<Alert className="mb-3 p-6 border-2 border-blue-100 bg-blue-50/50">
<AlertTitle className="text-lg font-semibold mb-2 flex items-center space-x-2"> <Info className="h-5 w-5 " /> <span>About the Stripe Integration</span></AlertTitle>
<AlertDescription className="space-y-5">
<div className="pl-2">
<ul className="list-disc list-inside space-y-1 text-gray-600 pl-2">
<li className="flex items-center space-x-2">
<CreditCard className="h-4 w-4" />
<span>Accept payments for courses and subscriptions</span>
</li>
<li className="flex items-center space-x-2">
<RefreshCcw className="h-4 w-4" />
<span>Manage recurring billing and subscriptions</span>
</li>
<li className="flex items-center space-x-2">
<Coins className="h-4 w-4" />
<span>Handle multiple currencies and payment methods</span>
</li>
<li className="flex items-center space-x-2">
<BarChart2 className="h-4 w-4" />
<span>Access detailed payment analytics</span>
</li>
</ul>
</div>
<a
href="https://stripe.com/docs"
target="_blank"
rel="noopener noreferrer"
className="text-blue-600 hover:text-blue-800 inline-flex items-center font-medium transition-colors duration-200 pl-2"
>
Learn more about Stripe
<ExternalLink className="ml-1.5 h-4 w-4" />
</a>
</AlertDescription>
</Alert>
<div className="flex flex-col rounded-lg light-shadow">
{stripeConfig ? (
<div className="flex items-center justify-between bg-gradient-to-r from-indigo-500 to-purple-600 p-6 rounded-lg shadow-md">
<div className="flex items-center space-x-3">
<SiStripe className="text-white" size={32} />
<div className="flex flex-col">
<div className="flex items-center space-x-2">
<span className="text-xl font-semibold text-white">Stripe</span>
{stripeConfig.provider_specific_id && stripeConfig.active ? (
<div className="flex items-center space-x-1 bg-green-500/20 px-2 py-0.5 rounded-full">
<div className="h-2 w-2 bg-green-500 rounded-full" />
<span className="text-xs text-green-100">Connected</span>
</div>
) : (
<div className="flex items-center space-x-1 bg-red-500/20 px-2 py-0.5 rounded-full">
<div className="h-2 w-2 bg-red-500 rounded-full" />
<span className="text-xs text-red-100">Not Connected</span>
</div>
)}
</div>
<span className="text-white/80 text-sm">
{stripeConfig.provider_specific_id ?
`Linked Account: ${stripeConfig.provider_specific_id}` :
'Account ID not configured'}
</span>
</div>
</div>
<div className="flex space-x-2">
{(!stripeConfig.provider_specific_id || !stripeConfig.active) && (
<Button
onClick={handleStripeOnboarding}
className="flex items-center space-x-2 px-4 py-2 bg-green-500 text-white text-sm rounded-full hover:bg-green-600 transition duration-300 disabled:opacity-50 disabled:cursor-not-allowed border-2 border-green-400 shadow-md"
disabled={isOnboardingLoading}
>
{isOnboardingLoading ? (
<Loader2 className="animate-spin h-4 w-4" />
) : (
<UnplugIcon className="h-3 w-3" />
)}
<span className="font-semibold">Connect with Stripe</span>
</Button>
)}
<ConfirmationModal
confirmationButtonText="Remove Connection"
confirmationMessage="Are you sure you want to remove the Stripe connection? This action cannot be undone."
dialogTitle="Remove Stripe Connection"
dialogTrigger={
<Button
className="flex items-center space-x-2 bg-red-500 text-white text-sm rounded-full hover:bg-red-600 transition duration-300 disabled:opacity-50 disabled:cursor-not-allowed"
>
<Trash2 size={16} />
<span>Remove Connection</span>
</Button>
}
functionToExecute={deleteConfig}
status="warning"
/>
</div>
</div>
) : (
<Button
onClick={enableStripe}
className="flex items-center justify-center space-x-2 bg-gradient-to-r p-3 from-indigo-500 to-purple-600 text-white px-6 rounded-lg hover:from-indigo-600 hover:to-purple-700 transition duration-300 shadow-md disabled:opacity-50 disabled:cursor-not-allowed"
disabled={isOnboarding}
>
{isOnboarding ? (
<>
<Loader2 className="animate-spin" size={24} />
<span className="text-lg font-semibold">Connecting to Stripe...</span>
</>
) : (
<>
<SiStripe size={24} />
<span className="text-lg font-semibold">Enable Stripe</span>
</>
)}
</Button>
)}
</div>
</div>
{stripeConfig && (
<EditStripeConfigModal
orgId={org.id}
configId={stripeConfig.id}
accessToken={access_token}
isOpen={isModalOpen}
onClose={() => setIsModalOpen(false)}
/>
)}
</div>
);
};
interface EditStripeConfigModalProps {
orgId: number;
configId: string;
accessToken: string;
isOpen: boolean;
onClose: () => void;
}
const EditStripeConfigModal: React.FC<EditStripeConfigModalProps> = ({ orgId, configId, accessToken, isOpen, onClose }) => {
const [stripeAccountId, setStripeAccountId] = useState('');
useEffect(() => {
const fetchConfig = async () => {
try {
const config = await getPaymentConfigs(orgId, accessToken);
const stripeConfig = config.find((c: any) => c.id === configId);
if (stripeConfig && stripeConfig.provider_specific_id) {
setStripeAccountId(stripeConfig.provider_specific_id || '');
}
} catch (error) {
console.error('Error fetching Stripe configuration:', error);
toast.error('Failed to load existing configuration');
}
};
if (isOpen) {
fetchConfig();
}
}, [isOpen, orgId, configId, accessToken]);
const handleSubmit = async () => {
try {
const stripe_config = {
stripe_account_id: stripeAccountId,
};
await updateStripeAccountID(orgId, stripe_config, accessToken);
toast.success('Configuration updated successfully');
mutate([`/payments/${orgId}/config`, accessToken]);
onClose();
} catch (error) {
console.error('Error updating config:', error);
toast.error('Failed to update configuration');
}
};
return (
<Modal isDialogOpen={isOpen} dialogTitle="Edit Stripe Configuration" dialogDescription='Edit your stripe configuration' onOpenChange={onClose}
dialogContent={
<FormLayout onSubmit={handleSubmit}>
<FormField name="stripe-account-id">
<FormLabelAndMessage label="Stripe Account ID" />
<Input
type="text"
value={stripeAccountId}
onChange={(e) => setStripeAccountId(e.target.value)}
placeholder="acct_..."
/>
</FormField>
<Flex css={{ marginTop: 25, justifyContent: 'flex-end' }}>
<ButtonBlack type="submit" className="bg-blue-500 text-white px-4 py-2 rounded-lg hover:bg-blue-600 transition duration-300">
Save
</ButtonBlack>
</Flex>
</FormLayout>
}
/>
);
};
export default PaymentsConfigurationPage;

155
apps/web/components/Dashboard/Pages/Payments/PaymentsCustomersPage.tsx Normal file
View file

@ -0,0 +1,155 @@
import React from 'react'
import { useOrg } from '@components/Contexts/OrgContext'
import { useLHSession } from '@components/Contexts/LHSessionContext'
import useSWR from 'swr'
import {
Table,
TableBody,
TableCell,
TableHead,
TableHeader,
TableRow,
} from "@components/ui/table"
import { getOrgCustomers } from '@services/payments/payments'
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'
import UserAvatar from '@components/Objects/UserAvatar'
import { usePaymentsEnabled } from '@hooks/usePaymentsEnabled'
import UnconfiguredPaymentsDisclaimer from '@components/Pages/Payments/UnconfiguredPaymentsDisclaimer'
interface PaymentUserData {
payment_user_id: number;
user: {
username: string;
first_name: string;
last_name: string;
email: string;
avatar_image: string;
user_uuid: string;
};
product: {
name: string;
description: string;
product_type: string;
amount: number;
currency: string;
};
status: string;
creation_date: string;
}
function PaymentsUsersTable({ data }: { data: PaymentUserData[] }) {
if (!data || data.length === 0) {
return (
<div className="text-center py-8 text-gray-500">
No customers found
</div>
);
}
return (
<Table>
<TableHeader>
<TableRow>
<TableHead>User</TableHead>
<TableHead>Product</TableHead>
<TableHead>Type</TableHead>
<TableHead>Amount</TableHead>
<TableHead>Status</TableHead>
<TableHead>Purchase Date</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{data.map((item) => (
<TableRow key={item.payment_user_id}>
<TableCell className="font-medium">
<div className="flex items-center space-x-3">
<UserAvatar
border="border-2"
rounded="rounded-md"
avatar_url={getUserAvatarMediaDirectory(item.user.user_uuid, item.user.avatar_image)}
/>
<div className="flex flex-col">
<span className="font-medium">
{item.user.first_name || item.user.username}
</span>
<span className="text-sm text-gray-500">{item.user.email}</span>
</div>
</div>
</TableCell>
<TableCell>{item.product.name}</TableCell>
<TableCell>
<div className="flex items-center space-x-2">
{item.product.product_type === 'subscription' ? (
<Badge variant="outline" className="flex items-center gap-1">
<RefreshCcw size={12} />
<span>Subscription</span>
</Badge>
) : (
<Badge variant="outline" className="flex items-center gap-1">
<SquareCheck size={12} />
<span>One-time</span>
</Badge>
)}
</div>
</TableCell>
<TableCell>
{new Intl.NumberFormat('en-US', {
style: 'currency',
currency: item.product.currency
}).format(item.product.amount)}
</TableCell>
<TableCell>
<Badge
variant={item.status === 'active' ? 'default' :
item.status === 'completed' ? 'default' : 'secondary'}
>
{item.status}
</Badge>
</TableCell>
<TableCell>
{new Date(item.creation_date).toLocaleDateString()}
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
);
}
function PaymentsCustomersPage() {
const org = useOrg() as any
const session = useLHSession() as any
const access_token = session?.data?.tokens?.access_token
const { isEnabled, isLoading } = usePaymentsEnabled()
const { data: customers, error, isLoading: customersLoading } = useSWR(
org ? [`/payments/${org.id}/customers`, access_token] : null,
([url, token]) => getOrgCustomers(org.id, token)
)
if (!isEnabled && !isLoading) {
return (
<UnconfiguredPaymentsDisclaimer />
)
}
if (isLoading || customersLoading) return <PageLoading />
if (error) return <div>Error loading customers</div>
if (!customers) return <div>No customer data available</div>
return (
<div className="ml-10 mr-10 mx-auto bg-white rounded-xl shadow-sm px-4 py-4">
<div className="flex flex-col bg-gray-50 -space-y-1 px-5 py-3 rounded-md mb-3">
<h1 className="font-bold text-xl text-gray-800">Customers</h1>
<h2 className="text-gray-500 text-md">View and manage your customer information</h2>
</div>
<PaymentsUsersTable data={customers} />
</div>
)
}
export default PaymentsCustomersPage

312
apps/web/components/Dashboard/Pages/Payments/PaymentsProductPage.tsx Normal file
View file

@ -0,0 +1,312 @@
'use client';
import React, { useState, useEffect } from 'react'
import currencyCodes from 'currency-codes';
import { useOrg } from '@components/Contexts/OrgContext';
import { useLHSession } from '@components/Contexts/LHSessionContext';
import useSWR, { mutate } from 'swr';
import { getProducts, updateProduct, archiveProduct } from '@services/payments/products';
import { Plus, Pencil, Info, RefreshCcw, SquareCheck, ChevronDown, ChevronUp, Archive } from 'lucide-react';
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 { Formik, Form, Field, ErrorMessage } from 'formik';
import * as Yup from 'yup';
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';
import UnconfiguredPaymentsDisclaimer from '@components/Pages/Payments/UnconfiguredPaymentsDisclaimer';
import CreateProductForm from './SubComponents/CreateProductForm';
const validationSchema = Yup.object().shape({
name: Yup.string().required('Name is required'),
description: Yup.string().required('Description is required'),
amount: Yup.number().min(0, 'Amount must be positive').required('Amount is required'),
benefits: Yup.string(),
currency: Yup.string().required('Currency is required'),
});
function PaymentsProductPage() {
const org = useOrg() as any;
const session = useLHSession() as any;
const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
const [editingProductId, setEditingProductId] = useState<string | null>(null);
const [expandedProducts, setExpandedProducts] = useState<{ [key: string]: boolean }>({});
const [isStripeEnabled, setIsStripeEnabled] = useState(false);
const { isEnabled, isLoading } = usePaymentsEnabled();
const { data: products, error } = useSWR(
() => org && session ? [`/payments/${org.id}/products`, session.data?.tokens?.access_token] : null,
([url, token]) => getProducts(org.id, token)
);
const { data: paymentConfigs, error: paymentConfigError } = useSWR(
() => org && session ? [`/payments/${org.id}/config`, session.data?.tokens?.access_token] : null,
([url, token]) => getPaymentConfigs(org.id, token)
);
useEffect(() => {
if (paymentConfigs) {
const stripeConfig = paymentConfigs.find((config: any) => config.provider === 'stripe');
setIsStripeEnabled(!!stripeConfig);
}
}, [paymentConfigs]);
const handleArchiveProduct = async (productId: string) => {
const res = await archiveProduct(org.id, productId, session.data?.tokens?.access_token);
mutate([`/payments/${org.id}/products`, session.data?.tokens?.access_token]);
if (res.status === 200) {
toast.success('Product archived successfully');
} else {
toast.error(res.data.detail);
}
}
const toggleProductExpansion = (productId: string) => {
setExpandedProducts(prev => ({
...prev,
[productId]: !prev[productId]
}));
};
if (!isEnabled && !isLoading) {
return (
<UnconfiguredPaymentsDisclaimer />
);
}
if (error) return <div>Failed to load products</div>;
if (!products) return <div>Loading...</div>;
return (
<div className="h-full w-full bg-[#f8f8f8]">
<div className="pl-10 pr-10 mx-auto">
<Modal
isDialogOpen={isCreateModalOpen}
onOpenChange={setIsCreateModalOpen}
dialogTitle="Create New Product"
dialogDescription="Add a new product to your organization"
dialogContent={
<CreateProductForm onSuccess={() => setIsCreateModalOpen(false)} />
}
/>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
{products.data.map((product: any) => (
<div key={product.id} className="bg-white p-4 rounded-lg nice-shadow flex flex-col h-full">
{editingProductId === product.id ? (
<EditProductForm
product={product}
onSuccess={() => setEditingProductId(null)}
onCancel={() => setEditingProductId(null)}
/>
) : (
<div className="flex flex-col h-full">
<div className="flex justify-between items-start mb-2">
<div className="flex flex-col space-y-1 items-start">
<Badge className='w-fit flex items-center space-x-2' variant="outline">
{product.product_type === 'subscription' ? <RefreshCcw size={12} /> : <SquareCheck size={12} />}
<span className='text-sm'>{product.product_type === 'subscription' ? 'Subscription' : 'One-time payment'}</span>
</Badge>
<h3 className="font-bold text-lg">{product.name}</h3>
</div>
<div className="flex space-x-2">
<button
onClick={() => setEditingProductId(product.id)}
className={`text-blue-500 hover:text-blue-700 ${isStripeEnabled ? '' : 'opacity-50 cursor-not-allowed'}`}
disabled={!isStripeEnabled}
>
<Pencil size={16} />
</button>
<ConfirmationModal
confirmationButtonText="Archive Product"
confirmationMessage="Are you sure you want to archive this product?"
dialogTitle={`Archive ${product.name}?`}
dialogTrigger={
<button className="text-red-500 hover:text-red-700">
<Archive size={16} />
</button>
}
functionToExecute={() => handleArchiveProduct(product.id)}
status="warning"
/>
</div>
</div>
<div className="flex-grow overflow-hidden">
<div className={`transition-all duration-300 ease-in-out ${expandedProducts[product.id] ? 'max-h-[1000px]' : 'max-h-24'} overflow-hidden`}>
<p className="text-gray-600">
{product.description}
</p>
{product.benefits && (
<div className="mt-2">
<h4 className="font-semibold text-sm">Benefits:</h4>
<p className="text-sm text-gray-600">
{product.benefits}
</p>
</div>
)}
</div>
</div>
<div className="mt-2">
<button
onClick={() => toggleProductExpansion(product.id)}
className="text-slate-500 hover:text-slate-700 text-sm flex items-center"
>
{expandedProducts[product.id] ? (
<>
<ChevronUp size={16} />
<span>Show less</span>
</>
) : (
<>
<ChevronDown size={16} />
<span>Show more</span>
</>
)}
</button>
</div>
<ProductLinkedCourses productId={product.id} />
<div className="mt-2 flex items-center justify-between bg-gray-100 rounded-md p-2">
<span className="text-sm text-gray-600">Price:</span>
<span className="font-semibold text-lg">
{new Intl.NumberFormat('en-US', { style: 'currency', currency: product.currency }).format(product.amount)}
</span>
</div>
</div>
)}
</div>
))}
</div>
{products.data.length === 0 && (
<div className="flex mx-auto space-x-2 font-semibold mt-3 text-gray-600 items-center">
<Info size={20} />
<p>No products available. Create a new product to get started.</p>
</div>
)}
<div className="flex justify-center items-center py-10">
<button
onClick={() => setIsCreateModalOpen(true)}
className={`mb-4 flex items-center space-x-2 px-3 py-1.5 rounded-lg bg-gradient-to-bl text-white font-medium from-gray-700 to-gray-900 border border-gray-600 shadow-gray-900/20 nice-shadow transition duration-300 ${isStripeEnabled ? 'hover:from-gray-600 hover:to-gray-800' : 'opacity-50 cursor-not-allowed'
}`}
disabled={!isStripeEnabled}
>
<Plus size={18} />
<span className="text-sm font-bold">Create New Product</span>
</button>
</div>
</div>
</div>
)
}
const EditProductForm = ({ product, onSuccess, onCancel }: { product: any, onSuccess: () => void, onCancel: () => void }) => {
const org = useOrg() as any;
const session = useLHSession() as any;
const [currencies, setCurrencies] = useState<{ code: string; name: string }[]>([]);
useEffect(() => {
const allCurrencies = currencyCodes.data.map(currency => ({
code: currency.code,
name: `${currency.code} - ${currency.currency}`
}));
setCurrencies(allCurrencies);
}, []);
const initialValues = {
name: product.name,
description: product.description,
amount: product.amount,
benefits: product.benefits || '',
currency: product.currency || '',
product_type: product.product_type,
};
const handleSubmit = async (values: typeof initialValues, { setSubmitting }: { setSubmitting: (isSubmitting: boolean) => void }) => {
try {
await updateProduct(org.id, product.id, values, session.data?.tokens?.access_token);
mutate([`/payments/${org.id}/products`, session.data?.tokens?.access_token]);
onSuccess();
toast.success('Product updated successfully');
} catch (error) {
toast.error('Failed to update product');
} finally {
setSubmitting(false);
}
};
return (
<Formik
initialValues={initialValues}
validationSchema={validationSchema}
onSubmit={handleSubmit}
>
{({ isSubmitting, values, setFieldValue }) => (
<Form className="space-y-4">
<div className='px-1.5 py-2 flex-col space-y-3'>
<div>
<Label htmlFor="name">Product Name</Label>
<Field name="name" as={Input} placeholder="Product Name" />
<ErrorMessage name="name" component="div" className="text-red-500 text-sm mt-1" />
</div>
<div>
<Label htmlFor="description">Description</Label>
<Field name="description" as={Textarea} placeholder="Product Description" />
<ErrorMessage name="description" component="div" className="text-red-500 text-sm mt-1" />
</div>
<div className="flex space-x-2">
<div className="flex-grow">
<Label htmlFor="amount">Price</Label>
<Field name="amount" as={Input} type="number" placeholder="Price" />
<ErrorMessage name="amount" component="div" className="text-red-500 text-sm mt-1" />
</div>
<div className="w-1/3">
<Label htmlFor="currency">Currency</Label>
<Select
value={values.currency}
onValueChange={(value) => setFieldValue('currency', value)}
>
<SelectTrigger>
<SelectValue placeholder="Currency" />
</SelectTrigger>
<SelectContent>
{currencies.map((currency) => (
<SelectItem key={currency.code} value={currency.code}>
{currency.name}
</SelectItem>
))}
</SelectContent>
</Select>
<ErrorMessage name="currency" component="div" className="text-red-500 text-sm mt-1" />
</div>
</div>
<div>
<Label htmlFor="benefits">Benefits</Label>
<Field name="benefits" as={Textarea} placeholder="Product Benefits" />
<ErrorMessage name="benefits" component="div" className="text-red-500 text-sm mt-1" />
</div>
</div>
<div className="flex justify-end space-x-2">
<Button type="button" variant="outline" onClick={onCancel}>Cancel</Button>
<Button type="submit" disabled={isSubmitting}>
{isSubmitting ? 'Saving...' : 'Save'}
</Button>
</div>
</Form>
)}
</Formik>
);
};
export default PaymentsProductPage

184
apps/web/components/Dashboard/Pages/Payments/SubComponents/CreateProductForm.tsx Normal file
View file

@ -0,0 +1,184 @@
import React, { useEffect, useState } from 'react';
import { useOrg } from '@components/Contexts/OrgContext';
import { useLHSession } from '@components/Contexts/LHSessionContext';
import { createProduct } from '@services/payments/products';
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 currencyCodes from 'currency-codes';
const validationSchema = Yup.object().shape({
name: Yup.string().required('Name is required'),
description: Yup.string().required('Description is required'),
amount: Yup.number()
.min(1, 'Amount must be greater than zero')
.required('Amount is required'),
benefits: Yup.string(),
currency: Yup.string().required('Currency is required'),
product_type: Yup.string().oneOf(['one_time', 'subscription']).required('Product type is required'),
price_type: Yup.string().oneOf(['fixed_price', 'customer_choice']).required('Price type is required'),
});
interface ProductFormValues {
name: string;
description: string;
product_type: 'one_time' | 'subscription';
price_type: 'fixed_price' | 'customer_choice';
benefits: string;
amount: number;
currency: string;
}
const CreateProductForm: React.FC<{ onSuccess: () => void }> = ({ onSuccess }) => {
const org = useOrg() as any;
const session = useLHSession() as any;
const [currencies, setCurrencies] = useState<{ code: string; name: string }[]>([]);
useEffect(() => {
const allCurrencies = currencyCodes.data.map(currency => ({
code: currency.code,
name: `${currency.code} - ${currency.currency}`
}));
setCurrencies(allCurrencies);
}, []);
const initialValues: ProductFormValues = {
name: '',
description: '',
product_type: 'one_time',
price_type: 'fixed_price',
benefits: '',
amount: 1,
currency: 'USD',
};
const handleSubmit = async (values: ProductFormValues, { setSubmitting, resetForm }: any) => {
try {
const res = await createProduct(org.id, values, session.data?.tokens?.access_token);
if (res.success) {
toast.success('Product created successfully');
mutate([`/payments/${org.id}/products`, session.data?.tokens?.access_token]);
resetForm();
onSuccess();
} else {
toast.error('Failed to create product');
}
} catch (error) {
console.error('Error creating product:', error);
toast.error('An error occurred while creating the product');
} finally {
setSubmitting(false);
}
};
return (
<Formik
initialValues={initialValues}
validationSchema={validationSchema}
onSubmit={handleSubmit}
>
{({ isSubmitting, values, setFieldValue }) => (
<Form className="space-y-4">
<div className='px-1.5 py-2 flex-col space-y-3'>
<div>
<Label htmlFor="name">Product Name</Label>
<Field name="name" as={Input} placeholder="Product Name" />
<ErrorMessage name="name" component="div" className="text-red-500 text-sm mt-1" />
</div>
<div>
<Label htmlFor="description">Description</Label>
<Field name="description" as={Textarea} placeholder="Product Description" />
<ErrorMessage name="description" component="div" className="text-red-500 text-sm mt-1" />
</div>
<div>
<Label htmlFor="product_type">Product Type</Label>
<Select
value={values.product_type}
onValueChange={(value) => setFieldValue('product_type', value)}
>
<SelectTrigger>
<SelectValue placeholder="Product Type" />
</SelectTrigger>
<SelectContent>
<SelectItem value="one_time">One Time</SelectItem>
<SelectItem value="subscription">Subscription</SelectItem>
</SelectContent>
</Select>
<ErrorMessage name="product_type" component="div" className="text-red-500 text-sm mt-1" />
</div>
<div>
<Label htmlFor="price_type">Price Type</Label>
<Select
value={values.price_type}
onValueChange={(value) => setFieldValue('price_type', value)}
>
<SelectTrigger>
<SelectValue placeholder="Price Type" />
</SelectTrigger>
<SelectContent>
<SelectItem value="fixed_price">Fixed Price</SelectItem>
{values.product_type !== 'subscription' && (
<SelectItem value="customer_choice">Customer Choice</SelectItem>
)}
</SelectContent>
</Select>
<ErrorMessage name="price_type" component="div" className="text-red-500 text-sm mt-1" />
</div>
<div className="flex space-x-2">
<div className="flex-grow">
<Label htmlFor="amount">
{values.price_type === 'fixed_price' ? 'Price' : 'Minimum Amount'}
</Label>
<Field name="amount" as={Input} type="number" placeholder={values.price_type === 'fixed_price' ? 'Price' : 'Minimum Amount'} />
<ErrorMessage name="amount" component="div" className="text-red-500 text-sm mt-1" />
</div>
<div className="w-1/3">
<Label htmlFor="currency">Currency</Label>
<Select
value={values.currency}
onValueChange={(value) => setFieldValue('currency', value)}
>
<SelectTrigger>
<SelectValue placeholder="Currency" />
</SelectTrigger>
<SelectContent>
{currencies.map((currency) => (
<SelectItem key={currency.code} value={currency.code}>
{currency.name}
</SelectItem>
))}
</SelectContent>
</Select>
<ErrorMessage name="currency" component="div" className="text-red-500 text-sm mt-1" />
</div>
</div>
<div>
<Label htmlFor="benefits">Benefits</Label>
<Field name="benefits" as={Textarea} placeholder="Product Benefits" />
<ErrorMessage name="benefits" component="div" className="text-red-500 text-sm mt-1" />
</div>
</div>
<div className="flex justify-end">
<Button type="submit" disabled={isSubmitting}>
{isSubmitting ? 'Creating...' : 'Create Product'}
</Button>
</div>
</Form>
)}
</Formik>
);
};
export default CreateProductForm;

143
apps/web/components/Dashboard/Pages/Payments/SubComponents/LinkCourseModal.tsx Normal file
View file

@ -0,0 +1,143 @@
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 { Search } from 'lucide-react';
import toast from 'react-hot-toast';
import { mutate } from 'swr';
import useSWR from 'swr';
import { getOrgCourses } from '@services/courses/courses';
import { getCoursesLinkedToProduct } from '@services/payments/products';
import Link from 'next/link';
import { getCourseThumbnailMediaDirectory } from '@services/media/media';
import { getUriWithOrg } from '@services/config/config';
interface LinkCourseModalProps {
productId: string;
onSuccess: () => void;
}
interface CoursePreviewProps {
course: {
id: string;
name: string;
description: string;
thumbnail_image: string;
course_uuid: string;
};
orgslug: string;
onLink: (courseId: string) => void;
isLinked: boolean;
}
const CoursePreview = ({ course, orgslug, onLink, isLinked }: CoursePreviewProps) => {
const org = useOrg() as any;
const thumbnailImage = course.thumbnail_image
? getCourseThumbnailMediaDirectory(org?.org_uuid, course.course_uuid, course.thumbnail_image)
: '../empty_thumbnail.png';
return (
<div className="flex gap-4 p-4 bg-white rounded-lg border border-gray-100 hover:border-gray-200 transition-colors">
{/* Thumbnail */}
<div
className="flex-shrink-0 w-[120px] h-[68px] rounded-md bg-cover bg-center ring-1 ring-inset ring-black/10"
style={{ backgroundImage: `url(${thumbnailImage})` }}
/>
{/* Content */}
<div className="flex-grow space-y-1">
<h3 className="font-medium text-gray-900 line-clamp-1">
{course.name}
</h3>
<p className="text-sm text-gray-500 line-clamp-2">
{course.description}
</p>
</div>
{/* Action Button */}
<div className="flex-shrink-0 flex items-center">
{isLinked ? (
<Button
variant="outline"
size="sm"
disabled
className="text-gray-500"
>
Already Linked
</Button>
) : (
<Button
onClick={() => onLink(course.id)}
size="sm"
>
Link Course
</Button>
)}
</div>
</div>
);
};
export default function LinkCourseModal({ productId, onSuccess }: LinkCourseModalProps) {
const [searchTerm, setSearchTerm] = useState('');
const org = useOrg() as any;
const session = useLHSession() as any;
const { data: courses } = useSWR(
() => org && session ? [org.slug, searchTerm, session.data?.tokens?.access_token] : null,
([orgSlug, search, token]) => getOrgCourses(orgSlug, null, token)
);
const { data: linkedCourses } = useSWR(
() => org && session ? [`/payments/${org.id}/products/${productId}/courses`, session.data?.tokens?.access_token] : null,
([_, token]) => getCoursesLinkedToProduct(org.id, productId, token)
);
const handleLinkCourse = async (courseId: string) => {
try {
const response = await linkCourseToProduct(org.id, productId, courseId, session.data?.tokens?.access_token);
if (response.success) {
mutate([`/payments/${org.id}/products`, session.data?.tokens?.access_token]);
toast.success('Course linked successfully');
onSuccess();
} else {
toast.error(response.data?.detail || 'Failed to link course');
}
} catch (error) {
toast.error('Failed to link course');
}
};
const isLinked = (courseId: string) => {
return linkedCourses?.data?.some((course: any) => course.id === courseId);
};
return (
<div className="space-y-4">
{/* Course List */}
<div className="max-h-[400px] overflow-y-auto space-y-2 px-3">
{courses?.map((course: any) => (
<CoursePreview
key={course.course_uuid}
course={course}
orgslug={org.slug}
onLink={handleLinkCourse}
isLinked={isLinked(course.id)}
/>
))}
{/* Empty State */}
{(!courses || courses.length === 0) && (
<div className="text-center py-6 text-gray-500">
No courses found
</div>
)}
</div>
</div>
);
}

106
apps/web/components/Dashboard/Pages/Payments/SubComponents/ProductLinkedCourses.tsx Normal file
View file

@ -0,0 +1,106 @@
import React, { useEffect, useState } from 'react';
import { getCoursesLinkedToProduct, unlinkCourseFromProduct } from '@services/payments/products';
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 toast from 'react-hot-toast';
import { mutate } from 'swr';
import Modal from '@components/Objects/StyledElements/Modal/Modal';
import LinkCourseModal from './LinkCourseModal';
interface ProductLinkedCoursesProps {
productId: string;
}
export default function ProductLinkedCourses({ productId }: ProductLinkedCoursesProps) {
const [linkedCourses, setLinkedCourses] = useState<any[]>([]);
const [isLinkModalOpen, setIsLinkModalOpen] = useState(false);
const session = useLHSession() as any;
const org = useOrg() as any;
const fetchLinkedCourses = async () => {
try {
const response = await getCoursesLinkedToProduct(org.id, productId, session.data?.tokens?.access_token);
setLinkedCourses(response.data || []);
} catch (error) {
toast.error('Failed to fetch linked courses');
}
};
const handleUnlinkCourse = async (courseId: string) => {
try {
const response = await unlinkCourseFromProduct(org.id, productId, courseId, session.data?.tokens?.access_token);
if (response.success) {
await fetchLinkedCourses();
mutate([`/payments/${org.id}/products`, session.data?.tokens?.access_token]);
toast.success('Course unlinked successfully');
} else {
toast.error(response.data?.detail || 'Failed to unlink course');
}
} catch (error) {
toast.error('Failed to unlink course');
}
};
useEffect(() => {
if (org && session && productId) {
fetchLinkedCourses();
}
}, [org, session, productId]);
return (
<div className="mt-4">
<div className="flex justify-between items-center mb-2">
<h3 className="text-sm font-semibold text-gray-700">Linked Courses</h3>
<Modal
isDialogOpen={isLinkModalOpen}
onOpenChange={setIsLinkModalOpen}
dialogTitle="Link Course to Product"
dialogDescription="Select a course to link to this product"
dialogContent={
<LinkCourseModal
productId={productId}
onSuccess={() => {
setIsLinkModalOpen(false);
fetchLinkedCourses();
}}
/>
}
dialogTrigger={
<Button variant="outline" size="sm" className="flex items-center gap-2">
<Plus size={16} />
<span>Link Course</span>
</Button>
}
/>
</div>
<div className="space-y-2">
{linkedCourses.length === 0 ? (
<div className="text-sm text-gray-500 flex items-center gap-2">
<BookOpen size={16} />
<span>No courses linked yet</span>
</div>
) : (
linkedCourses.map((course) => (
<div
key={course.id}
className="flex items-center justify-between p-2 bg-gray-50 rounded-md"
>
<span className="text-sm font-medium">{course.name}</span>
<Button
variant="ghost"
size="sm"
onClick={() => handleUnlinkCourse(course.id)}
className="text-red-500 hover:text-red-700"
>
<Trash2 size={16} />
</Button>
</div>
))
)}
</div>
</div>
);
}

0
apps/web/components/Dashboard/UserAccount/UserEditGeneral/UserEditGeneral.tsx → apps/web/components/Dashboard/Pages/UserAccount/UserEditGeneral/UserEditGeneral.tsx
View file

0
apps/web/components/Dashboard/UserAccount/UserEditPassword/UserEditPassword.tsx → apps/web/components/Dashboard/Pages/UserAccount/UserEditPassword/UserEditPassword.tsx
View file

4
apps/web/components/Dashboard/Users/OrgAccess/OrgAccess.tsx → apps/web/components/Dashboard/Pages/Users/OrgAccess/OrgAccess.tsx
View file

@ -1,6 +1,6 @@
import { useOrg } from '@components/Contexts/OrgContext'
import PageLoading from '@components/Objects/Loaders/PageLoading'
import ConfirmationModal from '@components/StyledElements/ConfirmationModal/ConfirmationModal'
import ConfirmationModal from '@components/Objects/StyledElements/ConfirmationModal/ConfirmationModal'
import { getAPIUrl, getUriWithOrg } from '@services/config/config'
import { swrFetcher } from '@services/utils/ts/requests'
import { Globe, Ticket, UserSquare, Users, X } from 'lucide-react'
@ -14,7 +14,7 @@ import {
} from '@services/organizations/invites'
import toast from 'react-hot-toast'
import { useRouter } from 'next/navigation'
import Modal from '@components/StyledElements/Modal/Modal'
import Modal from '@components/Objects/StyledElements/Modal/Modal'
import OrgInviteCodeGenerate from '@components/Objects/Modals/Dash/OrgAccess/OrgInviteCodeGenerate'
import { useLHSession } from '@components/Contexts/LHSessionContext'

4
apps/web/components/Dashboard/Users/OrgUserGroups/OrgUserGroups.tsx → apps/web/components/Dashboard/Pages/Users/OrgUserGroups/OrgUserGroups.tsx
View file

@ -4,8 +4,8 @@ import { useOrg } from '@components/Contexts/OrgContext'
import AddUserGroup from '@components/Objects/Modals/Dash/OrgUserGroups/AddUserGroup'
import EditUserGroup from '@components/Objects/Modals/Dash/OrgUserGroups/EditUserGroup'
import ManageUsers from '@components/Objects/Modals/Dash/OrgUserGroups/ManageUsers'
import ConfirmationModal from '@components/StyledElements/ConfirmationModal/ConfirmationModal'
import Modal from '@components/StyledElements/Modal/Modal'
import ConfirmationModal from '@components/Objects/StyledElements/ConfirmationModal/ConfirmationModal'
import Modal from '@components/Objects/StyledElements/Modal/Modal'
import { getAPIUrl } from '@services/config/config'
import { deleteUserGroup } from '@services/usergroups/usergroups'
import { swrFetcher } from '@services/utils/ts/requests'

6
apps/web/components/Dashboard/Users/OrgUsers/OrgUsers.tsx → apps/web/components/Dashboard/Pages/Users/OrgUsers/OrgUsers.tsx
View file

@ -2,9 +2,9 @@ import { useLHSession } from '@components/Contexts/LHSessionContext'
import { useOrg } from '@components/Contexts/OrgContext'
import PageLoading from '@components/Objects/Loaders/PageLoading'
import RolesUpdate from '@components/Objects/Modals/Dash/OrgUsers/RolesUpdate'
import ConfirmationModal from '@components/StyledElements/ConfirmationModal/ConfirmationModal'
import Modal from '@components/StyledElements/Modal/Modal'
import Toast from '@components/StyledElements/Toast/Toast'
import ConfirmationModal from '@components/Objects/StyledElements/ConfirmationModal/ConfirmationModal'
import Modal from '@components/Objects/StyledElements/Modal/Modal'
import Toast from '@components/Objects/StyledElements/Toast/Toast'
import { getAPIUrl } from '@services/config/config'
import { removeUserFromOrg } from '@services/organizations/orgs'
import { swrFetcher } from '@services/utils/ts/requests'

4
apps/web/components/Dashboard/Users/OrgUsersAdd/OrgUsersAdd.tsx → apps/web/components/Dashboard/Pages/Users/OrgUsersAdd/OrgUsersAdd.tsx
View file

@ -1,8 +1,8 @@
import { useLHSession } from '@components/Contexts/LHSessionContext'
import { useOrg } from '@components/Contexts/OrgContext'
import PageLoading from '@components/Objects/Loaders/PageLoading'
import Toast from '@components/StyledElements/Toast/Toast'
import ToolTip from '@components/StyledElements/Tooltip/Tooltip'
import Toast from '@components/Objects/StyledElements/Toast/Toast'
import ToolTip from '@components/Objects/StyledElements/Tooltip/Tooltip'
import { getAPIUrl } from '@services/config/config'
import { inviteBatchUsers } from '@services/organizations/invites'
import { swrFetcher } from '@services/utils/ts/requests'

36
apps/web/components/Hooks/useFeatureFlag.tsx Normal file
View file

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

0
apps/web/components/AI/Hooks/useGetAIFeatures.tsx → apps/web/components/Hooks/useGetAIFeatures.tsx
View file

26
apps/web/components/Hooks/usePaymentsEnabled.tsx Normal file
View file

@ -0,0 +1,26 @@
// hooks/usePaymentsEnabled.ts
import { useOrg } from '@components/Contexts/OrgContext';
import { useLHSession } from '@components/Contexts/LHSessionContext';
import useSWR from 'swr';
import { getPaymentConfigs } from '@services/payments/payments';
export function usePaymentsEnabled() {
const org = useOrg() as any;
const session = useLHSession() as any;
const access_token = session?.data?.tokens?.access_token;
const { data: paymentConfigs, error, isLoading } = useSWR(
org && access_token ? [`/payments/${org.id}/config`, access_token] : null,
([url, token]) => getPaymentConfigs(org.id, token)
);
const isStripeEnabled = paymentConfigs?.some(
(config: any) => config.provider === 'stripe' && config.active
);
return {
isEnabled: !!isStripeEnabled,
isLoading,
error
};
}

2
apps/web/components/Objects/Activities/AI/AIActivityAsk.tsx
View file

@ -15,7 +15,7 @@ import {
useAIChatBot,
useAIChatBotDispatch,
} from '@components/Contexts/AI/AIChatBotContext'
import useGetAIFeatures from '../../../AI/Hooks/useGetAIFeatures'
import useGetAIFeatures from '../../../Hooks/useGetAIFeatures'
import UserAvatar from '@components/Objects/UserAvatar'
type AIActivityAskProps = {

4
apps/web/components/Objects/Activities/DynamicCanva/AI/AICanvaToolkit.tsx
View file

@ -4,7 +4,7 @@ import learnhouseAI_icon from 'public/learnhouse_ai_simple.png'
import Image from 'next/image'
import { BookOpen, FormInput, Languages, MoreVertical } from 'lucide-react'
import { BubbleMenu } from '@tiptap/react'
import ToolTip from '@components/StyledElements/Tooltip/Tooltip'
import ToolTip from '@components/Objects/StyledElements/Tooltip/Tooltip'
import {
AIChatBotStateTypes,
useAIChatBot,
@ -14,7 +14,7 @@ import {
sendActivityAIChatMessage,
startActivityAIChatSession,
} from '@services/ai/ai'
import useGetAIFeatures from '../../../../AI/Hooks/useGetAIFeatures'
import useGetAIFeatures from '../../../../Hooks/useGetAIFeatures'
import { useLHSession } from '@components/Contexts/LHSessionContext'
type AICanvaToolkitProps = {

2
apps/web/components/ContentPlaceHolder.tsx → apps/web/components/Objects/ContentPlaceHolder.tsx
View file

@ -1,6 +1,6 @@
'use client';
import React from 'react'
import useAdminStatus from './Hooks/useAdminStatus'
import useAdminStatus from '../Hooks/useAdminStatus'
// Terrible name and terible implementation, need to be refactored asap

161
apps/web/components/Objects/Courses/CourseActions/CoursePaidOptions.tsx Normal file
View file

@ -0,0 +1,161 @@
import React, { useState } from 'react'
import { useOrg } from '@components/Contexts/OrgContext'
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 toast from 'react-hot-toast'
import { useRouter } from 'next/navigation'
import { getUriWithOrg } from '@services/config/config'
interface CoursePaidOptionsProps {
course: {
id: string;
org_id: number;
}
}
function CoursePaidOptions({ course }: CoursePaidOptionsProps) {
const org = useOrg() as any
const session = useLHSession() as any
const [expandedProducts, setExpandedProducts] = useState<{ [key: string]: boolean }>({})
const [isProcessing, setIsProcessing] = useState<{ [key: string]: boolean }>({})
const router = useRouter()
const { data: linkedProducts, error } = useSWR(
() => org && session ? [`/payments/${course.org_id}/courses/${course.id}/products`, session.data?.tokens?.access_token] : null,
([url, token]) => getProductsByCourse(course.org_id, course.id, token)
)
const handleCheckout = async (productId: number) => {
if (!session.data?.user) {
// Redirect to login if user is not authenticated
router.push(`/signup?orgslug=${org.slug}`)
return
}
try {
setIsProcessing(prev => ({ ...prev, [productId]: true }))
const redirect_uri = getUriWithOrg(org.slug, '/courses')
const response = await getStripeProductCheckoutSession(
course.org_id,
productId,
redirect_uri,
session.data?.tokens?.access_token
)
if (response.success) {
router.push(response.data.checkout_url)
} else {
toast.error('Failed to initiate checkout process')
}
} catch (error) {
toast.error('An error occurred while processing your request')
} finally {
setIsProcessing(prev => ({ ...prev, [productId]: false }))
}
}
const toggleProductExpansion = (productId: string) => {
setExpandedProducts(prev => ({
...prev,
[productId]: !prev[productId]
}))
}
if (error) return <div>Failed to load product options</div>
if (!linkedProducts) return <div>Loading...</div>
return (
<div className="space-y-4 p-1">
{linkedProducts.data.map((product: any) => (
<div key={product.id} className="bg-slate-50/30 p-4 rounded-lg nice-shadow flex flex-col">
<div className="flex justify-between items-start mb-2">
<div className="flex flex-col space-y-1 items-start">
<Badge className='w-fit flex items-center space-x-2 bg-gray-100/50' variant="outline">
{product.product_type === 'subscription' ? <RefreshCcw size={12} /> : <SquareCheck size={12} />}
<span className='text-sm'>
{product.product_type === 'subscription' ? 'Subscription' : 'One-time payment'}
{product.product_type === 'subscription' && ' (per month)'}
</span>
</Badge>
<h3 className="font-bold text-lg">{product.name}</h3>
</div>
</div>
<div className="flex-grow overflow-hidden">
<div className={`transition-all duration-300 ease-in-out ${expandedProducts[product.id] ? 'max-h-[1000px]' : 'max-h-24'
} overflow-hidden`}>
<p className="text-gray-600">
{product.description}
</p>
{product.benefits && (
<div className="mt-2">
<h4 className="font-semibold text-sm">Benefits:</h4>
<p className="text-sm text-gray-600">
{product.benefits}
</p>
</div>
)}
</div>
</div>
<div className="mt-2">
<button
onClick={() => toggleProductExpansion(product.id)}
className="text-slate-500 hover:text-slate-700 text-sm flex items-center"
>
{expandedProducts[product.id] ? (
<>
<ChevronUp size={16} />
<span>Show less</span>
</>
) : (
<>
<ChevronDown size={16} />
<span>Show more</span>
</>
)}
</button>
</div>
<div className="mt-2 flex items-center justify-between bg-gray-100 rounded-md p-2">
<span className="text-sm text-gray-600">
{product.price_type === 'customer_choice' ? 'Minimum Price:' : 'Price:'}
</span>
<div className="flex flex-col items-end">
<span className="font-semibold text-lg">
{new Intl.NumberFormat('en-US', {
style: 'currency',
currency: product.currency
}).format(product.amount)}
{product.product_type === 'subscription' && <span className="text-sm text-gray-500 ml-1">/month</span>}
</span>
{product.price_type === 'customer_choice' && (
<span className="text-sm text-gray-500">Choose your price</span>
)}
</div>
</div>
<Button
className="mt-4 w-full"
variant="default"
onClick={() => handleCheckout(product.id)}
disabled={isProcessing[product.id]}
>
{isProcessing[product.id]
? 'Processing...'
: product.product_type === 'subscription'
? 'Subscribe Now'
: 'Purchase Now'
}
</Button>
</div>
))}
</div>
)
}
export default CoursePaidOptions

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

@ -0,0 +1,257 @@
import React, { useState, useEffect } from 'react'
import UserAvatar from '../../UserAvatar'
import { getUserAvatarMediaDirectory } from '@services/media/media'
import { removeCourse, startCourse } from '@services/courses/activity'
import { revalidateTags } from '@services/utils/ts/requests'
import { useRouter } from 'next/navigation'
import { useLHSession } from '@components/Contexts/LHSessionContext'
import { useMediaQuery } from 'usehooks-ts'
import { getUriWithOrg } from '@services/config/config'
import { getProductsByCourse } from '@services/payments/products'
import { LogIn, LogOut, ShoppingCart, AlertCircle } from 'lucide-react'
import Modal from '@components/Objects/StyledElements/Modal/Modal'
import CoursePaidOptions from './CoursePaidOptions'
import { checkPaidAccess } from '@services/payments/payments'
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[]
}
}
interface CourseActionsProps {
courseuuid: string
orgslug: string
course: Course & {
org_id: number
}
}
// Separate component for author display
const AuthorInfo = ({ author, isMobile }: { author: Author, isMobile: boolean }) => (
<div className="flex flex-row md:flex-col mx-auto space-y-0 md:space-y-3 space-x-4 md:space-x-0 px-2 py-2 items-center">
<UserAvatar
border="border-8"
avatar_url={author.avatar_image ? getUserAvatarMediaDirectory(author.user_uuid, author.avatar_image) : ''}
predefined_avatar={author.avatar_image ? undefined : 'empty'}
width={isMobile ? 60 : 100}
/>
<div className="md:-space-y-2">
<div className="text-[12px] text-neutral-400 font-semibold">Author</div>
<div className="text-lg md:text-xl font-bold text-neutral-800">
{(author.first_name && author.last_name) ? (
<div className="flex space-x-2 items-center">
<p>{`${author.first_name} ${author.last_name}`}</p>
<span className="text-xs bg-neutral-100 p-1 px-3 rounded-full text-neutral-400 font-semibold">
@{author.username}
</span>
</div>
) : (
<div className="flex space-x-2 items-center">
<p>@{author.username}</p>
</div>
)}
</div>
</div>
</div>
)
const Actions = ({ courseuuid, orgslug, course }: CourseActionsProps) => {
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(getUriWithOrg(orgslug, '/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 (isLoading) {
return <div className="animate-pulse h-20 bg-gray-100 rounded-lg nice-shadow" />
}
if (linkedProducts.length > 0) {
return (
<div className="space-y-4">
{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>
)}
{!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>
)
}
return (
<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'
}`}
>
{!session.data?.user ? (
<>
<LogIn className="w-5 h-5" />
Authenticate to start course
</>
) : isStarted ? (
<>
<LogOut className="w-5 h-5" />
Leave Course
</>
) : (
<>
<LogIn className="w-5 h-5" />
Start Course
</>
)}
</button>
)
}
function CoursesActions({ courseuuid, orgslug, course }: CourseActionsProps) {
const router = useRouter()
const session = useLHSession() as any
const isMobile = useMediaQuery('(max-width: 768px)')
return (
<div className=" space-y-3 antialiased flex flex-col p-3 py-5 bg-white shadow-md shadow-gray-300/25 outline outline-1 outline-neutral-200/40 rounded-lg overflow-hidden">
<AuthorInfo author={course.authors[0]} isMobile={isMobile} />
<div className='px-3 py-2'>
<Actions courseuuid={courseuuid} orgslug={orgslug} course={course} />
</div>
</div>
)
}
export default CoursesActions

26
apps/web/components/Objects/Courses/CourseActions/PaidCourseActivityDisclaimer.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 PaidCourseActivityDisclaimer({ course }: PaidCourseActivityProps) {
return (
<div className="space-y-4 max-w-lg mx-auto">
<div className="p-4 bg-amber-50 border border-amber-200 rounded-lg ">
<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.
</p>
</div>
<CoursePaidOptions course={course} />
</div>
)
}
export default PaidCourseActivityDisclaimer

4
apps/web/components/Objects/CourseUpdates/CourseUpdates.tsx → apps/web/components/Objects/Courses/CourseUpdates/CourseUpdates.tsx
View file

@ -8,7 +8,7 @@ import FormLayout, {
FormLabelAndMessage,
Input,
Textarea,
} from '@components/StyledElements/Form/Form'
} from '@components/Objects/StyledElements/Form/Form'
import { useCourse } from '@components/Contexts/CourseContext'
import useSWR, { mutate } from 'swr'
import { getAPIUrl } from '@services/config/config'
@ -17,7 +17,7 @@ import useAdminStatus from '@components/Hooks/useAdminStatus'
import { useOrg } from '@components/Contexts/OrgContext'
import { createCourseUpdate, deleteCourseUpdate } from '@services/courses/updates'
import toast from 'react-hot-toast'
import ConfirmationModal from '@components/StyledElements/ConfirmationModal/ConfirmationModal'
import ConfirmationModal from '@components/Objects/StyledElements/ConfirmationModal/ConfirmationModal'
import dayjs from 'dayjs';
import relativeTime from 'dayjs/plugin/relativeTime';
import { useLHSession } from '@components/Contexts/LHSessionContext'

2
apps/web/components/Objects/Editor/AI/AIEditorToolkit.tsx
View file

@ -23,7 +23,7 @@ import {
sendActivityAIChatMessage,
startActivityAIChatSession,
} from '@services/ai/ai'
import useGetAIFeatures from '@components/AI/Hooks/useGetAIFeatures'
import useGetAIFeatures from '@components/Hooks/useGetAIFeatures'
import { useLHSession } from '@components/Contexts/LHSessionContext'
type AIEditorToolkitProps = {

4
apps/web/components/Objects/Editor/Editor.tsx
View file

@ -29,7 +29,7 @@ import Table from '@tiptap/extension-table'
import TableCell from '@tiptap/extension-table-cell'
import TableHeader from '@tiptap/extension-table-header'
import TableRow from '@tiptap/extension-table-row'
import ToolTip from '@components/StyledElements/Tooltip/Tooltip'
import ToolTip from '@components/Objects/StyledElements/Tooltip/Tooltip'
import Link from 'next/link'
import { getCourseThumbnailMediaDirectory } from '@services/media/media'
@ -47,7 +47,7 @@ import java from 'highlight.js/lib/languages/java'
import { CourseProvider } from '@components/Contexts/CourseContext'
import { useLHSession } from '@components/Contexts/LHSessionContext'
import AIEditorToolkit from './AI/AIEditorToolkit'
import useGetAIFeatures from '@components/AI/Hooks/useGetAIFeatures'
import useGetAIFeatures from '@components/Hooks/useGetAIFeatures'
import Collaboration from '@tiptap/extension-collaboration'
import CollaborationCursor from '@tiptap/extension-collaboration-cursor'
import ActiveAvatars from './ActiveAvatars'

2
apps/web/components/Objects/Editor/EditorWrapper.tsx
View file

@ -3,7 +3,7 @@ import { default as React, useEffect, useRef, useState } from 'react'
import Editor from './Editor'
import { updateActivity } from '@services/courses/activities'
import { toast } from 'react-hot-toast'
import Toast from '@components/StyledElements/Toast/Toast'
import Toast from '@components/Objects/StyledElements/Toast/Toast'
import { OrgProvider } from '@components/Contexts/OrgContext'
import { useLHSession } from '@components/Contexts/LHSessionContext'

2
apps/web/components/Objects/Editor/Toolbar/ToolbarButtons.tsx
View file

@ -29,7 +29,7 @@ import {
Video,
} from 'lucide-react'
import { SiYoutube } from '@icons-pack/react-simple-icons'
import ToolTip from '@components/StyledElements/Tooltip/Tooltip'
import ToolTip from '@components/Objects/StyledElements/Tooltip/Tooltip'
export const ToolbarButtons = ({ editor, props }: any) => {
if (!editor) {

4
apps/web/components/Objects/Menu/Menu.tsx → apps/web/components/Objects/Menus/OrgMenu.tsx
View file

@ -3,12 +3,12 @@ import React from 'react'
import Link from 'next/link'
import { getUriWithOrg } from '@services/config/config'
import { HeaderProfileBox } from '@components/Security/HeaderProfileBox'
import MenuLinks from './MenuLinks'
import MenuLinks from './OrgMenuLinks'
import { getOrgLogoMediaDirectory } from '@services/media/media'
import { useLHSession } from '@components/Contexts/LHSessionContext'
import { useOrg } from '@components/Contexts/OrgContext'
export const Menu = (props: any) => {
export const OrgMenu = (props: any) => {
const orgslug = props.orgslug
const session = useLHSession() as any;
const access_token = session?.data?.tokens?.access_token;

0
apps/web/components/Objects/Menu/MenuLinks.tsx → apps/web/components/Objects/Menus/OrgMenuLinks.tsx
View file

2
apps/web/components/Objects/Modals/Activities/Create/NewActivityModal/Assignment.tsx
View file

@ -7,7 +7,7 @@ import FormLayout, {
FormMessage,
Input,
} from '@components/StyledElements/Form/Form'
} from '@components/Objects/StyledElements/Form/Form'
import * as Form from '@radix-ui/react-form'
import { BarLoader } from 'react-spinners'
import { useOrg } from '@components/Contexts/OrgContext'

2
apps/web/components/Objects/Modals/Activities/Create/NewActivityModal/DocumentPdf.tsx
View file

@ -5,7 +5,7 @@ import FormLayout, {
FormLabel,
FormMessage,
Input,
} from '@components/StyledElements/Form/Form'
} from '@components/Objects/StyledElements/Form/Form'
import React, { useState } from 'react'
import * as Form from '@radix-ui/react-form'
import BarLoader from 'react-spinners/BarLoader'

2
apps/web/components/Objects/Modals/Activities/Create/NewActivityModal/DynamicCanva.tsx
View file

@ -6,7 +6,7 @@ import FormLayout, {
FormMessage,
Input,
Textarea,
} from '@components/StyledElements/Form/Form'
} from '@components/Objects/StyledElements/Form/Form'
import React, { useState } from 'react'
import * as Form from '@radix-ui/react-form'
import BarLoader from 'react-spinners/BarLoader'

2
apps/web/components/Objects/Modals/Activities/Create/NewActivityModal/Video.tsx
View file

@ -5,7 +5,7 @@ import FormLayout, {
FormLabel,
FormMessage,
Input,
} from '@components/StyledElements/Form/Form'
} from '@components/Objects/StyledElements/Form/Form'
import React, { useState } from 'react'
import * as Form from '@radix-ui/react-form'
import BarLoader from 'react-spinners/BarLoader'

2
apps/web/components/Objects/Modals/Chapters/NewChapter.tsx
View file

@ -5,7 +5,7 @@ import FormLayout, {
Textarea,
FormLabel,
ButtonBlack,
} from '@components/StyledElements/Form/Form'
} from '@components/Objects/StyledElements/Form/Form'
import { FormMessage } from '@radix-ui/react-form'
import * as Form from '@radix-ui/react-form'
import React, { useState } from 'react'

377
apps/web/components/Objects/Modals/Course/Create/CreateCourse.tsx
View file

@ -1,189 +1,262 @@
'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 FormLayout, {
ButtonBlack,
Flex,
FormField,
FormLabel,
Input,
Textarea,
} from '@components/StyledElements/Form/Form'
FormLabelAndMessage,
} from '@components/Objects/StyledElements/Form/Form'
import * as Form from '@radix-ui/react-form'
import { FormMessage } from '@radix-ui/react-form'
import { createNewCourse } from '@services/courses/courses'
import { getOrganizationContextInfoWithoutCredentials } from '@services/organizations/orgs'
import React, { useState } from 'react'
import React, { useEffect } from 'react'
import { BarLoader } from 'react-spinners'
import { revalidateTags } from '@services/utils/ts/requests'
import { useRouter } from 'next/navigation'
import { useLHSession } from '@components/Contexts/LHSessionContext'
import toast from 'react-hot-toast'
import { useFormik } from 'formik'
import * as Yup from 'yup'
import { UploadCloud, Image as ImageIcon } from 'lucide-react'
import UnsplashImagePicker from "@components/Dashboard/Pages/Course/EditCourseGeneral/UnsplashImagePicker"
const validationSchema = Yup.object().shape({
name: Yup.string()
.required('Course name is required')
.max(100, 'Must be 100 characters or less'),
description: Yup.string()
.max(1000, 'Must be 1000 characters or less'),
learnings: Yup.string(),
tags: Yup.string(),
visibility: Yup.boolean(),
thumbnail: Yup.mixed().nullable()
})
function CreateCourseModal({ closeModal, orgslug }: any) {
const [isSubmitting, setIsSubmitting] = useState(false)
const session = useLHSession() as any;
const [name, setName] = React.useState('')
const [description, setDescription] = React.useState('')
const [learnings, setLearnings] = React.useState('')
const [visibility, setVisibility] = React.useState(true)
const [tags, setTags] = React.useState('')
const [isLoading, setIsLoading] = React.useState(false)
const [thumbnail, setThumbnail] = React.useState(null) as any
const router = useRouter()
const session = useLHSession() as any
const [orgId, setOrgId] = React.useState(null) as any
const [org, setOrg] = React.useState(null) as any
const [showUnsplashPicker, setShowUnsplashPicker] = React.useState(false)
const [isUploading, setIsUploading] = React.useState(false)
const formik = useFormik({
initialValues: {
name: '',
description: '',
learnings: '',
visibility: true,
tags: '',
thumbnail: null
},
validationSchema,
onSubmit: async (values, { setSubmitting }) => {
const toast_loading = toast.loading('Creating course...')
try {
const res = await createNewCourse(
orgId,
{
name: values.name,
description: values.description,
tags: values.tags,
visibility: values.visibility
},
values.thumbnail,
session.data?.tokens?.access_token
)
if (res.success) {
await revalidateTags(['courses'], orgslug)
toast.dismiss(toast_loading)
toast.success('Course created successfully')
if (res.data.org_id === orgId) {
closeModal()
router.refresh()
await revalidateTags(['courses'], orgslug)
}
} else {
toast.error(res.data.detail)
}
} catch (error) {
toast.error('Failed to create course')
} finally {
setSubmitting(false)
}
}
})
const getOrgMetadata = async () => {
const org = await getOrganizationContextInfoWithoutCredentials(orgslug, {
revalidate: 360,
tags: ['organizations'],
})
setOrgId(org.id)
}
const handleNameChange = (event: React.ChangeEvent<HTMLInputElement>) => {
setName(event.target.value)
}
const handleDescriptionChange = (event: React.ChangeEvent<any>) => {
setDescription(event.target.value)
}
const handleLearningsChange = (event: React.ChangeEvent<any>) => {
setLearnings(event.target.value)
}
const handleVisibilityChange = (event: React.ChangeEvent<any>) => {
setVisibility(event.target.value)
}
const handleTagsChange = (event: React.ChangeEvent<any>) => {
setTags(event.target.value)
}
const handleThumbnailChange = (event: React.ChangeEvent<any>) => {
setThumbnail(event.target.files[0])
}
const handleSubmit = async (e: any) => {
e.preventDefault()
setIsSubmitting(true)
let res = await createNewCourse(
orgId,
{ name, description, tags, visibility },
thumbnail,
session.data?.tokens?.access_token
)
const toast_loading = toast.loading('Creating course...')
if (res.success) {
await revalidateTags(['courses'], orgslug)
setIsSubmitting(false)
toast.dismiss(toast_loading)
toast.success('Course created successfully')
if (res.data.org_id == orgId) {
closeModal()
router.refresh()
await revalidateTags(['courses'], orgslug)
}
}
else {
setIsSubmitting(false)
toast.error(res.data.detail)
}
}
React.useEffect(() => {
useEffect(() => {
if (orgslug) {
getOrgMetadata()
}
}, [isLoading, orgslug])
}, [orgslug])
const handleFileChange = async (event: React.ChangeEvent<HTMLInputElement>) => {
const file = event.target.files?.[0]
if (file) {
formik.setFieldValue('thumbnail', file)
}
}
const handleUnsplashSelect = async (imageUrl: string) => {
setIsUploading(true)
try {
const response = await fetch(imageUrl)
const blob = await response.blob()
const file = new File([blob], 'unsplash_image.jpg', { type: 'image/jpeg' })
formik.setFieldValue('thumbnail', file)
} catch (error) {
toast.error('Failed to load image from Unsplash')
}
setIsUploading(false)
}
return (
<FormLayout onSubmit={handleSubmit}>
<FormField name="course-name">
<Flex css={{ alignItems: 'baseline', justifyContent: 'space-between' }}>
<FormLabel>Course name</FormLabel>
<FormMessage match="valueMissing">
Please provide a course name
</FormMessage>
</Flex>
<FormLayout onSubmit={formik.handleSubmit} >
<FormField name="name">
<FormLabelAndMessage
label="Course Name"
message={formik.errors.name}
/>
<Form.Control asChild>
<Input onChange={handleNameChange} type="text" required />
</Form.Control>
</FormField>
<FormField name="course-desc">
<Flex css={{ alignItems: 'baseline', justifyContent: 'space-between' }}>
<FormLabel>Course description</FormLabel>
<FormMessage match="valueMissing">
Please provide a course description
</FormMessage>
</Flex>
<Form.Control asChild>
<Textarea onChange={handleDescriptionChange} required />
</Form.Control>
</FormField>
<FormField name="course-thumbnail">
<Flex css={{ alignItems: 'baseline', justifyContent: 'space-between' }}>
<FormLabel>Course thumbnail</FormLabel>
<FormMessage match="valueMissing">
Please provide a thumbnail for your course
</FormMessage>
</Flex>
<Form.Control asChild>
<Input onChange={handleThumbnailChange} type="file" />
</Form.Control>
</FormField>
<FormField name="course-tags">
<Flex css={{ alignItems: 'baseline', justifyContent: 'space-between' }}>
<FormLabel>Course Learnings (separated by comma)</FormLabel>
<FormMessage match="valueMissing">
Please provide learning elements, separated by comma (,)
</FormMessage>
</Flex>
<Form.Control asChild>
<Textarea onChange={handleTagsChange} />
</Form.Control>
</FormField>
<FormField name="course-visibility">
<Flex css={{ alignItems: 'baseline', justifyContent: 'space-between' }}>
<FormLabel>Course Visibility</FormLabel>
<FormMessage match="valueMissing">
Please choose course visibility
</FormMessage>
</Flex>
<Form.Control asChild>
<select
onChange={handleVisibilityChange}
className="border border-gray-300 rounded-md p-2"
<Input
onChange={formik.handleChange}
value={formik.values.name}
type="text"
required
>
<option value="true">
Public (Available to see on the internet){' '}
</option>
<option value="false">Private (Private to users) </option>
</select>
/>
</Form.Control>
</FormField>
<Flex css={{ marginTop: 25, justifyContent: 'flex-end' }}>
<Form.Submit asChild>
<ButtonBlack type="submit" css={{ marginTop: 10 }}>
{isSubmitting ? (
<BarLoader
cssOverride={{ borderRadius: 60 }}
width={60}
color="#ffffff"
/>
) : (
'Create Course'
)}
</ButtonBlack>
</Form.Submit>
</Flex>
<FormField name="description">
<FormLabelAndMessage
label="Description"
message={formik.errors.description}
/>
<Form.Control asChild>
<Textarea
onChange={formik.handleChange}
value={formik.values.description}
/>
</Form.Control>
</FormField>
<FormField name="thumbnail">
<FormLabelAndMessage
label="Course Thumbnail"
message={formik.errors.thumbnail}
/>
<div className="w-auto bg-gray-50 rounded-xl outline outline-1 outline-gray-200 h-[200px] shadow">
<div className="flex flex-col justify-center items-center h-full">
<div className="flex flex-col justify-center items-center">
{formik.values.thumbnail ? (
<img
src={URL.createObjectURL(formik.values.thumbnail)}
className={`${isUploading ? 'animate-pulse' : ''} shadow w-[200px] h-[100px] rounded-md`}
/>
) : (
<img
src="/empty_thumbnail.png"
className="shadow w-[200px] h-[100px] rounded-md bg-gray-200"
/>
)}
<div className="flex justify-center items-center space-x-2">
<input
type="file"
id="fileInput"
style={{ display: 'none' }}
onChange={handleFileChange}
accept="image/*"
/>
<button
type="button"
className="font-bold antialiased items-center text-gray text-sm rounded-md px-4 mt-6 flex"
onClick={() => document.getElementById('fileInput')?.click()}
>
<UploadCloud size={16} className="mr-2" />
<span>Upload Image</span>
</button>
<button
type="button"
className="font-bold antialiased items-center text-gray text-sm rounded-md px-4 mt-6 flex"
onClick={() => setShowUnsplashPicker(true)}
>
<ImageIcon size={16} className="mr-2" />
<span>Choose from Gallery</span>
</button>
</div>
</div>
</div>
</div>
</FormField>
<FormField name="tags">
<FormLabelAndMessage
label="Course Tags"
message={formik.errors.tags}
/>
<Form.Control asChild>
<Textarea
onChange={formik.handleChange}
value={formik.values.tags}
placeholder="Enter tags separated by commas"
/>
</Form.Control>
</FormField>
<FormField name="visibility">
<FormLabelAndMessage
label="Course Visibility"
message={formik.errors.visibility}
/>
<Select
value={formik.values.visibility.toString()}
onValueChange={(value) => formik.setFieldValue('visibility', value === 'true')}
>
<SelectTrigger>
<SelectValue placeholder="Select visibility" />
</SelectTrigger>
<SelectContent>
<SelectItem value="true">Public (Available to see on the internet)</SelectItem>
<SelectItem value="false">Private (Private to users)</SelectItem>
</SelectContent>
</Select>
</FormField>
<div className="flex justify-end mt-6">
<button
type="submit"
disabled={formik.isSubmitting}
className="px-4 py-2 bg-black text-white text-sm font-bold rounded-md"
>
{formik.isSubmitting ? (
<BarLoader
cssOverride={{ borderRadius: 60 }}
width={60}
color="#ffffff"
/>
) : (
'Create Course'
)}
</button>
</div>
{showUnsplashPicker && (
<UnsplashImagePicker
onSelect={handleUnsplashSelect}
onClose={() => setShowUnsplashPicker(false)}
/>
)}
</FormLayout>
)
}

2
apps/web/components/Objects/Modals/Dash/OrgUserGroups/AddUserGroup.tsx
View file

@ -3,7 +3,7 @@ import FormLayout, {
FormField,
FormLabelAndMessage,
Input,
} from '@components/StyledElements/Form/Form'
} from '@components/Objects/StyledElements/Form/Form'
import * as Form from '@radix-ui/react-form'
import { useOrg } from '@components/Contexts/OrgContext'
import React from 'react'

2
apps/web/components/Objects/Modals/Dash/OrgUserGroups/EditUserGroup.tsx
View file

@ -3,7 +3,7 @@ import FormLayout, {
FormField,
FormLabelAndMessage,
Input,
} from '@components/StyledElements/Form/Form'
} from '@components/Objects/StyledElements/Form/Form'
import * as Form from '@radix-ui/react-form'
import { useOrg } from '@components/Contexts/OrgContext'
import React from 'react'

2
apps/web/components/Objects/Modals/Dash/OrgUsers/RolesUpdate.tsx
View file

@ -6,7 +6,7 @@ import FormLayout, {
Flex,
FormField,
FormLabel,
} from '@components/StyledElements/Form/Form'
} from '@components/Objects/StyledElements/Form/Form'
import * as Form from '@radix-ui/react-form'
import { FormMessage } from '@radix-ui/react-form'
import { getAPIUrl } from '@services/config/config'

2
apps/web/components/Onboarding/Onboarding.tsx → apps/web/components/Objects/Onboarding/Onboarding.tsx
View file

@ -1,4 +1,4 @@
import Modal from '@components/StyledElements/Modal/Modal';
import Modal from '@components/Objects/StyledElements/Modal/Modal';
import Image, { StaticImageData } from 'next/image';
import React, { useEffect, useState } from 'react';
import OnBoardWelcome from '@public/onboarding/OnBoardWelcome.png';

0
apps/web/components/StyledElements/Buttons/NewCollectionButton.tsx → apps/web/components/Objects/StyledElements/Buttons/NewCollectionButton.tsx
View file

0
apps/web/components/StyledElements/Buttons/NewCourseButton.tsx → apps/web/components/Objects/StyledElements/Buttons/NewCourseButton.tsx
View file

0
apps/web/components/StyledElements/ConfirmationModal/ConfirmationModal.tsx → apps/web/components/Objects/StyledElements/ConfirmationModal/ConfirmationModal.tsx
View file

0
apps/web/components/StyledElements/Error/Error.tsx → apps/web/components/Objects/StyledElements/Error/Error.tsx
View file

0
apps/web/components/StyledElements/Form/Form.tsx → apps/web/components/Objects/StyledElements/Form/Form.tsx
View file

0
apps/web/components/StyledElements/Info/Info.tsx → apps/web/components/Objects/StyledElements/Info/Info.tsx
View file

80
apps/web/components/Objects/StyledElements/Modal/Modal.tsx Normal file
View file

@ -0,0 +1,80 @@
'use client'
import React from 'react'
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger, DialogFooter } from "@components/ui/dialog"
import { ButtonBlack } from '../Form/Form'
import { cn } from "@/lib/utils"
type ModalParams = {
dialogTitle?: string
dialogDescription?: string
dialogContent: React.ReactNode
dialogClose?: React.ReactNode | null
dialogTrigger?: React.ReactNode
addDefCloseButton?: boolean
onOpenChange: (open: boolean) => void
isDialogOpen?: boolean
minHeight?: 'sm' | 'md' | 'lg' | 'xl' | 'no-min'
minWidth?: 'sm' | 'md' | 'lg' | 'xl' | 'no-min'
customHeight?: string
customWidth?: string
}
const Modal = (params: ModalParams) => {
const getMinHeight = () => {
switch (params.minHeight) {
case 'sm': return 'min-h-[300px]'
case 'md': return 'min-h-[500px]'
case 'lg': return 'min-h-[700px]'
case 'xl': return 'min-h-[900px]'
default: return ''
}
}
const getMinWidth = () => {
switch (params.minWidth) {
case 'sm': return 'min-w-[600px]'
case 'md': return 'min-w-[800px]'
case 'lg': return 'min-w-[1000px]'
case 'xl': return 'min-w-[1200px]'
default: return ''
}
}
return (
<Dialog open={params.isDialogOpen} onOpenChange={params.onOpenChange}>
{params.dialogTrigger && (
<DialogTrigger asChild>{params.dialogTrigger}</DialogTrigger>
)}
<DialogContent className={cn(
"overflow-auto",
getMinHeight(),
getMinWidth(),
params.customHeight,
params.customWidth
)}>
{params.dialogTitle && params.dialogDescription && (
<DialogHeader className="text-center flex flex-col space-y-0.5 w-full">
<DialogTitle>{params.dialogTitle}</DialogTitle>
<DialogDescription>{params.dialogDescription}</DialogDescription>
</DialogHeader>
)}
<div className="overflow-auto">
{params.dialogContent}
</div>
{(params.dialogClose || params.addDefCloseButton) && (
<DialogFooter>
{params.dialogClose}
{params.addDefCloseButton && (
<ButtonBlack type="submit">
Close
</ButtonBlack>
)}
</DialogFooter>
)}
</DialogContent>
</Dialog>
)
}
export default Modal

Some files were not shown because too many files have changed in this diff Show more