klevze/SkinbaseNova
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

Implement academy analytics, billing, and web stories updates

Browse Source
This commit is contained in:
Gregor Klevže
2026-05-26 07:27:29 +02:00
parent 456c3d6bb0
commit 0b33a1b074
177 changed files with 27360 additions and 2685 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
resources/js/Pages/Academy/CoursesIndex.jsx
View File

@@ -2,15 +2,33 @@ import React from 'react'
import { Link, router, usePage } from '@inertiajs/react'
import SeoHead from '../../components/seo/SeoHead'
import NovaSelect from '../../components/ui/NovaSelect'
import { trackAcademySearchResultClick, trackUpgradeClick, useAcademyPageAnalytics } from '../../lib/academyAnalytics'
function CourseCard({ course, variant = 'default' }) {
function CourseCard({ course, variant = 'default', analytics = null, searchContext = null, position = null }) {
const isFeatured = variant === 'featured'
const progress = course?.progress || null
const cover = course?.cover_image_url || course?.teaser_image_url || course?.cover_image || course?.teaser_image || ''
const trackSearchClick = () => {
if (!searchContext?.query) {
return
}
trackAcademySearchResultClick(analytics, searchContext, {
contentType: 'academy_course',
contentId: course?.id,
position,
})
}
return (
<Link
href={course.public_url}
onClick={trackSearchClick}
data-academy-content-type={searchContext?.query ? 'academy_course' : undefined}
data-academy-content-id={searchContext?.query ? course?.id : undefined}
data-academy-search-query={searchContext?.query || undefined}
data-academy-search-results-count={searchContext?.resultsCount || undefined}
data-academy-search-position={position || undefined}
className={[
'group overflow-hidden rounded-[30px] border border-white/10 transition hover:border-sky-300/25 hover:bg-white/[0.06]',
isFeatured ? 'bg-[linear-gradient(135deg,rgba(14,165,233,0.14),rgba(15,23,42,0.92))]' : 'bg-white/[0.04]',
@@ -50,8 +68,15 @@ function CourseCard({ course, variant = 'default' }) {
)
}
export default function AcademyCoursesIndex({ seo, title, description, items, featuredCourses = [], filters = {}, pricingUrl }) {
export default function AcademyCoursesIndex({ seo, title, description, items, featuredCourses = [], filters = {}, pricingUrl, analytics }) {
const flash = usePage().props.flash || {}
useAcademyPageAnalytics(analytics)
const searchContext = analytics?.search ? {
query: analytics.search.query,
normalizedQuery: analytics.search.normalizedQuery,
resultsCount: analytics.search.resultsCount,
filters,
} : null
const difficultyOptions = [
{ value: '', label: 'All levels' },
{ value: 'beginner', label: 'Beginner' },
@@ -77,7 +102,7 @@ export default function AcademyCoursesIndex({ seo, title, description, items, fe
<h1 className="mt-4 text-4xl font-semibold tracking-[-0.055em] text-white md:text-5xl lg:text-6xl">{title}</h1>
<p className="mt-5 text-base leading-8 text-slate-300 md:text-lg">{description}</p>
</div>
<Link href={pricingUrl} className="rounded-full border border-amber-300/25 bg-amber-300/12 px-5 py-3 text-sm font-semibold text-amber-100">See Academy plans</Link>
<Link href={pricingUrl} onClick={() => trackUpgradeClick(analytics, { source: 'academy_courses_index_hero' })} className="rounded-full border border-amber-300/25 bg-amber-300/12 px-5 py-3 text-sm font-semibold text-amber-100">See Academy plans</Link>
</div>
</section>
@@ -86,9 +111,9 @@ export default function AcademyCoursesIndex({ seo, title, description, items, fe
{featuredCourses.length ? (
<section className="grid gap-5 xl:grid-cols-[minmax(0,1.4fr)_minmax(0,1fr)]">
<CourseCard course={featuredCourses[0]} variant="featured" />
<CourseCard course={featuredCourses[0]} variant="featured" analytics={analytics} searchContext={searchContext} position={1} />
<div className="grid gap-5">
{featuredCourses.slice(1, 3).map((course) => <CourseCard key={course.id} course={course} />)}
{featuredCourses.slice(1, 3).map((course, index) => <CourseCard key={course.id} course={course} analytics={analytics} searchContext={searchContext} position={index + 2} />)}
</div>
</section>
) : null}
@@ -116,7 +141,7 @@ export default function AcademyCoursesIndex({ seo, title, description, items, fe
<section className="rounded-[30px] border border-white/10 bg-white/[0.04] px-6 py-12 text-center text-slate-400">No published Academy courses matched these filters.</section>
) : (
<section className="grid gap-5 md:grid-cols-2 xl:grid-cols-3">
{items.data.map((course) => <CourseCard key={course.id} course={course} />)}
{items.data.map((course, index) => <CourseCard key={course.id} course={course} analytics={analytics} searchContext={searchContext} position={index + 1} />)}
</section>
)}
</div>