{course.name}
- {!isMobile &&
+ {!isMobile &&
}
@@ -113,11 +83,11 @@ const CourseClient = (props: any) => {
course={course}
/>
-
-
-
-
+
diff --git a/apps/web/app/orgs/[orgslug]/(withmenu)/page.tsx b/apps/web/app/orgs/[orgslug]/(withmenu)/page.tsx
index 004ce80b..294614ce 100644
--- a/apps/web/app/orgs/[orgslug]/(withmenu)/page.tsx
+++ b/apps/web/app/orgs/[orgslug]/(withmenu)/page.tsx
@@ -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'
diff --git a/apps/web/app/orgs/[orgslug]/(withmenu)/trail/trail.tsx b/apps/web/app/orgs/[orgslug]/(withmenu)/trail/trail.tsx
index 2d5a44c7..dbf3bb33 100644
--- a/apps/web/app/orgs/[orgslug]/(withmenu)/trail/trail.tsx
+++ b/apps/web/app/orgs/[orgslug]/(withmenu)/trail/trail.tsx
@@ -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'
diff --git a/apps/web/app/orgs/[orgslug]/dash/ClientAdminLayout.tsx b/apps/web/app/orgs/[orgslug]/dash/ClientAdminLayout.tsx
index 48370ca3..a65f6c02 100644
--- a/apps/web/app/orgs/[orgslug]/dash/ClientAdminLayout.tsx
+++ b/apps/web/app/orgs/[orgslug]/dash/ClientAdminLayout.tsx
@@ -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({
diff --git a/apps/web/app/orgs/[orgslug]/dash/assignments/[assignmentuuid]/_components/TaskEditor/Subs/AssignmentTaskGeneralEdit.tsx b/apps/web/app/orgs/[orgslug]/dash/assignments/[assignmentuuid]/_components/TaskEditor/Subs/AssignmentTaskGeneralEdit.tsx
index f7bae0ef..f346e469 100644
--- a/apps/web/app/orgs/[orgslug]/dash/assignments/[assignmentuuid]/_components/TaskEditor/Subs/AssignmentTaskGeneralEdit.tsx
+++ b/apps/web/app/orgs/[orgslug]/dash/assignments/[assignmentuuid]/_components/TaskEditor/Subs/AssignmentTaskGeneralEdit.tsx
@@ -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';
diff --git a/apps/web/app/orgs/[orgslug]/dash/assignments/[assignmentuuid]/_components/Tasks.tsx b/apps/web/app/orgs/[orgslug]/dash/assignments/[assignmentuuid]/_components/Tasks.tsx
index 63997abe..5a816ab2 100644
--- a/apps/web/app/orgs/[orgslug]/dash/assignments/[assignmentuuid]/_components/Tasks.tsx
+++ b/apps/web/app/orgs/[orgslug]/dash/assignments/[assignmentuuid]/_components/Tasks.tsx
@@ -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';
diff --git a/apps/web/app/orgs/[orgslug]/dash/assignments/[assignmentuuid]/page.tsx b/apps/web/app/orgs/[orgslug]/dash/assignments/[assignmentuuid]/page.tsx
index 7c3144a5..fe6f4bdf 100644
--- a/apps/web/app/orgs/[orgslug]/dash/assignments/[assignmentuuid]/page.tsx
+++ b/apps/web/app/orgs/[orgslug]/dash/assignments/[assignmentuuid]/page.tsx
@@ -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';
diff --git a/apps/web/app/orgs/[orgslug]/dash/assignments/[assignmentuuid]/subpages/AssignmentSubmissionsSubPage.tsx b/apps/web/app/orgs/[orgslug]/dash/assignments/[assignmentuuid]/subpages/AssignmentSubmissionsSubPage.tsx
index 33a55715..4cc32f02 100644
--- a/apps/web/app/orgs/[orgslug]/dash/assignments/[assignmentuuid]/subpages/AssignmentSubmissionsSubPage.tsx
+++ b/apps/web/app/orgs/[orgslug]/dash/assignments/[assignmentuuid]/subpages/AssignmentSubmissionsSubPage.tsx
@@ -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';
diff --git a/apps/web/app/orgs/[orgslug]/dash/assignments/page.tsx b/apps/web/app/orgs/[orgslug]/dash/assignments/page.tsx
index 8e11e60b..0ee94fd6 100644
--- a/apps/web/app/orgs/[orgslug]/dash/assignments/page.tsx
+++ b/apps/web/app/orgs/[orgslug]/dash/assignments/page.tsx
@@ -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';
diff --git a/apps/web/app/orgs/[orgslug]/dash/courses/client.tsx b/apps/web/app/orgs/[orgslug]/dash/courses/client.tsx
index 57f1ba2a..766c978b 100644
--- a/apps/web/app/orgs/[orgslug]/dash/courses/client.tsx
+++ b/apps/web/app/orgs/[orgslug]/dash/courses/client.tsx
@@ -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'
diff --git a/apps/web/app/orgs/[orgslug]/dash/courses/course/[courseuuid]/[subpage]/page.tsx b/apps/web/app/orgs/[orgslug]/dash/courses/course/[courseuuid]/[subpage]/page.tsx
index 9b44a988..0c37a366 100644
--- a/apps/web/app/orgs/[orgslug]/dash/courses/course/[courseuuid]/[subpage]/page.tsx
+++ b/apps/web/app/orgs/[orgslug]/dash/courses/course/[courseuuid]/[subpage]/page.tsx
@@ -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
diff --git a/apps/web/app/orgs/[orgslug]/dash/org/settings/[subpage]/page.tsx b/apps/web/app/orgs/[orgslug]/dash/org/settings/[subpage]/page.tsx
index d748809b..6054523b 100644
--- a/apps/web/app/orgs/[orgslug]/dash/org/settings/[subpage]/page.tsx
+++ b/apps/web/app/orgs/[orgslug]/dash/org/settings/[subpage]/page.tsx
@@ -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
diff --git a/apps/web/app/orgs/[orgslug]/dash/payments/[subpage]/page.tsx b/apps/web/app/orgs/[orgslug]/dash/payments/[subpage]/page.tsx
new file mode 100644
index 00000000..173ececd
--- /dev/null
+++ b/apps/web/app/orgs/[orgslug]/dash/payments/[subpage]/page.tsx
@@ -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 (
+
+
+
+ )}
- Description
+
+
{
)}
- {activity.activity_type ===
+ {activity.activity_type ===
'TYPE_ASSIGNMENT' && (
<>
{
})}
-
+
)}
- {activity.activity_type ===
+ {activity.activity_type ===
'TYPE_ASSIGNMENT' && (
About
-
{learnings.length > 0 && learnings[0] !== 'null' && (
@@ -187,7 +157,7 @@ const CourseClient = (props: any) => {
/>
{course.description}
+{course.about}
- {user && (
-
diff --git a/apps/web/app/orgs/[orgslug]/(withmenu)/courses/courses.tsx b/apps/web/app/orgs/[orgslug]/(withmenu)/courses/courses.tsx
index a8a28136..bb17ecd6 100644
--- a/apps/web/app/orgs/[orgslug]/(withmenu)/courses/courses.tsx
+++ b/apps/web/app/orgs/[orgslug]/(withmenu)/courses/courses.tsx
@@ -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 {
diff --git a/apps/web/app/orgs/[orgslug]/(withmenu)/courses/error.tsx b/apps/web/app/orgs/[orgslug]/(withmenu)/courses/error.tsx
index d5320406..058142f5 100644
--- a/apps/web/app/orgs/[orgslug]/(withmenu)/courses/error.tsx
+++ b/apps/web/app/orgs/[orgslug]/(withmenu)/courses/error.tsx
@@ -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({
diff --git a/apps/web/app/orgs/[orgslug]/(withmenu)/error.tsx b/apps/web/app/orgs/[orgslug]/(withmenu)/error.tsx
index d5320406..058142f5 100644
--- a/apps/web/app/orgs/[orgslug]/(withmenu)/error.tsx
+++ b/apps/web/app/orgs/[orgslug]/(withmenu)/error.tsx
@@ -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({
diff --git a/apps/web/app/orgs/[orgslug]/(withmenu)/layout.tsx b/apps/web/app/orgs/[orgslug]/(withmenu)/layout.tsx
index 96e5c1aa..a825e3a5 100644
--- a/apps/web/app/orgs/[orgslug]/(withmenu)/layout.tsx
+++ b/apps/web/app/orgs/[orgslug]/(withmenu)/layout.tsx
@@ -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 (
<>
-
- )}
-
- {isCourseStarted() ? (
-
- ) : (
-
- )}
+
-
-
- Author
-
-
- {course.authors[0].first_name &&
- course.authors[0].last_name && (
-
-
-
- )}
- {!course.authors[0].first_name &&
- !course.authors[0].last_name && (
- - {course.authors[0].first_name + - ' ' + - course.authors[0].last_name} -
- - {' '} - @{course.authors[0].username} - -
-
- )}
- @{course.authors[0].username}
-
+
+
+ )
+ }
+
+ 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 (
+
+
+ Payments Not Available
+The payments feature is not enabled for this organization.
+Please contact your administrator to enable payments.
+
+
+ {selectedSubPage === 'general' &&
+
+ )
+}
+
+const TabLink = ({ href, icon, label, isActive, onClick }: { href: string, icon: React.ReactNode, label: string, isActive: boolean, onClick: () => void }) => (
+
+
+
+
+
+
+
+
+
+ {H1Label}
+
+
+ {H2Label}{' '}
+
+
+
+ General
}
+ {selectedSubPage === 'configuration' &&
+
+
+)
+
+export default PaymentsPage
diff --git a/apps/web/app/orgs/[orgslug]/dash/user-account/owned/page.tsx b/apps/web/app/orgs/[orgslug]/dash/user-account/owned/page.tsx
new file mode 100644
index 00000000..767db3cf
--- /dev/null
+++ b/apps/web/app/orgs/[orgslug]/dash/user-account/owned/page.tsx
@@ -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
+ {icon}
+
+ {label}
+ Error loading owned courses
+
+ return (
+
+
+ )
+}
+
+export default OwnedCoursesPage
diff --git a/apps/web/app/orgs/[orgslug]/dash/user-account/settings/[subpage]/page.tsx b/apps/web/app/orgs/[orgslug]/dash/user-account/settings/[subpage]/page.tsx
index 6162f70e..357bbd39 100644
--- a/apps/web/app/orgs/[orgslug]/dash/user-account/settings/[subpage]/page.tsx
+++ b/apps/web/app/orgs/[orgslug]/dash/user-account/settings/[subpage]/page.tsx
@@ -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 = {
diff --git a/apps/web/app/orgs/[orgslug]/dash/users/settings/[subpage]/page.tsx b/apps/web/app/orgs/[orgslug]/dash/users/settings/[subpage]/page.tsx
index d6342e38..30e74c0a 100644
--- a/apps/web/app/orgs/[orgslug]/dash/users/settings/[subpage]/page.tsx
+++ b/apps/web/app/orgs/[orgslug]/dash/users/settings/[subpage]/page.tsx
@@ -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
diff --git a/apps/web/app/orgs/[orgslug]/health/page.tsx b/apps/web/app/orgs/[orgslug]/health/page.tsx
deleted file mode 100644
index e9d89171..00000000
--- a/apps/web/app/orgs/[orgslug]/health/page.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import React from 'react'
-
-function HealthPage() {
- return (
-
+
+
+
+
+
+
+ My Courses
+Courses you have purchased or subscribed to
+
+ {ownedCourses?.map((course: any) => (
+
+
+
+ ))}
+
+ {(!ownedCourses || ownedCourses.length === 0) && (
+
+
+ )}
+
+
+
+
+ + No purchased courses +
++ You haven't purchased any courses yet +
+OK
- )
-}
-
-export default HealthPage
\ No newline at end of file
diff --git a/apps/web/app/orgs/[orgslug]/layout.tsx b/apps/web/app/orgs/[orgslug]/layout.tsx
index 56735360..42912f32 100644
--- a/apps/web/app/orgs/[orgslug]/layout.tsx
+++ b/apps/web/app/orgs/[orgslug]/layout.tsx
@@ -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,
diff --git a/apps/web/app/payments/stripe/connect/oauth/page.tsx b/apps/web/app/payments/stripe/connect/oauth/page.tsx
new file mode 100644
index 00000000..03b068a7
--- /dev/null
+++ b/apps/web/app/payments/stripe/connect/oauth/page.tsx
@@ -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 (
+
+
+ )
+}
+
+export default StripeConnectCallback
\ No newline at end of file
diff --git a/apps/web/components/Contexts/LHSessionContext.tsx b/apps/web/components/Contexts/LHSessionContext.tsx
index 90acb9d8..b7a2965d 100644
--- a/apps/web/components/Contexts/LHSessionContext.tsx
+++ b/apps/web/components/Contexts/LHSessionContext.tsx
@@ -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
+
+
+
+
+
+
+
+ {status === 'processing' && (
+ <>
+
+ + Completing Stripe Connection +
++ Please wait while we finish setting up your Stripe integration... +
+ + )} + + {status === 'success' && ( + <> +
+
+ {message}
++ You can now return to the dashboard to start using payments. +
+ + )} + + {status === 'error' && ( + <> +
+
+ {message}
++ Please try again or contact support if the problem persists. +
+ + )} +
-
+ Assignments
+
+
+
+
+
+
+
+
+
+
+ {' '}
+
+ ) : (
+ ''
+ )}
{props.last_breadcrumb ?
diff --git a/apps/web/components/Dashboard/UI/CourseOverviewTop.tsx b/apps/web/components/Dashboard/Misc/CourseOverviewTop.tsx
similarity index 100%
rename from apps/web/components/Dashboard/UI/CourseOverviewTop.tsx
rename to apps/web/components/Dashboard/Misc/CourseOverviewTop.tsx
diff --git a/apps/web/components/Dashboard/UI/SaveState.tsx b/apps/web/components/Dashboard/Misc/SaveState.tsx
similarity index 100%
rename from apps/web/components/Dashboard/UI/SaveState.tsx
rename to apps/web/components/Dashboard/Misc/SaveState.tsx
diff --git a/apps/web/components/Dashboard/Course/EditCourseAccess/EditCourseAccess.tsx b/apps/web/components/Dashboard/Pages/Course/EditCourseAccess/EditCourseAccess.tsx
similarity index 98%
rename from apps/web/components/Dashboard/Course/EditCourseAccess/EditCourseAccess.tsx
rename to apps/web/components/Dashboard/Pages/Course/EditCourseAccess/EditCourseAccess.tsx
index a682bef5..1770b180 100644
--- a/apps/web/components/Dashboard/Course/EditCourseAccess/EditCourseAccess.tsx
+++ b/apps/web/components/Dashboard/Pages/Course/EditCourseAccess/EditCourseAccess.tsx
@@ -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'
diff --git a/apps/web/components/Dashboard/Course/EditCourseGeneral/EditCourseGeneral.tsx b/apps/web/components/Dashboard/Pages/Course/EditCourseGeneral/EditCourseGeneral.tsx
similarity index 97%
rename from apps/web/components/Dashboard/Course/EditCourseGeneral/EditCourseGeneral.tsx
rename to apps/web/components/Dashboard/Pages/Course/EditCourseGeneral/EditCourseGeneral.tsx
index 8535fd83..e8c8cbf4 100644
--- a/apps/web/components/Dashboard/Course/EditCourseGeneral/EditCourseGeneral.tsx
+++ b/apps/web/components/Dashboard/Pages/Course/EditCourseGeneral/EditCourseGeneral.tsx
@@ -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
diff --git a/apps/web/components/Dashboard/Course/EditCourseGeneral/ThumbnailUpdate.tsx b/apps/web/components/Dashboard/Pages/Course/EditCourseGeneral/ThumbnailUpdate.tsx
similarity index 100%
rename from apps/web/components/Dashboard/Course/EditCourseGeneral/ThumbnailUpdate.tsx
rename to apps/web/components/Dashboard/Pages/Course/EditCourseGeneral/ThumbnailUpdate.tsx
diff --git a/apps/web/components/Dashboard/Course/EditCourseGeneral/UnsplashImagePicker.tsx b/apps/web/components/Dashboard/Pages/Course/EditCourseGeneral/UnsplashImagePicker.tsx
similarity index 84%
rename from apps/web/components/Dashboard/Course/EditCourseGeneral/UnsplashImagePicker.tsx
rename to apps/web/components/Dashboard/Pages/Course/EditCourseGeneral/UnsplashImagePicker.tsx
index 662974af..68abb289 100644
--- a/apps/web/components/Dashboard/Course/EditCourseGeneral/UnsplashImagePicker.tsx
+++ b/apps/web/components/Dashboard/Pages/Course/EditCourseGeneral/UnsplashImagePicker.tsx
@@ -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 = ({ onSelect, onClose }) => {
+const UnsplashImagePicker: React.FC = ({ onSelect, onClose, isOpen = true }) => {
const [query, setQuery] = useState('');
const [images, setImages] = useState([]);
const [page, setPage] = useState(1);
@@ -54,8 +56,6 @@ const UnsplashImagePicker: React.FC = ({ 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 = ({ onSelect, onC
onClose();
};
- return (
-
-
-
-
- Choose an image from Unsplash
- -
+ const modalContent = (
+
- {params.dialogTrigger ? (
- {params.dialogTrigger}
- ) : null}
-
-
-
- {params.dialogTitle && params.dialogDescription &&
-
- {params.dialogTitle}
- {params.dialogDescription}
-
- }
- {params.dialogContent}
- {params.dialogClose ? (
-
- {params.dialogClose}
-
- ) : null}
- {params.addDefCloseButton ? (
-
-
-
- Close
-
-
-
- ) : null}
-
-
-
-)
-
-const overlayShow = keyframes({
- '0%': { opacity: 0 },
- '100%': { opacity: 1 },
-})
-
-const overlayClose = keyframes({
- '0%': { opacity: 1 },
- '100%': { opacity: 0 },
-})
-
-const contentShow = keyframes({
- '0%': { opacity: 0, transform: 'translate(-50%, -50%) scale(.96)' },
- '100%': { opacity: 1, transform: 'translate(-50%, -50%) scale(1)' },
-})
-
-const contentClose = keyframes({
- '0%': { opacity: 1, transform: 'translate(-50%, -50%) scale(1)' },
- '100%': { opacity: 0, transform: 'translate(-50%, -52%) scale(.96)' },
-})
-
-const DialogOverlay = styled(Dialog.Overlay, {
- backgroundColor: blackA.blackA9,
- backdropFilter: 'blur(0.6px)',
- position: 'fixed',
- zIndex: 500,
- inset: 0,
- animation: `${overlayShow} 150ms cubic-bezier(0.16, 1, 0.3, 1)`,
- '&[data-state="closed"]': {
- animation: `${overlayClose} 150ms cubic-bezier(0.16, 1, 0.3, 1)`,
- },
-})
-
-const DialogContent = styled(Dialog.Content, {
- variants: {
- minHeight: {
- 'no-min': {
- minHeight: '0px',
- },
- sm: {
- minHeight: '300px',
- },
- md: {
- minHeight: '500px',
- },
- lg: {
- minHeight: '700px',
- },
- xl: {
- minHeight: '900px',
- },
- },
- minWidth: {
- 'no-min': {
- minWidth: '0px',
- },
- sm: {
- minWidth: '600px',
- },
- md: {
- minWidth: '800px',
- },
- lg: {
- minWidth: '1000px',
- },
- xl: {
- minWidth: '1200px',
- },
- },
- },
-
- backgroundColor: 'white',
- borderRadius: 18,
- zIndex: 501,
- boxShadow:
- 'hsl(206 22% 7% / 35%) 0px 10px 38px -10px, hsl(206 22% 7% / 20%) 0px 10px 20px -15px',
- position: 'fixed',
- top: '50%',
- left: '50%',
- transform: 'translate(-50%, -50%)',
- width: '90vw',
- maxHeight: '85vh',
- minHeight: '300px',
- maxWidth: '600px',
- padding: 11,
- animation: `${contentShow} 150ms cubic-bezier(0.16, 1, 0.3, 1)`,
- '&:focus': { outline: 'none' },
-
- '&[data-state="closed"]': {
- animation: `${contentClose} 150ms cubic-bezier(0.16, 1, 0.3, 1)`,
- },
- transition: 'max-height 0.3s ease-out',
-})
-
-const DialogTopBar = styled('div', {
- background: '#F7F7F7',
- padding: '8px 14px ',
- borderRadius: 14,
-})
-const DialogTitle = styled(Dialog.Title, {
- margin: 0,
- fontWeight: 700,
- letterSpacing: '-0.05em',
- padding: 0,
- color: mauve.mauve12,
- fontSize: 21,
-})
-
-const DialogDescription = styled(Dialog.Description, {
- color: mauve.mauve11,
- letterSpacing: '-0.03em',
- fontSize: 15,
- padding: 0,
- margin: 0,
-})
-
-const Flex = styled('div', { display: 'flex' })
-
-export default Modal
diff --git a/apps/web/components/ui/alert.tsx b/apps/web/components/ui/alert.tsx
new file mode 100644
index 00000000..5afd41d1
--- /dev/null
+++ b/apps/web/components/ui/alert.tsx
@@ -0,0 +1,59 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const alertVariants = cva(
+ "relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7",
+ {
+ variants: {
+ variant: {
+ default: "bg-background text-foreground",
+ destructive:
+ "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
+ },
+ },
+ defaultVariants: {
+ variant: "default",
+ },
+ }
+)
+
+const Alert = React.forwardRef<
+ HTMLDivElement,
+ React.HTMLAttributes & VariantProps
+>(({ className, variant, ...props }, ref) => (
+
+))
+Alert.displayName = "Alert"
+
+const AlertTitle = React.forwardRef<
+ HTMLParagraphElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+))
+AlertTitle.displayName = "AlertTitle"
+
+const AlertDescription = React.forwardRef<
+ HTMLParagraphElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+))
+AlertDescription.displayName = "AlertDescription"
+
+export { Alert, AlertTitle, AlertDescription }
diff --git a/apps/web/components/ui/badge.tsx b/apps/web/components/ui/badge.tsx
new file mode 100644
index 00000000..e87d62bf
--- /dev/null
+++ b/apps/web/components/ui/badge.tsx
@@ -0,0 +1,36 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const badgeVariants = cva(
+ "inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+ {
+ variants: {
+ variant: {
+ default:
+ "border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80",
+ secondary:
+ "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+ destructive:
+ "border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80",
+ outline: "text-foreground",
+ },
+ },
+ defaultVariants: {
+ variant: "default",
+ },
+ }
+)
+
+export interface BadgeProps
+ extends React.HTMLAttributes,
+ VariantProps {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+ return (
+
+ )
+}
+
+export { Badge, badgeVariants }
diff --git a/apps/web/components/ui/button.tsx b/apps/web/components/ui/button.tsx
new file mode 100644
index 00000000..ed0f6279
--- /dev/null
+++ b/apps/web/components/ui/button.tsx
@@ -0,0 +1,57 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+ "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+ {
+ variants: {
+ variant: {
+ default:
+ "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+ destructive:
+ "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+ outline:
+ "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
+ secondary:
+ "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+ ghost: "hover:bg-accent hover:text-accent-foreground",
+ link: "text-primary underline-offset-4 hover:underline",
+ },
+ size: {
+ default: "h-9 px-4 py-2",
+ sm: "h-8 rounded-md px-3 text-xs",
+ lg: "h-10 rounded-md px-8",
+ icon: "h-9 w-9",
+ },
+ },
+ defaultVariants: {
+ variant: "default",
+ size: "default",
+ },
+ }
+)
+
+export interface ButtonProps
+ extends React.ButtonHTMLAttributes,
+ VariantProps {
+ asChild?: boolean
+}
+
+const Button = React.forwardRef(
+ ({ className, variant, size, asChild = false, ...props }, ref) => {
+ const Comp = asChild ? Slot : "button"
+ return (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, children, ...props }, ref) => (
+
+
+ {children}
+
+
+
+
+))
+DialogContent.displayName = DialogPrimitive.Content.displayName
+
+const DialogHeader = ({
+ className,
+ ...props
+}: React.HTMLAttributes) => (
+
+)
+DialogHeader.displayName = "DialogHeader"
+
+const DialogFooter = ({
+ className,
+ ...props
+}: React.HTMLAttributes) => (
+
+)
+DialogFooter.displayName = "DialogFooter"
+
+const DialogTitle = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ {}
+
+const Input = React.forwardRef(
+ ({ className, type, ...props }, ref) => {
+ return (
+
+ )
+ }
+)
+Input.displayName = "Input"
+
+export { Input }
diff --git a/apps/web/components/ui/label.tsx b/apps/web/components/ui/label.tsx
new file mode 100644
index 00000000..53418217
--- /dev/null
+++ b/apps/web/components/ui/label.tsx
@@ -0,0 +1,26 @@
+"use client"
+
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const labelVariants = cva(
+ "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+)
+
+const Label = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef &
+ VariantProps
+>(({ className, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, children, ...props }, ref) => (
+ span]:line-clamp-1",
+ className
+ )}
+ {...props}
+ >
+ {children}
+
+
+
+))
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
+
+const SelectScrollUpButton = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+
+
+))
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
+
+const SelectScrollDownButton = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+
+
+))
+SelectScrollDownButton.displayName =
+ SelectPrimitive.ScrollDownButton.displayName
+
+const SelectContent = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, children, position = "popper", ...props }, ref) => (
+
+
+
+ {children}
+
+
+
+))
+SelectContent.displayName = SelectPrimitive.Content.displayName
+
+const SelectLabel = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, children, ...props }, ref) => (
+
+
+
+
+
+ {children}
+
+))
+SelectItem.displayName = SelectPrimitive.Item.displayName
+
+const SelectSeparator = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+
+>(({ className, ...props }, ref) => (
+
+>(({ className, ...props }, ref) => (
+
+))
+TableHeader.displayName = "TableHeader"
+
+const TableBody = React.forwardRef<
+ HTMLTableSectionElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+))
+TableBody.displayName = "TableBody"
+
+const TableFooter = React.forwardRef<
+ HTMLTableSectionElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+ tr]:last:border-b-0",
+ className
+ )}
+ {...props}
+ />
+))
+TableFooter.displayName = "TableFooter"
+
+const TableRow = React.forwardRef<
+ HTMLTableRowElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+>(({ className, ...props }, ref) => (
+ [role=checkbox]]:translate-y-[2px]",
+ className
+ )}
+ {...props}
+ />
+))
+TableHead.displayName = "TableHead"
+
+const TableCell = React.forwardRef<
+ HTMLTableCellElement,
+ React.TdHTMLAttributes
+>(({ className, ...props }, ref) => (
+ [role=checkbox]]:translate-y-[2px]",
+ className
+ )}
+ {...props}
+ />
+))
+TableCell.displayName = "TableCell"
+
+const TableCaption = React.forwardRef<
+ HTMLTableCaptionElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+ {}
+
+const Textarea = React.forwardRef(
+ ({ className, ...props }, ref) => {
+ return (
+
+ )
+ }
+)
+Textarea.displayName = "Textarea"
+
+export { Textarea }
diff --git a/apps/web/components/ui/toggle-group.tsx b/apps/web/components/ui/toggle-group.tsx
new file mode 100644
index 00000000..4df0e4fe
--- /dev/null
+++ b/apps/web/components/ui/toggle-group.tsx
@@ -0,0 +1,61 @@
+"use client"
+
+import * as React from "react"
+import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group"
+import { type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+import { toggleVariants } from "@components/ui/toggle"
+
+const ToggleGroupContext = React.createContext<
+ VariantProps
+>({
+ size: "default",
+ variant: "default",
+})
+
+const ToggleGroup = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef &
+ VariantProps
+>(({ className, variant, size, children, ...props }, ref) => (
+
+
+ {children}
+
+
+))
+
+ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName
+
+const ToggleGroupItem = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef &
+ VariantProps
+>(({ className, children, variant, size, ...props }, ref) => {
+ const context = React.useContext(ToggleGroupContext)
+
+ return (
+
+ {children}
+
+ )
+})
+
+ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName
+
+export { ToggleGroup, ToggleGroupItem }
diff --git a/apps/web/components/ui/toggle.tsx b/apps/web/components/ui/toggle.tsx
new file mode 100644
index 00000000..c50c2733
--- /dev/null
+++ b/apps/web/components/ui/toggle.tsx
@@ -0,0 +1,45 @@
+"use client"
+
+import * as React from "react"
+import * as TogglePrimitive from "@radix-ui/react-toggle"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const toggleVariants = cva(
+ "inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground",
+ {
+ variants: {
+ variant: {
+ default: "bg-transparent",
+ outline:
+ "border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground",
+ },
+ size: {
+ default: "h-9 px-3",
+ sm: "h-8 px-2",
+ lg: "h-10 px-3",
+ },
+ },
+ defaultVariants: {
+ variant: "default",
+ size: "default",
+ },
+ }
+)
+
+const Toggle = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef &
+ VariantProps
+>(({ className, variant, size, ...props }, ref) => (
+
+
)}
diff --git a/apps/web/components/StyledElements/Modal/Modal.tsx b/apps/web/components/StyledElements/Modal/Modal.tsx
deleted file mode 100644
index b78350ec..00000000
--- a/apps/web/components/StyledElements/Modal/Modal.tsx
+++ /dev/null
@@ -1,180 +0,0 @@
-'use client'
-import React from 'react'
-import * as Dialog from '@radix-ui/react-dialog'
-import { styled, keyframes } from '@stitches/react'
-import { blackA, mauve } from '@radix-ui/colors'
-import { ButtonBlack } from '../Form/Form'
-
-type ModalParams = {
- dialogTitle?: string
- dialogDescription?: string
- dialogContent: React.ReactNode
- dialogClose?: React.ReactNode | null
- dialogTrigger?: React.ReactNode
- addDefCloseButton?: boolean
- onOpenChange: any
- isDialogOpen?: boolean
- minHeight?: 'sm' | 'md' | 'lg' | 'xl' | 'no-min'
- minWidth?: 'sm' | 'md' | 'lg' | 'xl' | 'no-min'
- customHeight?: string
- customWidth?: string
-}
-
-const Modal = (params: ModalParams) => (
-
+
);
+
+ return (
+
+
+
{/* Delete Button */}
= ({ 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 (
+
+
+
+
+
+ Save
+
+
+
+ }
+ />
+ );
+};
+
+export default PaymentsConfigurationPage;
diff --git a/apps/web/components/Dashboard/Pages/Payments/PaymentsCustomersPage.tsx b/apps/web/components/Dashboard/Pages/Payments/PaymentsCustomersPage.tsx
new file mode 100644
index 00000000..e62d7e39
--- /dev/null
+++ b/apps/web/components/Dashboard/Pages/Payments/PaymentsCustomersPage.tsx
@@ -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 (
+
+
+ );
+}
+
+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 (
+ (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 (
+
+ {({ isSubmitting, values, setFieldValue }) => (
+
+ )}
+
+ );
+};
+
+export default PaymentsProductPage
diff --git a/apps/web/components/Dashboard/Pages/Payments/SubComponents/CreateProductForm.tsx b/apps/web/components/Dashboard/Pages/Payments/SubComponents/CreateProductForm.tsx
new file mode 100644
index 00000000..25efeb62
--- /dev/null
+++ b/apps/web/components/Dashboard/Pages/Payments/SubComponents/CreateProductForm.tsx
@@ -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 (
+
+ {({ isSubmitting, values, setFieldValue }) => (
+
+ )}
+
+ );
+};
+
+export default CreateProductForm;
diff --git a/apps/web/components/Dashboard/Pages/Payments/SubComponents/LinkCourseModal.tsx b/apps/web/components/Dashboard/Pages/Payments/SubComponents/LinkCourseModal.tsx
new file mode 100644
index 00000000..9052f239
--- /dev/null
+++ b/apps/web/components/Dashboard/Pages/Payments/SubComponents/LinkCourseModal.tsx
@@ -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 (
+ ([]);
+ 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 (
+ (!!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
\ No newline at end of file
diff --git a/apps/web/components/AI/Hooks/useGetAIFeatures.tsx b/apps/web/components/Hooks/useGetAIFeatures.tsx
similarity index 100%
rename from apps/web/components/AI/Hooks/useGetAIFeatures.tsx
rename to apps/web/components/Hooks/useGetAIFeatures.tsx
diff --git a/apps/web/components/Hooks/usePaymentsEnabled.tsx b/apps/web/components/Hooks/usePaymentsEnabled.tsx
new file mode 100644
index 00000000..bc397928
--- /dev/null
+++ b/apps/web/components/Hooks/usePaymentsEnabled.tsx
@@ -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
+ };
+}
\ No newline at end of file
diff --git a/apps/web/components/Objects/Activities/AI/AIActivityAsk.tsx b/apps/web/components/Objects/Activities/AI/AIActivityAsk.tsx
index e0b3c454..69a344b8 100644
--- a/apps/web/components/Objects/Activities/AI/AIActivityAsk.tsx
+++ b/apps/web/components/Objects/Activities/AI/AIActivityAsk.tsx
@@ -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 = {
diff --git a/apps/web/components/Objects/Activities/DynamicCanva/AI/AICanvaToolkit.tsx b/apps/web/components/Objects/Activities/DynamicCanva/AI/AICanvaToolkit.tsx
index 67692c0c..8a9bb0c9 100644
--- a/apps/web/components/Objects/Activities/DynamicCanva/AI/AICanvaToolkit.tsx
+++ b/apps/web/components/Objects/Activities/DynamicCanva/AI/AICanvaToolkit.tsx
@@ -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 = {
diff --git a/apps/web/components/ContentPlaceHolder.tsx b/apps/web/components/Objects/ContentPlaceHolder.tsx
similarity index 87%
rename from apps/web/components/ContentPlaceHolder.tsx
rename to apps/web/components/Objects/ContentPlaceHolder.tsx
index 68c5aa18..b9cb6547 100644
--- a/apps/web/components/ContentPlaceHolder.tsx
+++ b/apps/web/components/Objects/ContentPlaceHolder.tsx
@@ -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
diff --git a/apps/web/components/Objects/Courses/CourseActions/CoursePaidOptions.tsx b/apps/web/components/Objects/Courses/CourseActions/CoursePaidOptions.tsx
new file mode 100644
index 00000000..c2537497
--- /dev/null
+++ b/apps/web/components/Objects/Courses/CourseActions/CoursePaidOptions.tsx
@@ -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 ([])
+ const [isLoading, setIsLoading] = useState(true)
+ const [isModalOpen, setIsModalOpen] = useState(false)
+ const [hasAccess, setHasAccess] = useState(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
+ }
+
+ if (linkedProducts.length > 0) {
+ return (
+ ) => {
- setName(event.target.value)
- }
-
- const handleDescriptionChange = (event: React.ChangeEvent) => {
- setDescription(event.target.value)
- }
-
- const handleLearningsChange = (event: React.ChangeEvent) => {
- setLearnings(event.target.value)
- }
-
- const handleVisibilityChange = (event: React.ChangeEvent) => {
- setVisibility(event.target.value)
- }
-
- const handleTagsChange = (event: React.ChangeEvent) => {
- setTags(event.target.value)
- }
-
- const handleThumbnailChange = (event: React.ChangeEvent) => {
- 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) => {
+ 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 (
-
-
-
- Course name
-
- Please provide a course name
-
-
+
+
+
-
-
-
-
-
- Course description
-
- Please provide a course description
-
-
-
-
-
-
-
-
- Course thumbnail
-
- Please provide a thumbnail for your course
-
-
-
-
-
-
-
-
- Course Learnings (separated by comma)
-
- Please provide learning elements, separated by comma (,)
-
-
-
-
-
-
-
-
- Course Visibility
-
- Please choose course visibility
-
-
-
-
+ />
-
-
-
- {isSubmitting ? (
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ setShowUnsplashPicker(false)}
+ />
+ )}
)
}
diff --git a/apps/web/components/Objects/Modals/Dash/OrgUserGroups/AddUserGroup.tsx b/apps/web/components/Objects/Modals/Dash/OrgUserGroups/AddUserGroup.tsx
index 705a82bb..7389f50d 100644
--- a/apps/web/components/Objects/Modals/Dash/OrgUserGroups/AddUserGroup.tsx
+++ b/apps/web/components/Objects/Modals/Dash/OrgUserGroups/AddUserGroup.tsx
@@ -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'
diff --git a/apps/web/components/Objects/Modals/Dash/OrgUserGroups/EditUserGroup.tsx b/apps/web/components/Objects/Modals/Dash/OrgUserGroups/EditUserGroup.tsx
index b0d20fe0..c950415b 100644
--- a/apps/web/components/Objects/Modals/Dash/OrgUserGroups/EditUserGroup.tsx
+++ b/apps/web/components/Objects/Modals/Dash/OrgUserGroups/EditUserGroup.tsx
@@ -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'
diff --git a/apps/web/components/Objects/Modals/Dash/OrgUsers/RolesUpdate.tsx b/apps/web/components/Objects/Modals/Dash/OrgUsers/RolesUpdate.tsx
index 681f1d85..9168a7a2 100644
--- a/apps/web/components/Objects/Modals/Dash/OrgUsers/RolesUpdate.tsx
+++ b/apps/web/components/Objects/Modals/Dash/OrgUsers/RolesUpdate.tsx
@@ -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'
diff --git a/apps/web/components/Onboarding/Onboarding.tsx b/apps/web/components/Objects/Onboarding/Onboarding.tsx
similarity index 99%
rename from apps/web/components/Onboarding/Onboarding.tsx
rename to apps/web/components/Objects/Onboarding/Onboarding.tsx
index 9fd26726..43b1fd2e 100644
--- a/apps/web/components/Onboarding/Onboarding.tsx
+++ b/apps/web/components/Objects/Onboarding/Onboarding.tsx
@@ -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';
diff --git a/apps/web/components/StyledElements/Buttons/NewCollectionButton.tsx b/apps/web/components/Objects/StyledElements/Buttons/NewCollectionButton.tsx
similarity index 100%
rename from apps/web/components/StyledElements/Buttons/NewCollectionButton.tsx
rename to apps/web/components/Objects/StyledElements/Buttons/NewCollectionButton.tsx
diff --git a/apps/web/components/StyledElements/Buttons/NewCourseButton.tsx b/apps/web/components/Objects/StyledElements/Buttons/NewCourseButton.tsx
similarity index 100%
rename from apps/web/components/StyledElements/Buttons/NewCourseButton.tsx
rename to apps/web/components/Objects/StyledElements/Buttons/NewCourseButton.tsx
diff --git a/apps/web/components/StyledElements/ConfirmationModal/ConfirmationModal.tsx b/apps/web/components/Objects/StyledElements/ConfirmationModal/ConfirmationModal.tsx
similarity index 100%
rename from apps/web/components/StyledElements/ConfirmationModal/ConfirmationModal.tsx
rename to apps/web/components/Objects/StyledElements/ConfirmationModal/ConfirmationModal.tsx
diff --git a/apps/web/components/StyledElements/Error/Error.tsx b/apps/web/components/Objects/StyledElements/Error/Error.tsx
similarity index 100%
rename from apps/web/components/StyledElements/Error/Error.tsx
rename to apps/web/components/Objects/StyledElements/Error/Error.tsx
diff --git a/apps/web/components/StyledElements/Form/Form.tsx b/apps/web/components/Objects/StyledElements/Form/Form.tsx
similarity index 100%
rename from apps/web/components/StyledElements/Form/Form.tsx
rename to apps/web/components/Objects/StyledElements/Form/Form.tsx
diff --git a/apps/web/components/StyledElements/Info/Info.tsx b/apps/web/components/Objects/StyledElements/Info/Info.tsx
similarity index 100%
rename from apps/web/components/StyledElements/Info/Info.tsx
rename to apps/web/components/Objects/StyledElements/Info/Info.tsx
diff --git a/apps/web/components/Objects/StyledElements/Modal/Modal.tsx b/apps/web/components/Objects/StyledElements/Modal/Modal.tsx
new file mode 100644
index 00000000..dc0f859a
--- /dev/null
+++ b/apps/web/components/Objects/StyledElements/Modal/Modal.tsx
@@ -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 (
+
+ )
+}
+
+export default Modal
diff --git a/apps/web/components/StyledElements/Titles/TypeOfContentTitle.tsx b/apps/web/components/Objects/StyledElements/Titles/TypeOfContentTitle.tsx
similarity index 100%
rename from apps/web/components/StyledElements/Titles/TypeOfContentTitle.tsx
rename to apps/web/components/Objects/StyledElements/Titles/TypeOfContentTitle.tsx
diff --git a/apps/web/components/StyledElements/Toast/Toast.tsx b/apps/web/components/Objects/StyledElements/Toast/Toast.tsx
similarity index 100%
rename from apps/web/components/StyledElements/Toast/Toast.tsx
rename to apps/web/components/Objects/StyledElements/Toast/Toast.tsx
diff --git a/apps/web/components/StyledElements/Tooltip/Tooltip.tsx b/apps/web/components/Objects/StyledElements/Tooltip/Tooltip.tsx
similarity index 100%
rename from apps/web/components/StyledElements/Tooltip/Tooltip.tsx
rename to apps/web/components/Objects/StyledElements/Tooltip/Tooltip.tsx
diff --git a/apps/web/components/StyledElements/Wrappers/GeneralWrapper.tsx b/apps/web/components/Objects/StyledElements/Wrappers/GeneralWrapper.tsx
similarity index 100%
rename from apps/web/components/StyledElements/Wrappers/GeneralWrapper.tsx
rename to apps/web/components/Objects/StyledElements/Wrappers/GeneralWrapper.tsx
diff --git a/apps/web/components/Objects/Thumbnails/CollectionThumbnail.tsx b/apps/web/components/Objects/Thumbnails/CollectionThumbnail.tsx
index d1f92fe4..66847776 100644
--- a/apps/web/components/Objects/Thumbnails/CollectionThumbnail.tsx
+++ b/apps/web/components/Objects/Thumbnails/CollectionThumbnail.tsx
@@ -1,7 +1,7 @@
'use client'
import { useOrg } from '@components/Contexts/OrgContext'
import AuthenticatedClientElement from '@components/Security/AuthenticatedClientElement'
-import ConfirmationModal from '@components/StyledElements/ConfirmationModal/ConfirmationModal'
+import ConfirmationModal from '@components/Objects/StyledElements/ConfirmationModal/ConfirmationModal'
import { getUriWithOrg } from '@services/config/config'
import { deleteCollection } from '@services/courses/collections'
import { getCourseThumbnailMediaDirectory } from '@services/media/media'
diff --git a/apps/web/components/Objects/Thumbnails/CourseThumbnail.tsx b/apps/web/components/Objects/Thumbnails/CourseThumbnail.tsx
index dbb2a85d..42ebb5f0 100644
--- a/apps/web/components/Objects/Thumbnails/CourseThumbnail.tsx
+++ b/apps/web/components/Objects/Thumbnails/CourseThumbnail.tsx
@@ -1,7 +1,7 @@
'use client'
import { useOrg } from '@components/Contexts/OrgContext'
import AuthenticatedClientElement from '@components/Security/AuthenticatedClientElement'
-import ConfirmationModal from '@components/StyledElements/ConfirmationModal/ConfirmationModal'
+import ConfirmationModal from '@components/Objects/StyledElements/ConfirmationModal/ConfirmationModal'
import { getUriWithOrg } from '@services/config/config'
import { deleteCourseFromBackend } from '@services/courses/courses'
import { getCourseThumbnailMediaDirectory } from '@services/media/media'
@@ -17,7 +17,7 @@ import {
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu"
+} from "@components/ui/dropdown-menu"
type Course = {
course_uuid: string
diff --git a/apps/web/components/Watermark.tsx b/apps/web/components/Objects/Watermark.tsx
similarity index 94%
rename from apps/web/components/Watermark.tsx
rename to apps/web/components/Objects/Watermark.tsx
index ff06fb4c..9d4998b0 100644
--- a/apps/web/components/Watermark.tsx
+++ b/apps/web/components/Objects/Watermark.tsx
@@ -2,7 +2,7 @@ import Image from 'next/image'
import Link from 'next/link'
import blacklogo from '@public/black_logo.png'
import React, { useEffect } from 'react'
-import { useOrg } from './Contexts/OrgContext'
+import { useOrg } from '../Contexts/OrgContext'
function Watermark() {
const org = useOrg() as any
diff --git a/apps/web/components/Pages/CourseEdit/Draggables/Activity.tsx b/apps/web/components/Pages/CourseEdit/Draggables/Activity.tsx
index e45c75e5..95eef6ad 100644
--- a/apps/web/components/Pages/CourseEdit/Draggables/Activity.tsx
+++ b/apps/web/components/Pages/CourseEdit/Draggables/Activity.tsx
@@ -15,7 +15,7 @@ import {
import { mutate } from 'swr'
import { revalidateTags } from '@services/utils/ts/requests'
import { useRouter } from 'next/navigation'
-import ConfirmationModal from '@components/StyledElements/ConfirmationModal/ConfirmationModal'
+import ConfirmationModal from '@components/Objects/StyledElements/ConfirmationModal/ConfirmationModal'
import { deleteActivity, updateActivity } from '@services/courses/activities'
import { useLHSession } from '@components/Contexts/LHSessionContext'
diff --git a/apps/web/components/Pages/CourseEdit/Draggables/Chapter.tsx b/apps/web/components/Pages/CourseEdit/Draggables/Chapter.tsx
index 2e449210..fa8b6cea 100644
--- a/apps/web/components/Pages/CourseEdit/Draggables/Chapter.tsx
+++ b/apps/web/components/Pages/CourseEdit/Draggables/Chapter.tsx
@@ -3,7 +3,7 @@ import styled from 'styled-components'
import { Droppable, Draggable } from 'react-beautiful-dnd'
import Activity from './Activity'
import { Hexagon, MoreVertical, Pencil, Save, Sparkles, X } from 'lucide-react'
-import ConfirmationModal from '@components/StyledElements/ConfirmationModal/ConfirmationModal'
+import ConfirmationModal from '@components/Objects/StyledElements/ConfirmationModal/ConfirmationModal'
import { useRouter } from 'next/navigation'
import { updateChapter } from '@services/courses/chapters'
import { mutate } from 'swr'
diff --git a/apps/web/components/Pages/Courses/ActivityIndicators.tsx b/apps/web/components/Pages/Courses/ActivityIndicators.tsx
index 43362651..a979c612 100644
--- a/apps/web/components/Pages/Courses/ActivityIndicators.tsx
+++ b/apps/web/components/Pages/Courses/ActivityIndicators.tsx
@@ -1,4 +1,4 @@
-import ToolTip from '@components/StyledElements/Tooltip/Tooltip'
+import ToolTip from '@components/Objects/StyledElements/Tooltip/Tooltip'
import { getUriWithOrg } from '@services/config/config'
import Link from 'next/link'
import React from 'react'
diff --git a/apps/web/components/Pages/Payments/UnconfiguredPaymentsDisclaimer.tsx b/apps/web/components/Pages/Payments/UnconfiguredPaymentsDisclaimer.tsx
new file mode 100644
index 00000000..1ed9bc08
--- /dev/null
+++ b/apps/web/components/Pages/Payments/UnconfiguredPaymentsDisclaimer.tsx
@@ -0,0 +1,48 @@
+import { Settings, ChevronRight, CreditCard } from 'lucide-react'
+import { Alert, AlertTitle, AlertDescription } from '@components/ui/alert'
+import { AlertTriangle, ShoppingCart, Users } from 'lucide-react'
+import React from 'react'
+import Link from 'next/link'
+
+function UnconfiguredPaymentsDisclaimer() {
+ return (
+
+
+
= ({ onSelect, onC
/>
-
+
+
+
{predefinedLabels.map(label => (
))}
+
{images.map(image => (
= ({ onSelect, onC
{!loading && images.length > 0 && (
@@ -152,6 +149,18 @@ const UnsplashImagePicker: React.FC = ({ onSelect, onC
@@ -135,7 +132,7 @@ const UnsplashImagePicker: React.FC = ({ 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)}
/>
))}
@@ -144,7 +141,7 @@ const UnsplashImagePicker: React.FCLoading...
;
+ }
+
+ if (error) {
+ return Error loading payment configuration
;
+ }
+
+ return (
+
+ setIsModalOpen(false)}
+ />
+ )}
+
+ );
+};
+
+interface EditStripeConfigModalProps {
+ orgId: number;
+ configId: string;
+ accessToken: string;
+ isOpen: boolean;
+ onClose: () => void;
+}
+
+const EditStripeConfigModal: React.FC
+
+
+
+
+
+
+
+
+ {stripeConfig && (
+
+
+
+ Payments Configuration
+Manage your organization payments configuration
+
+
+
+ Learn more about Stripe
+ -
+
-
+
+ Accept payments for courses and subscriptions +
+ -
+
+ Manage recurring billing and subscriptions +
+ -
+
+ Handle multiple currencies and payment methods +
+ -
+
+ Access detailed payment analytics +
+
+ {stripeConfig ? (
+
+
+
+ ) : (
+
+ )}
+
+
+
+
+
+ Stripe
+ {stripeConfig.provider_specific_id && stripeConfig.active ? (
+
+
+ {stripeConfig.provider_specific_id ?
+ `Linked Account: ${stripeConfig.provider_specific_id}` :
+ 'Account ID not configured'}
+
+
+
+ Connected
+
+ ) : (
+
+
+ Not Connected
+
+ )}
+
+ {(!stripeConfig.provider_specific_id || !stripeConfig.active) && (
+
+ )}
+
+
+
+ No customers found
+
+ );
+ }
+
+ return (
+ Error loading customers
+ if (!customers) return No customer data available
+
+ return (
+
+
+ )
+}
+
+export default PaymentsCustomersPage
\ No newline at end of file
diff --git a/apps/web/components/Dashboard/Pages/Payments/PaymentsProductPage.tsx b/apps/web/components/Dashboard/Pages/Payments/PaymentsProductPage.tsx
new file mode 100644
index 00000000..7ccf8c97
--- /dev/null
+++ b/apps/web/components/Dashboard/Pages/Payments/PaymentsProductPage.tsx
@@ -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
+
+
+ Customers
+View and manage your customer information
+Failed to load products
;
+ if (!products) return Loading...
;
+
+ return (
+
+
+ )
+}
+
+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 (
+
+
+
+ setIsCreateModalOpen(false)} />
+ }
+ />
+
+
+
+ {products.data.map((product: any) => (
+
+ {products.data.length === 0 && (
+
+ {editingProductId === product.id ? (
+ setEditingProductId(null)}
+ onCancel={() => setEditingProductId(null)}
+ />
+ ) : (
+
+ ))}
+
+
+ )}
+
+
+
+
+ {product.product_type === 'subscription' ?
+
+ {product.name}
+
+
+
+
+
+
+
+
+ + {product.description} +
+ {product.benefits && ( +
+
+ )}
+ Benefits:
++ {product.benefits} +
+
+
+
+
+ Price:
+
+ {new Intl.NumberFormat('en-US', { style: 'currency', currency: product.currency }).format(product.amount)}
+
+
+
+
+ )}
+
+ No products available. Create a new product to get started.
+
+
+
+
+ {/* Thumbnail */}
+
+
+ {/* Content */}
+
+ );
+};
+
+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 (
+
+
+
+ {/* Action Button */}
+ + {course.name} +
++ {course.description} +
+
+ {isLinked ? (
+
+ ) : (
+
+ )}
+
+
+
+
+ {/* Course List */}
+
+ );
+}
\ No newline at end of file
diff --git a/apps/web/components/Dashboard/Pages/Payments/SubComponents/ProductLinkedCourses.tsx b/apps/web/components/Dashboard/Pages/Payments/SubComponents/ProductLinkedCourses.tsx
new file mode 100644
index 00000000..8d07bcf0
--- /dev/null
+++ b/apps/web/components/Dashboard/Pages/Payments/SubComponents/ProductLinkedCourses.tsx
@@ -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
+ {courses?.map((course: any) => (
+
+
+ No courses found
+
+ )}
+
+
+ );
+}
\ No newline at end of file
diff --git a/apps/web/components/Dashboard/UserAccount/UserEditGeneral/UserEditGeneral.tsx b/apps/web/components/Dashboard/Pages/UserAccount/UserEditGeneral/UserEditGeneral.tsx
similarity index 100%
rename from apps/web/components/Dashboard/UserAccount/UserEditGeneral/UserEditGeneral.tsx
rename to apps/web/components/Dashboard/Pages/UserAccount/UserEditGeneral/UserEditGeneral.tsx
diff --git a/apps/web/components/Dashboard/UserAccount/UserEditPassword/UserEditPassword.tsx b/apps/web/components/Dashboard/Pages/UserAccount/UserEditPassword/UserEditPassword.tsx
similarity index 100%
rename from apps/web/components/Dashboard/UserAccount/UserEditPassword/UserEditPassword.tsx
rename to apps/web/components/Dashboard/Pages/UserAccount/UserEditPassword/UserEditPassword.tsx
diff --git a/apps/web/components/Dashboard/Users/OrgAccess/OrgAccess.tsx b/apps/web/components/Dashboard/Pages/Users/OrgAccess/OrgAccess.tsx
similarity index 98%
rename from apps/web/components/Dashboard/Users/OrgAccess/OrgAccess.tsx
rename to apps/web/components/Dashboard/Pages/Users/OrgAccess/OrgAccess.tsx
index 9c609c77..b5221e66 100644
--- a/apps/web/components/Dashboard/Users/OrgAccess/OrgAccess.tsx
+++ b/apps/web/components/Dashboard/Pages/Users/OrgAccess/OrgAccess.tsx
@@ -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'
diff --git a/apps/web/components/Dashboard/Users/OrgUserGroups/OrgUserGroups.tsx b/apps/web/components/Dashboard/Pages/Users/OrgUserGroups/OrgUserGroups.tsx
similarity index 98%
rename from apps/web/components/Dashboard/Users/OrgUserGroups/OrgUserGroups.tsx
rename to apps/web/components/Dashboard/Pages/Users/OrgUserGroups/OrgUserGroups.tsx
index d0d7b7c2..ba586ada 100644
--- a/apps/web/components/Dashboard/Users/OrgUserGroups/OrgUserGroups.tsx
+++ b/apps/web/components/Dashboard/Pages/Users/OrgUserGroups/OrgUserGroups.tsx
@@ -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'
diff --git a/apps/web/components/Dashboard/Users/OrgUsers/OrgUsers.tsx b/apps/web/components/Dashboard/Pages/Users/OrgUsers/OrgUsers.tsx
similarity index 96%
rename from apps/web/components/Dashboard/Users/OrgUsers/OrgUsers.tsx
rename to apps/web/components/Dashboard/Pages/Users/OrgUsers/OrgUsers.tsx
index c25e5d84..7d5bee0b 100644
--- a/apps/web/components/Dashboard/Users/OrgUsers/OrgUsers.tsx
+++ b/apps/web/components/Dashboard/Pages/Users/OrgUsers/OrgUsers.tsx
@@ -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'
diff --git a/apps/web/components/Dashboard/Users/OrgUsersAdd/OrgUsersAdd.tsx b/apps/web/components/Dashboard/Pages/Users/OrgUsersAdd/OrgUsersAdd.tsx
similarity index 98%
rename from apps/web/components/Dashboard/Users/OrgUsersAdd/OrgUsersAdd.tsx
rename to apps/web/components/Dashboard/Pages/Users/OrgUsersAdd/OrgUsersAdd.tsx
index b724a350..496d25d9 100644
--- a/apps/web/components/Dashboard/Users/OrgUsersAdd/OrgUsersAdd.tsx
+++ b/apps/web/components/Dashboard/Pages/Users/OrgUsersAdd/OrgUsersAdd.tsx
@@ -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'
diff --git a/apps/web/components/Hooks/useFeatureFlag.tsx b/apps/web/components/Hooks/useFeatureFlag.tsx
new file mode 100644
index 00000000..97623043
--- /dev/null
+++ b/apps/web/components/Hooks/useFeatureFlag.tsx
@@ -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
+ {
+ setIsLinkModalOpen(false);
+ fetchLinkedCourses();
+ }}
+ />
+ }
+ dialogTrigger={
+
+ }
+ />
+
+
+ Linked Courses
+
+ {linkedCourses.length === 0 ? (
+
+
+
+ ) : (
+ linkedCourses.map((course) => (
+
+ {course.name}
+
+
+ ))
+ )}
+ Failed to load product options
+ if (!linkedProducts) return Loading...
+
+ return (
+
+ {linkedProducts.data.map((product: any) => (
+
+ )
+}
+
+export default CoursePaidOptions
diff --git a/apps/web/components/Objects/Courses/CourseActions/CoursesActions.tsx b/apps/web/components/Objects/Courses/CourseActions/CoursesActions.tsx
new file mode 100644
index 00000000..bbcabe0d
--- /dev/null
+++ b/apps/web/components/Objects/Courses/CourseActions/CoursesActions.tsx
@@ -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 }) => (
+
+
+ ))}
+
+
+
+
+
+ {product.product_type === 'subscription' ?
+
+ {product.name}
+
+
+
+
+
+ + {product.description} +
+ {product.benefits && ( +
+
+ )}
+ Benefits:
++ {product.benefits} +
+
+
+
+
+
+
+ {product.price_type === 'customer_choice' ? 'Minimum Price:' : 'Price:'}
+
+
+
+
+
+
+ {new Intl.NumberFormat('en-US', {
+ style: 'currency',
+ currency: product.currency
+ }).format(product.amount)}
+ {product.product_type === 'subscription' && /month}
+
+ {product.price_type === 'customer_choice' && (
+ Choose your price
+ )}
+
+
+
+)
+
+const Actions = ({ courseuuid, orgslug, course }: CourseActionsProps) => {
+ const router = useRouter()
+ const session = useLHSession() as any
+ const [linkedProducts, setLinkedProducts] = useState
+
+ Author
+
+ {(author.first_name && author.last_name) ? (
+
+
+
+ ) : (
+ {`${author.first_name} ${author.last_name}`}
+ + @{author.username} + +
+
+ )}
+ @{author.username}
+
+ {hasAccess ? (
+ <>
+
+ )
+ }
+
+ return (
+
+ )
+}
+
+function CoursesActions({ courseuuid, orgslug, course }: CourseActionsProps) {
+ const router = useRouter()
+ const session = useLHSession() as any
+ const isMobile = useMediaQuery('(max-width: 768px)')
+
+
+ return (
+
+
+
+
+ ) : (
+
+
+
+ You Own This Course
++ You have purchased this course and have full access to all content. +
+
+
+ )}
+
+ {!hasAccess && (
+ <>
+
+
+ Paid Course
++ This course requires purchase to access its content. +
+
+
+ )
+}
+
+export default CoursesActions
\ No newline at end of file
diff --git a/apps/web/components/Objects/Courses/CourseActions/PaidCourseActivityDisclaimer.tsx b/apps/web/components/Objects/Courses/CourseActions/PaidCourseActivityDisclaimer.tsx
new file mode 100644
index 00000000..bb576046
--- /dev/null
+++ b/apps/web/components/Objects/Courses/CourseActions/PaidCourseActivityDisclaimer.tsx
@@ -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 (
+
+
+
+
+ )
+}
+
+export default PaidCourseActivityDisclaimer
\ No newline at end of file
diff --git a/apps/web/components/Objects/CourseUpdates/CourseUpdates.tsx b/apps/web/components/Objects/Courses/CourseUpdates/CourseUpdates.tsx
similarity index 98%
rename from apps/web/components/Objects/CourseUpdates/CourseUpdates.tsx
rename to apps/web/components/Objects/Courses/CourseUpdates/CourseUpdates.tsx
index a0709a6e..917f233b 100644
--- a/apps/web/components/Objects/CourseUpdates/CourseUpdates.tsx
+++ b/apps/web/components/Objects/Courses/CourseUpdates/CourseUpdates.tsx
@@ -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'
diff --git a/apps/web/components/Objects/Editor/AI/AIEditorToolkit.tsx b/apps/web/components/Objects/Editor/AI/AIEditorToolkit.tsx
index 4b12b60b..e8dd3953 100644
--- a/apps/web/components/Objects/Editor/AI/AIEditorToolkit.tsx
+++ b/apps/web/components/Objects/Editor/AI/AIEditorToolkit.tsx
@@ -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 = {
diff --git a/apps/web/components/Objects/Editor/Editor.tsx b/apps/web/components/Objects/Editor/Editor.tsx
index ddd40192..29d3fd8d 100644
--- a/apps/web/components/Objects/Editor/Editor.tsx
+++ b/apps/web/components/Objects/Editor/Editor.tsx
@@ -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'
diff --git a/apps/web/components/Objects/Editor/EditorWrapper.tsx b/apps/web/components/Objects/Editor/EditorWrapper.tsx
index e51180a3..b9c3d7f1 100644
--- a/apps/web/components/Objects/Editor/EditorWrapper.tsx
+++ b/apps/web/components/Objects/Editor/EditorWrapper.tsx
@@ -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'
diff --git a/apps/web/components/Objects/Editor/Toolbar/ToolbarButtons.tsx b/apps/web/components/Objects/Editor/Toolbar/ToolbarButtons.tsx
index 5819bad6..0dc54119 100644
--- a/apps/web/components/Objects/Editor/Toolbar/ToolbarButtons.tsx
+++ b/apps/web/components/Objects/Editor/Toolbar/ToolbarButtons.tsx
@@ -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) {
diff --git a/apps/web/components/Objects/Menu/Menu.tsx b/apps/web/components/Objects/Menus/OrgMenu.tsx
similarity index 99%
rename from apps/web/components/Objects/Menu/Menu.tsx
rename to apps/web/components/Objects/Menus/OrgMenu.tsx
index ec33ddd8..22eef5c2 100644
--- a/apps/web/components/Objects/Menu/Menu.tsx
+++ b/apps/web/components/Objects/Menus/OrgMenu.tsx
@@ -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;
diff --git a/apps/web/components/Objects/Menu/MenuLinks.tsx b/apps/web/components/Objects/Menus/OrgMenuLinks.tsx
similarity index 100%
rename from apps/web/components/Objects/Menu/MenuLinks.tsx
rename to apps/web/components/Objects/Menus/OrgMenuLinks.tsx
diff --git a/apps/web/components/Objects/Modals/Activities/Create/NewActivityModal/Assignment.tsx b/apps/web/components/Objects/Modals/Activities/Create/NewActivityModal/Assignment.tsx
index 17ea3fbe..f11a4323 100644
--- a/apps/web/components/Objects/Modals/Activities/Create/NewActivityModal/Assignment.tsx
+++ b/apps/web/components/Objects/Modals/Activities/Create/NewActivityModal/Assignment.tsx
@@ -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'
diff --git a/apps/web/components/Objects/Modals/Activities/Create/NewActivityModal/DocumentPdf.tsx b/apps/web/components/Objects/Modals/Activities/Create/NewActivityModal/DocumentPdf.tsx
index 06d14e55..8c978577 100644
--- a/apps/web/components/Objects/Modals/Activities/Create/NewActivityModal/DocumentPdf.tsx
+++ b/apps/web/components/Objects/Modals/Activities/Create/NewActivityModal/DocumentPdf.tsx
@@ -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'
diff --git a/apps/web/components/Objects/Modals/Activities/Create/NewActivityModal/DynamicCanva.tsx b/apps/web/components/Objects/Modals/Activities/Create/NewActivityModal/DynamicCanva.tsx
index 7d6082ab..492d125c 100644
--- a/apps/web/components/Objects/Modals/Activities/Create/NewActivityModal/DynamicCanva.tsx
+++ b/apps/web/components/Objects/Modals/Activities/Create/NewActivityModal/DynamicCanva.tsx
@@ -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'
diff --git a/apps/web/components/Objects/Modals/Activities/Create/NewActivityModal/Video.tsx b/apps/web/components/Objects/Modals/Activities/Create/NewActivityModal/Video.tsx
index 0d9ce796..3cc61bd1 100644
--- a/apps/web/components/Objects/Modals/Activities/Create/NewActivityModal/Video.tsx
+++ b/apps/web/components/Objects/Modals/Activities/Create/NewActivityModal/Video.tsx
@@ -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'
diff --git a/apps/web/components/Objects/Modals/Chapters/NewChapter.tsx b/apps/web/components/Objects/Modals/Chapters/NewChapter.tsx
index 9976a3a8..dfa4dd86 100644
--- a/apps/web/components/Objects/Modals/Chapters/NewChapter.tsx
+++ b/apps/web/components/Objects/Modals/Chapters/NewChapter.tsx
@@ -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'
diff --git a/apps/web/components/Objects/Modals/Course/Create/CreateCourse.tsx b/apps/web/components/Objects/Modals/Course/Create/CreateCourse.tsx
index f3246ee4..f20f1490 100644
--- a/apps/web/components/Objects/Modals/Course/Create/CreateCourse.tsx
+++ b/apps/web/components/Objects/Modals/Course/Create/CreateCourse.tsx
@@ -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
+
+
+
+ Paid Content
++ This content requires a course purchase to access. +
+
+
+
+
+
+ {formik.values.thumbnail ? (
+ })
+ ) : (
+ 
+ )}
+
+
+ )}
+
+
+
+
+
+
+
+
+
+ {showUnsplashPicker && (
+
+
+ )
+}
+
+export default UnconfiguredPaymentsDisclaimer
\ No newline at end of file
diff --git a/apps/web/components/Security/HeaderProfileBox.tsx b/apps/web/components/Security/HeaderProfileBox.tsx
index 7c1bb394..6fbddd2b 100644
--- a/apps/web/components/Security/HeaderProfileBox.tsx
+++ b/apps/web/components/Security/HeaderProfileBox.tsx
@@ -2,16 +2,17 @@
import React, { useEffect } from 'react'
import styled from 'styled-components'
import Link from 'next/link'
-import { Settings } from 'lucide-react'
+import { Package2, Settings } from 'lucide-react'
import UserAvatar from '@components/Objects/UserAvatar'
import useAdminStatus from '@components/Hooks/useAdminStatus'
import { useLHSession } from '@components/Contexts/LHSessionContext'
import { useOrg } from '@components/Contexts/OrgContext'
import { getUriWithoutOrg } from '@services/config/config'
+import Tooltip from '@components/Objects/StyledElements/Tooltip/Tooltip'
export const HeaderProfileBox = () => {
const session = useLHSession() as any
- const isUserAdmin = useAdminStatus()
+ const isUserAdmin = useAdminStatus()
const org = useOrg() as any
useEffect(() => { }
@@ -39,12 +40,30 @@ export const HeaderProfileBox = () => {
+
+
+
+
+
+
+
+
+
+
+ -
+
-
+
+ Configure Stripe to start accepting payments +
+ -
+
+ Create and manage products +
+ -
+
+ Start selling to your customers +
+
{session.data.user.username}
{isUserAdmin.isAdmin &&ADMIN
}
+
+
+
+
+
+
+
+
+
+))
+Table.displayName = "Table"
+
+const TableHeader = React.forwardRef<
+ HTMLTableSectionElement,
+ React.HTMLAttributes