root
cfff74e2db
Souq Marketplace: - Native souq pages: browse+filters, create listing, detail+seller profile, orders+chat - New API: reviews (POST), sellers/[id], upload (multipart), polar-checkout webhook - Listings API enhanced: minPrice, maxPrice, sortBy, deliveryDays filters - Seller workflow: start order, mark delivered, upload files, confirm delivery - Wallet: 5 Polar.sh FLH tiers, production checkout, mock fallback, success banner - Fix: order redirect /souq/history → /souq/orders Auth System: - Unified auth page, removed OAuth provider routing (2 files deleted) - Deleted oauth.ts (319 lines) — simplified auth chain - Streamlined login/register API routes Prisma Schema (+179 lines): - New models: Listing, Purchase, Review, Group/GroupMember - Gamification: DailyStreak, XpTransaction, Achievement, UserLevel - Learning: LearnCourse/Module/Enrollment/Certificate - Notifications, Referrals, Dhikr, PremiumBenefits Deleted legacy code: - src/app/api/marketplace/* (3 files) — replaced by /api/souq/* - src/app/api/files/[listingId]/route.ts — replaced by /api/souq/upload - src/app/api/seller/[sellerId]/route.ts — replaced by /api/souq/sellers/[id] Infrastructure: - Dockerfile: standalone output, Prisma runtime migration - docker-compose.yml: Polar env vars, healthcheck fix - docker-compose.staging.yml: staging on port 4014 - .gitea/workflows/ci.yml: CI pipeline
457 lines
16 KiB
TypeScript
457 lines
16 KiB
TypeScript
"use client";
|
|
|
|
import { useState, useEffect } from "react";
|
|
import { useAuth } from "@/lib/AuthContext";
|
|
import { useRouter } from "next/navigation";
|
|
import {
|
|
Lock,
|
|
Book,
|
|
Headphones,
|
|
Award,
|
|
Sparkles,
|
|
} from "lucide-react";
|
|
|
|
/* ------------------------------------------------------------------ */
|
|
/* Types */
|
|
/* ------------------------------------------------------------------ */
|
|
|
|
interface CourseEnrollment {
|
|
progress: number;
|
|
completed: boolean;
|
|
}
|
|
|
|
interface LearnCourse {
|
|
id: string;
|
|
slug: string;
|
|
title: string;
|
|
author: string;
|
|
description: string;
|
|
imageUrl: string | null;
|
|
moduleCount: number;
|
|
totalMinutes: number;
|
|
difficulty: string;
|
|
priceFlh: number | null;
|
|
priceUsd: number | null;
|
|
subscriptionOnly: boolean;
|
|
enrolled: boolean | null;
|
|
enrollment?: CourseEnrollment;
|
|
}
|
|
|
|
/* ------------------------------------------------------------------ */
|
|
/* Helpers */
|
|
/* ------------------------------------------------------------------ */
|
|
|
|
const DIFFICULTY_STYLES: Record<string, { label: string; classes: string }> = {
|
|
beginner: {
|
|
label: "Beginner",
|
|
classes: "bg-green-900/30 text-[#00C48C] border border-green-800/30",
|
|
},
|
|
intermediate: {
|
|
label: "Intermediate",
|
|
classes: "bg-amber-900/30 text-amber-400 border border-amber-800/30",
|
|
},
|
|
advanced: {
|
|
label: "Advanced",
|
|
classes: "bg-red-900/30 text-red-400 border border-red-800/30",
|
|
},
|
|
};
|
|
|
|
function difficultyLabel(diff: string): { label: string; classes: string } {
|
|
return DIFFICULTY_STYLES[diff] ?? {
|
|
label: diff,
|
|
classes: "bg-gray-800/40 text-gray-400 border border-gray-700/30",
|
|
};
|
|
}
|
|
|
|
function formatPrice(course: LearnCourse): string {
|
|
if (course.subscriptionOnly) return "Learn Pass";
|
|
if (course.priceFlh === null && course.priceUsd === null) return "FREE";
|
|
if (course.priceUsd !== null) return `$${course.priceUsd.toFixed(2)}`;
|
|
if (course.priceFlh !== null) return `FLH ${course.priceFlh.toLocaleString()}`;
|
|
return "FREE";
|
|
}
|
|
|
|
function isFree(course: LearnCourse): boolean {
|
|
if (course.subscriptionOnly) return false;
|
|
return course.priceFlh === null && course.priceUsd === null;
|
|
}
|
|
|
|
/* ------------------------------------------------------------------ */
|
|
/* Placeholder Thumbnail */
|
|
/* ------------------------------------------------------------------ */
|
|
|
|
const COURSE_VISUALS: Record<string, { icon: string; bg: string }> = {
|
|
// A few known slugs get themed visuals
|
|
default: { icon: "📖", bg: "from-[#C9A84C]/20 to-[#C9A84C]/5" },
|
|
};
|
|
|
|
function courseVisual(slug: string): { icon: string; bg: string } {
|
|
return COURSE_VISUALS[slug] ?? COURSE_VISUALS.default;
|
|
}
|
|
|
|
/* ------------------------------------------------------------------ */
|
|
/* Page Component */
|
|
/* ------------------------------------------------------------------ */
|
|
|
|
export default function LearnCatalogPage() {
|
|
const { user, token, loading } = useAuth();
|
|
const router = useRouter();
|
|
|
|
const [courses, setCourses] = useState<LearnCourse[]>([]);
|
|
const [fetching, setFetching] = useState(true);
|
|
const [error, setError] = useState<string | null>(null);
|
|
|
|
// Redirect to auth if not logged in
|
|
useEffect(() => {
|
|
if (!loading && !token) router.push("/auth");
|
|
}, [loading, token, router]);
|
|
|
|
// Fetch courses
|
|
useEffect(() => {
|
|
if (!token) return;
|
|
setFetching(true);
|
|
setError(null);
|
|
fetch("/mobile/api/learn/courses", {
|
|
headers: { Authorization: `Bearer ${token}` },
|
|
})
|
|
.then((r) => {
|
|
if (!r.ok) throw new Error("Failed to load courses");
|
|
return r.json();
|
|
})
|
|
.then((data: { courses: LearnCourse[] }) =>
|
|
setCourses(data.courses || [])
|
|
)
|
|
.catch((err: Error) => setError(err.message))
|
|
.finally(() => setFetching(false));
|
|
}, [token]);
|
|
|
|
// ── Loading state ──
|
|
if (loading) {
|
|
return (
|
|
<div className="min-h-dvh bg-[#07090C] flex items-center justify-center">
|
|
<div className="w-8 h-8 rounded-full border-2 border-[#C9A84C]/30 border-t-[#C9A84C] animate-spin" />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (!user) return null;
|
|
|
|
// ── Guard: token present but no user yet ──
|
|
if (!token) return null;
|
|
|
|
// ── Enrolled / locked separation ──
|
|
const enrolled = courses.filter((c) => c.enrolled === true);
|
|
const locked = courses.filter((c) => c.enrolled !== true);
|
|
|
|
return (
|
|
<div className="min-h-dvh bg-[#07090C] pb-24">
|
|
{/* ── Header ── */}
|
|
<div className="px-0 pt-6 pb-2">
|
|
<div className="flex items-center justify-between mb-1">
|
|
<div>
|
|
<h1 className="text-xl font-bold text-white">Falah Learn</h1>
|
|
<p className="text-xs text-gray-500 mt-0.5">
|
|
Micro learning courses. 5 minutes at a time.
|
|
</p>
|
|
</div>
|
|
<div className="w-10 h-10 rounded-xl bg-[#C9A84C]/15 flex items-center justify-center">
|
|
<Book size={20} className="text-[#C9A84C]" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* ── Error state ── */}
|
|
{error && !fetching && (
|
|
<div className="mx-0 mt-4 bg-[#111118] border border-red-900/40 rounded-2xl p-5 text-center">
|
|
<p className="text-sm text-red-400">{error}</p>
|
|
<button
|
|
onClick={() => {
|
|
setFetching(true);
|
|
setError(null);
|
|
fetch("/mobile/api/learn/courses", {
|
|
headers: { Authorization: `Bearer ${token}` },
|
|
})
|
|
.then((r) => {
|
|
if (!r.ok) throw new Error("Failed to load courses");
|
|
return r.json();
|
|
})
|
|
.then((data: { courses: LearnCourse[] }) =>
|
|
setCourses(data.courses || [])
|
|
)
|
|
.catch((err: Error) => setError(err.message))
|
|
.finally(() => setFetching(false));
|
|
}}
|
|
className="mt-3 text-xs text-[#C9A84C] underline underline-offset-2"
|
|
>
|
|
Try again
|
|
</button>
|
|
</div>
|
|
)}
|
|
|
|
{/* ── Loading skeleton ── */}
|
|
{fetching && (
|
|
<div className="mt-6 space-y-4">
|
|
{[1, 2, 3].map((i) => (
|
|
<div
|
|
key={i}
|
|
className="bg-[#0C1017] border border-gray-800/40 rounded-2xl overflow-hidden animate-pulse"
|
|
>
|
|
<div className="h-32 bg-gray-800/30" />
|
|
<div className="p-4 space-y-3">
|
|
<div className="h-4 bg-gray-800/40 rounded w-3/4" />
|
|
<div className="h-3 bg-gray-800/30 rounded w-1/2" />
|
|
<div className="flex gap-2">
|
|
<div className="h-5 bg-gray-800/30 rounded-full w-16" />
|
|
<div className="h-5 bg-gray-800/30 rounded-full w-12" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
{/* ── Course grid ── */}
|
|
{!fetching && !error && courses.length === 0 && (
|
|
<div className="mx-0 mt-8 bg-[#111118] border border-gray-800/60 rounded-2xl p-8 text-center">
|
|
<Book size={32} className="mx-auto text-gray-700 mb-3" />
|
|
<p className="text-sm text-gray-500">No courses available yet</p>
|
|
<p className="text-xs text-gray-700 mt-1">
|
|
Check back soon for new micro learning content
|
|
</p>
|
|
</div>
|
|
)}
|
|
|
|
{!fetching && !error && courses.length > 0 && (
|
|
<>
|
|
{/* ── Enrolled courses section ── */}
|
|
{enrolled.length > 0 && (
|
|
<div className="mt-6">
|
|
<h2 className="text-sm font-semibold text-white flex items-center gap-2 mb-3">
|
|
<Book size={14} className="text-[#00C48C]" />
|
|
My Courses
|
|
</h2>
|
|
<div className="grid grid-cols-1 gap-4">
|
|
{enrolled.map((course) => (
|
|
<CourseCard
|
|
key={course.id}
|
|
course={course}
|
|
enrolled
|
|
router={router}
|
|
/>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* ── All / locked courses section ── */}
|
|
<div className="mt-6">
|
|
<h2 className="text-sm font-semibold text-white flex items-center gap-2 mb-3">
|
|
<Award size={14} className="text-[#C9A84C]" />
|
|
{enrolled.length > 0 ? "More Courses" : "All Courses"}
|
|
</h2>
|
|
<div className="grid grid-cols-1 gap-4">
|
|
{locked.map((course) => (
|
|
<CourseCard
|
|
key={course.id}
|
|
course={course}
|
|
enrolled={false}
|
|
router={router}
|
|
/>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</>
|
|
)}
|
|
|
|
{/* ── Learn Pass subscription card ── */}
|
|
<div className="mt-8 mx-0">
|
|
<div className="bg-gradient-to-br from-[#C9A84C]/10 to-[#C9A84C]/5 border border-[#C9A84C]/20 rounded-2xl p-5 relative overflow-hidden">
|
|
{/* Decorative glow */}
|
|
<div className="absolute -top-10 -right-10 w-32 h-32 bg-[#C9A84C]/10 rounded-full blur-3xl pointer-events-none" />
|
|
<div className="absolute -bottom-8 -left-8 w-28 h-28 bg-[#00C48C]/5 rounded-full blur-3xl pointer-events-none" />
|
|
|
|
<div className="relative z-10">
|
|
<div className="flex items-center gap-2 mb-2">
|
|
<Sparkles size={18} className="text-[#C9A84C]" />
|
|
<h3 className="text-base font-bold text-white">Learn Pass</h3>
|
|
</div>
|
|
<p className="text-xs text-gray-400 mb-4 leading-relaxed">
|
|
Get unlimited access to all courses, audio lessons, and
|
|
certificates with a Learn Pass subscription.
|
|
</p>
|
|
<div className="flex items-center gap-4 mb-4">
|
|
<div className="flex items-center gap-1.5 text-[11px] text-gray-500">
|
|
<Headphones size={13} className="text-[#C9A84C]/70" />
|
|
Audio lessons
|
|
</div>
|
|
<div className="flex items-center gap-1.5 text-[11px] text-gray-500">
|
|
<Award size={13} className="text-[#C9A84C]/70" />
|
|
Certificates
|
|
</div>
|
|
<div className="flex items-center gap-1.5 text-[11px] text-gray-500">
|
|
<Book size={13} className="text-[#C9A84C]/70" />
|
|
All courses
|
|
</div>
|
|
</div>
|
|
<a
|
|
href="https://istore.falahos.my"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="inline-flex items-center gap-2 bg-[#C9A84C] text-[#07090C] text-sm font-semibold px-5 py-2.5 rounded-xl hover:bg-[#C9A84C]/90 active:scale-[0.97] transition min-h-[44px]"
|
|
>
|
|
<Sparkles size={16} />
|
|
Get Learn Pass
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="h-6" />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
/* ------------------------------------------------------------------ */
|
|
/* Course Card */
|
|
/* ------------------------------------------------------------------ */
|
|
|
|
function CourseCard({
|
|
course,
|
|
enrolled,
|
|
router,
|
|
}: {
|
|
course: LearnCourse;
|
|
enrolled: boolean;
|
|
router: ReturnType<typeof useRouter>;
|
|
}) {
|
|
const vis = courseVisual(course.slug);
|
|
const diff = difficultyLabel(course.difficulty);
|
|
|
|
const handleClick = () => {
|
|
if (enrolled) {
|
|
router.push(`/learn/${course.slug}`);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div
|
|
className={`bg-[#0C1017] border rounded-2xl overflow-hidden transition ${
|
|
enrolled
|
|
? "border-gray-800/60 hover:border-gray-700/60 active:scale-[0.98] cursor-pointer"
|
|
: "border-gray-800/40"
|
|
}`}
|
|
onClick={handleClick}
|
|
role={enrolled ? "button" : "article"}
|
|
tabIndex={enrolled ? 0 : undefined}
|
|
onKeyDown={
|
|
enrolled
|
|
? (e) => {
|
|
if (e.key === "Enter" || e.key === " ") {
|
|
e.preventDefault();
|
|
router.push(`/learn/${course.slug}`);
|
|
}
|
|
}
|
|
: undefined
|
|
}
|
|
>
|
|
{/* Thumbnail placeholder */}
|
|
<div
|
|
className={`h-32 bg-gradient-to-br ${vis.bg} flex items-center justify-center relative`}
|
|
>
|
|
<span className="text-4xl">{vis.icon}</span>
|
|
|
|
{/* Lock overlay for locked courses */}
|
|
{!enrolled && (
|
|
<div className="absolute inset-0 bg-[#07090C]/40 flex items-center justify-center backdrop-blur-[1px]">
|
|
<div className="w-9 h-9 rounded-full bg-[#07090C]/70 flex items-center justify-center">
|
|
<Lock size={16} className="text-gray-400" />
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Progress bar for enrolled courses */}
|
|
{enrolled && course.enrollment && (
|
|
<div className="absolute bottom-0 left-0 right-0 h-1 bg-gray-800/60">
|
|
<div
|
|
className="h-full bg-[#00C48C] transition-all duration-500"
|
|
style={{
|
|
width: `${Math.min(100, Math.round((course.enrollment.progress ?? 0) * 100))}%`,
|
|
}}
|
|
/>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Content */}
|
|
<div className="p-4 space-y-2">
|
|
{/* Title */}
|
|
<h3 className="text-sm font-semibold text-white leading-tight line-clamp-2 min-h-[2.5rem]">
|
|
{course.title}
|
|
</h3>
|
|
|
|
{/* Author */}
|
|
<p className="text-[11px] text-gray-500 truncate">{course.author}</p>
|
|
|
|
{/* Meta row: difficulty badge + modules */}
|
|
<div className="flex items-center gap-2 flex-wrap">
|
|
<span
|
|
className={`text-[10px] font-medium px-2 py-0.5 rounded-full ${diff.classes}`}
|
|
>
|
|
{diff.label}
|
|
</span>
|
|
<span className="text-[10px] text-gray-500">
|
|
{course.moduleCount} module{course.moduleCount !== 1 ? "s" : ""}
|
|
</span>
|
|
{course.totalMinutes > 0 && (
|
|
<span className="text-[10px] text-gray-500">
|
|
~{course.totalMinutes} min
|
|
</span>
|
|
)}
|
|
</div>
|
|
|
|
{/* Price / CTA row */}
|
|
<div className="flex items-center justify-between pt-1">
|
|
<span
|
|
className={`text-sm font-bold ${
|
|
isFree(course) ? "text-[#00C48C]" : "text-[#C9A84C]"
|
|
}`}
|
|
>
|
|
{formatPrice(course)}
|
|
</span>
|
|
|
|
{!enrolled && (
|
|
<a
|
|
href="https://istore.falahos.my"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="inline-flex items-center gap-1 text-[11px] font-medium text-[#C9A84C] bg-[#C9A84C]/10 border border-[#C9A84C]/20 rounded-lg px-3 py-1.5 hover:bg-[#C9A84C]/20 active:scale-95 transition min-h-[36px]"
|
|
onClick={(e) => e.stopPropagation()}
|
|
>
|
|
Get on iStore →
|
|
</a>
|
|
)}
|
|
|
|
{enrolled && (
|
|
<span className="flex items-center gap-1 text-[11px] text-[#00C48C]">
|
|
{course.enrollment?.completed ? (
|
|
<>
|
|
<Award size={12} /> Completed
|
|
</>
|
|
) : course.enrollment && (course.enrollment.progress ?? 0) > 0 ? (
|
|
<>
|
|
<Book size={12} />
|
|
{Math.round((course.enrollment.progress ?? 0) * 100)}%
|
|
</>
|
|
) : (
|
|
<>
|
|
<Headphones size={12} /> Start
|
|
</>
|
|
)}
|
|
</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|