@academy-sdk/sdk 0.1.1 → 0.2.0

package/src/components/pages/CourseDetailPage.tsx

@@ -0,0 +1,582 @@
+import { useState } from 'react';
+import {
+  CheckCircle2, ChevronDown, ChevronRight, PlayCircle, Download,
+  FileText, Clock, Monitor, Tag, X, Check, BookOpen,
+} from 'lucide-react';
+import type { CourseDetailPageProps } from '../../contracts/pages.contract';
+import { LoadingSpinner } from '../molecules/LoadingSpinner';
+import { EmptyState } from '../molecules/EmptyState';
+
+function formatCoursePrice(price: number, isFree: boolean, currency = 'USD'): string {
+  if (isFree || price === 0) return 'Free';
+  try {
+    return new Intl.NumberFormat('en-US', { style: 'currency', currency }).format(price);
+  } catch {
+    return `${currency} ${price.toFixed(2)}`;
+  }
+}
+
+function formatDuration(seconds: number): string {
+  const mins = Math.floor(seconds / 60);
+  if (mins >= 60) {
+    const hours = Math.floor(mins / 60);
+    const remainMins = mins % 60;
+    return `${hours}h ${remainMins}m`;
+  }
+  const secs = seconds % 60;
+  return `${mins}:${secs.toString().padStart(2, '0')}`;
+}
+
+export function CourseDetailPage(props: Partial<CourseDetailPageProps>) {
+  const noop = (..._args: any[]) => {};
+  const {
+    course, isLoading = false, notFound = false,
+    isEnrolled = false, enrollmentId = null,
+    onEnroll = noop as any, onStartLearning = noop, isProcessingEnrollment = false,
+    paymentProviders = [], onCheckout = noop as any, isProcessingCheckout = false,
+    couponCode = '', onCouponCodeChange = noop, onApplyCoupon = noop as any,
+    appliedCoupon = null, couponError = null, isApplyingCoupon = false, discountedPrice,
+    activeTab = 'overview' as const, onTabChange = noop,
+    relatedCourses = [], isRelatedLoading = false, onRelatedCourseClick = noop,
+    ratings, ratingSummary,
+  } = props;
+
+  const [expandedSections, setExpandedSections] = useState<Set<string>>(new Set());
+  const [selectedLesson, setSelectedLesson] = useState<string | null>(null);
+  const [showCouponInput, setShowCouponInput] = useState(false);
+  const [imgError, setImgError] = useState(false);
+
+  if (isLoading) return <LoadingSpinner className="py-20" text="Loading course..." />;
+  if (notFound || !course) {
+    return (
+      <EmptyState
+        icon={<BookOpen className="w-16 h-16" />}
+        title="Course not found"
+        description="The course you're looking for doesn't exist."
+      />
+    );
+  }
+
+  const pricingType = course.settings?.pricingType || course.pricingType || 'FREE';
+  const price = course.settings?.price ?? course.price ?? 0;
+  const currency = course.settings?.currency ?? course.currency ?? 'USD';
+  const isFree = pricingType === 'FREE' || price === 0;
+  const bannerImage = course.settings?.banner || course.bannerImage;
+  const thumbnail = course.thumbnail || '';
+  const totalLessons = (course.sections || []).reduce(
+    (sum: number, s: any) => sum + (s.activities?.length || 0), 0
+  );
+  const sections = course.sections || [];
+  const hasBanner = bannerImage && bannerImage.trim();
+
+  const toggleSection = (sectionId: string) => {
+    const next = new Set(expandedSections);
+    if (next.has(sectionId)) next.delete(sectionId);
+    else next.add(sectionId);
+    setExpandedSections(next);
+  };
+
+  const getButtonText = () => {
+    if (isEnrolled) return 'Continue Learning';
+    if (isFree) return 'Enroll for Free';
+    if (pricingType === 'SUBSCRIPTION') return 'Subscribe to Access';
+    if (pricingType === 'INSTALLMENT') return 'Make a Payment';
+    return 'Buy Course';
+  };
+
+  const handleEnrollClick = () => {
+    if (isEnrolled && enrollmentId) {
+      onStartLearning(enrollmentId);
+      return;
+    }
+    if (isFree) {
+      onEnroll();
+      return;
+    }
+    if (paymentProviders.length === 1) {
+      const p = paymentProviders[0] as any;
+      onCheckout(p.paymentProvider || p.id);
+      return;
+    }
+    onEnroll();
+  };
+
+  const renderEnrollmentCard = () => (
+    <div className="bg-white p-4 rounded-xl shadow-lg border border-gray-100">
+      {thumbnail && !imgError && (
+        <img
+          src={thumbnail}
+          alt={course.title}
+          className="w-full h-48 object-cover rounded-lg mb-4"
+          onError={() => setImgError(true)}
+        />
+      )}
+
+      {/* Enrolled status */}
+      {isEnrolled && (
+        <div className="mb-4 flex items-center justify-center gap-2 text-green-600">
+          <Check className="h-5 w-5" />
+          <span className="font-semibold text-sm">You're enrolled</span>
+        </div>
+      )}
+
+      {/* Price */}
+      <div className="text-center mb-4">
+        {appliedCoupon && discountedPrice !== undefined ? (
+          <div className="space-y-1">
+            <div className="text-2xl font-bold text-gray-900">
+              {formatCoursePrice(discountedPrice, false, currency)}
+            </div>
+            <div className="text-base line-through text-gray-400">
+              {formatCoursePrice(price, isFree, currency)}
+            </div>
+            <div className="text-sm font-semibold text-gray-900">
+              {(appliedCoupon as any).discountType === 'PERCENTAGE'
+                ? `${(appliedCoupon as any).discountValue}% Off`
+                : formatCoursePrice((appliedCoupon as any).discountValue, false, currency)}
+            </div>
+          </div>
+        ) : (
+          <div className="text-2xl font-bold text-gray-900">
+            {formatCoursePrice(price, isFree, currency)}
+            {pricingType === 'SUBSCRIPTION' && (
+              <span className="text-lg font-normal text-gray-500"> / month</span>
+            )}
+          </div>
+        )}
+      </div>
+
+      {/* Main action button */}
+      <button
+        onClick={handleEnrollClick}
+        disabled={isProcessingEnrollment || isProcessingCheckout}
+        className="w-full bg-theme-accent-primary hover:bg-[#3da5a7] text-white font-semibold py-3 px-6 rounded-md transition-colors mb-4 cursor-pointer disabled:opacity-50"
+      >
+        {isProcessingEnrollment || isProcessingCheckout ? 'Processing...' : getButtonText()}
+      </button>
+
+      {/* Multiple payment providers */}
+      {!isEnrolled && !isFree && paymentProviders.length > 1 &&
+        paymentProviders.map((provider: any) => (
+          <button
+            key={provider.paymentProvider || provider.id}
+            onClick={() => onCheckout(provider.paymentProvider || provider.id)}
+            disabled={isProcessingCheckout}
+            className="w-full bg-theme-accent-primary hover:bg-[#3da5a7] text-white font-semibold py-3 px-6 rounded-md transition-colors mb-2 cursor-pointer disabled:opacity-50"
+          >
+            Pay with {provider.paymentProvider}
+          </button>
+        ))
+      }
+
+      {/* Apply Coupon */}
+      {!isFree && !isEnrolled && (
+        <div className="mb-6">
+          {appliedCoupon ? (
+            <div className="p-3 bg-theme-accent-primary/10 border border-[#49BBBD]/20 rounded-lg">
+              <div className="flex items-center justify-between">
+                <div className="flex items-center gap-2">
+                  <Tag className="h-4 w-4 text-[#49BBBD]" />
+                  <span className="text-sm font-medium text-[#49BBBD]">
+                    Coupon &quot;{(appliedCoupon as any).code}&quot; applied
+                  </span>
+                </div>
+                <button
+                  onClick={() => { onCouponCodeChange(''); }}
+                  className="text-[#49BBBD] hover:text-[#3da5a7] transition-colors cursor-pointer"
+                >
+                  <X className="h-4 w-4" />
+                </button>
+              </div>
+            </div>
+          ) : showCouponInput ? (
+            <div className="space-y-2">
+              <div className="flex gap-2">
+                <input
+                  type="text"
+                  placeholder="Enter coupon code"
+                  value={couponCode}
+                  onChange={(e) => onCouponCodeChange(e.target.value.toUpperCase())}
+                  className={`flex-1 text-sm border rounded-md px-3 py-2 focus:outline-none focus:border-[#49BBBD] ${couponError ? 'border-red-500' : 'border-gray-300'}`}
+                />
+                <button
+                  onClick={onApplyCoupon as any}
+                  disabled={!couponCode || isApplyingCoupon}
+                  className="px-3 py-2 text-sm bg-theme-accent-primary text-white rounded-md hover:bg-[#3da5a7] disabled:opacity-50 cursor-pointer"
+                >
+                  {isApplyingCoupon ? 'Applying...' : 'Apply'}
+                </button>
+              </div>
+              {couponError && <p className="text-xs text-red-600">{couponError}</p>}
+            </div>
+          ) : (
+            <a
+              href="#"
+              onClick={(e) => { e.preventDefault(); setShowCouponInput(true); }}
+              className="block text-center text-sm font-medium text-[#49BBBD] hover:text-[#3da5a7] hover:underline cursor-pointer"
+            >
+              Apply Coupon
+            </a>
+          )}
+        </div>
+      )}
+
+      {/* This course included */}
+      <div className="border-t border-gray-200 pt-4">
+        <h3 className="font-semibold text-gray-900 mb-3 text-sm">This course included</h3>
+        <div className="space-y-2.5">
+          <div className="flex items-center gap-2.5 text-gray-700">
+            <div className="w-4 h-4 rounded-full bg-theme-accent-primary flex items-center justify-center flex-shrink-0">
+              <FileText className="h-2.5 w-2.5 text-white" />
+            </div>
+            <span className="text-sm">{totalLessons} lessons</span>
+          </div>
+          <div className="flex items-center gap-2.5 text-gray-700">
+            <div className="w-4 h-4 rounded-full bg-theme-accent-primary flex items-center justify-center flex-shrink-0">
+              <Clock className="h-2.5 w-2.5 text-white" />
+            </div>
+            <span className="text-sm">Self-paced learning</span>
+          </div>
+          <div className="flex items-center gap-2.5 text-gray-700">
+            <div className="w-4 h-4 rounded-full bg-theme-accent-primary flex items-center justify-center flex-shrink-0">
+              <Monitor className="h-2.5 w-2.5 text-white" />
+            </div>
+            <span className="text-sm">Access on mobile and desktop</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+
+  return (
+    <div className="-mx-4 sm:-mx-4 md:-mx-4 lg:-mx-6 xl:-mx-6">
+      {/* Course Hero Section */}
+      <div
+        className="relative text-white px-4 lg:px-8 py-8 lg:py-40 mb-8"
+        style={
+          hasBanner
+            ? { backgroundImage: `url(${bannerImage})`, backgroundSize: 'cover', backgroundPosition: 'center' }
+            : { backgroundColor: '#1a2332' }
+        }
+      >
+        {hasBanner && (
+          <div className="absolute inset-0 bg-gradient-to-r from-black/60 via-black/50 to-black/40" />
+        )}
+
+        <div className="relative z-10">
+          {/* Course header text */}
+          <div className="max-w-7xl lg:pr-110">
+            <h1 className="text-3xl lg:text-4xl font-bold mb-2">{course.title}</h1>
+            {course.brief && (
+              <p className="text-base lg:text-lg text-gray-300 mb-4 leading-relaxed">{course.brief}</p>
+            )}
+            {course.creator && (
+              <div className="flex items-center gap-3 mt-4 lg:mt-6">
+                <div className="w-10 h-10 rounded-full bg-theme-accent-primary flex items-center justify-center text-white font-semibold">
+                  {(course.creator.name || 'C').charAt(0).toUpperCase()}
+                </div>
+                <span className="text-sm">{course.creator.name}</span>
+              </div>
+            )}
+          </div>
+
+          {/* Mobile enrollment card — inside hero */}
+          <div className="lg:hidden mt-6">
+            {renderEnrollmentCard()}
+          </div>
+        </div>
+
+        {/* Desktop enrollment card — absolute positioned */}
+        <div className="hidden lg:block absolute right-8 top-15 w-80 z-20">
+          {renderEnrollmentCard()}
+        </div>
+      </div>
+
+      {/* Tab Navigation */}
+      <div className="px-4 lg:px-6 mb-6">
+        <div className="flex gap-3">
+          {(['overview', 'curriculum'] as const).map((tab) => (
+            <button
+              key={tab}
+              onClick={() => onTabChange(tab)}
+              className={`px-6 py-2.5 rounded-full text-sm font-medium transition-all cursor-pointer ${
+                activeTab === tab
+                  ? 'bg-theme-accent-primary text-white shadow-md'
+                  : 'bg-white text-gray-600 border border-gray-200 hover:border-[#49BBBD] hover:text-[#49BBBD]'
+              }`}
+            >
+              {tab.charAt(0).toUpperCase() + tab.slice(1)}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      {/* Tab Content */}
+      <div className="px-4 lg:px-6">
+        {/* Overview Tab */}
+        {activeTab === 'overview' && (
+          <div className="lg:pr-110">
+            {/* About This Course */}
+            <div className="mb-8 pb-8 border-b border-gray-300">
+              <h2 className="text-xl font-bold text-gray-900 mb-4">About This Course</h2>
+              {course.summary && (
+                <div
+                  className="text-gray-700 text-sm leading-relaxed mb-6"
+                  dangerouslySetInnerHTML={{ __html: course.summary }}
+                />
+              )}
+              {course.description && (
+                <div
+                  className="text-gray-700 text-sm leading-relaxed"
+                  dangerouslySetInnerHTML={{ __html: course.description }}
+                />
+              )}
+            </div>
+
+            {/* What You'll Learn */}
+            {course.whatYouWillLearn && course.whatYouWillLearn.length > 0 && (
+              <div className="mb-8 pb-8 border-b border-gray-300">
+                <h2 className="text-xl font-bold text-gray-900 mb-4">What You'll Learn</h2>
+                <div className="grid md:grid-cols-2 gap-3">
+                  {course.whatYouWillLearn.map((item: string, i: number) => (
+                    <div key={i} className="flex items-start gap-3">
+                      <CheckCircle2 className="h-5 w-5 text-green-600 flex-shrink-0" />
+                      <span className="text-sm text-gray-700">{item}</span>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            )}
+
+            {/* Requirements */}
+            {course.requirements && course.requirements.length > 0 && (
+              <div className="mb-8 pb-8 border-b border-gray-300">
+                <h2 className="text-xl font-bold text-gray-900 mb-4">Requirements</h2>
+                <ul className="space-y-2">
+                  {course.requirements.map((item: string, i: number) => (
+                    <li key={i} className="flex items-start gap-2">
+                      <span className="text-gray-400 text-sm">•</span>
+                      <span className="text-sm text-gray-700">{item}</span>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            )}
+
+            {/* Target Audience */}
+            {course.targetAudience && course.targetAudience.length > 0 && (
+              <div className="mb-8 pb-8 border-b border-gray-300">
+                <h2 className="text-xl font-bold text-gray-900 mb-4">Who This Course Is For</h2>
+                <ul className="space-y-2">
+                  {course.targetAudience.map((item: string, i: number) => (
+                    <li key={i} className="flex items-start gap-2">
+                      <span className="text-gray-400 text-sm">•</span>
+                      <span className="text-sm text-gray-700">{item}</span>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            )}
+
+            {/* Ratings */}
+            {ratingSummary && (
+              <div className="mb-8">
+                <div className="flex items-center gap-4 mb-6">
+                  <div className="text-5xl font-bold text-yellow-500">
+                    {ratingSummary.averageRating?.toFixed(1)}
+                  </div>
+                  <div>
+                    <div className="flex items-center gap-1 mb-1">
+                      {[1, 2, 3, 4, 5].map((star) => (
+                        <svg
+                          key={star}
+                          className={`w-4 h-4 ${star <= Math.round(ratingSummary.averageRating || 0) ? 'text-yellow-400 fill-yellow-400' : 'text-gray-300 fill-gray-300'}`}
+                          viewBox="0 0 24 24"
+                        >
+                          <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" />
+                        </svg>
+                      ))}
+                    </div>
+                    <p className="text-sm text-gray-600">
+                      Course Rating • {ratingSummary.totalRatings} ratings
+                    </p>
+                  </div>
+                </div>
+
+                {ratings && ratings.slice(0, 2).map((review: any) => (
+                  <div key={review.id} className="mb-4 p-4 border border-gray-200 rounded-lg">
+                    <div className="flex items-center gap-3 mb-2">
+                      <div className="w-9 h-9 rounded-full bg-theme-accent-primary flex items-center justify-center text-white font-semibold text-sm">
+                        {(review.reviewerName || 'U').charAt(0)}
+                      </div>
+                      <div>
+                        <p className="font-medium text-sm">{review.reviewerName}</p>
+                        <div className="flex items-center gap-1">
+                          {[1, 2, 3, 4, 5].map((star) => (
+                            <svg
+                              key={star}
+                              className={`w-3 h-3 ${star <= (review.rating || 0) ? 'text-yellow-400 fill-yellow-400' : 'text-gray-300 fill-gray-300'}`}
+                              viewBox="0 0 24 24"
+                            >
+                              <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" />
+                            </svg>
+                          ))}
+                        </div>
+                      </div>
+                    </div>
+                    {review.review && (
+                      <p className="text-sm text-gray-700">{review.review}</p>
+                    )}
+                  </div>
+                ))}
+              </div>
+            )}
+          </div>
+        )}
+
+        {/* Curriculum Tab */}
+        {activeTab === 'curriculum' && (
+          <div className="mb-8">
+            <h2 className="text-xl font-bold text-gray-900 mb-4">Curriculum</h2>
+            <div className="space-y-1">
+              {sections.map((section: any) => (
+                <div key={section.id} className="border border-gray-200 rounded overflow-hidden">
+                  <button
+                    onClick={() => toggleSection(section.id)}
+                    className="w-full flex items-center justify-between p-3 hover:bg-gray-50 transition-colors text-left cursor-pointer"
+                  >
+                    <div className="flex items-center gap-2">
+                      {expandedSections.has(section.id) ? (
+                        <ChevronDown className="h-4 w-4 text-gray-600" />
+                      ) : (
+                        <ChevronRight className="h-4 w-4 text-gray-600" />
+                      )}
+                      <div>
+                        <span className="text-sm font-medium text-gray-900">{section.title}</span>
+                        {section.description && (
+                          <p className="text-xs text-gray-500 mt-0.5">{section.description}</p>
+                        )}
+                      </div>
+                    </div>
+                    <span className="text-xs text-gray-500">
+                      {section.activities?.length || 0} lessons
+                    </span>
+                  </button>
+
+                  {expandedSections.has(section.id) && (
+                    <div className="bg-gray-50 border-t border-gray-200">
+                      {section.activities?.map((activity: any) => {
+                        const isSelected = selectedLesson === activity.id;
+                        return (
+                          <button
+                            key={activity.id}
+                            onClick={() => setSelectedLesson(activity.id)}
+                            className={`w-full flex items-start justify-between gap-3 px-10 py-3 border-b border-gray-100 last:border-b-0 transition-colors text-left cursor-pointer ${
+                              isSelected
+                                ? 'bg-blue-50 border-l-4 border-l-blue-600'
+                                : 'hover:bg-gray-100'
+                            }`}
+                          >
+                            <div className="flex items-start gap-3 flex-1">
+                              <PlayCircle
+                                className={`h-4 w-4 flex-shrink-0 mt-0.5 ${isSelected ? 'text-blue-600' : 'text-gray-400'}`}
+                              />
+                              <div className="flex-1">
+                                <div className="flex items-center gap-2">
+                                  <span className={`text-xs font-medium ${isSelected ? 'text-blue-600' : 'text-gray-700'}`}>
+                                    {activity.title}
+                                  </span>
+                                  {activity.freePreview && (
+                                    <span className="text-xs px-2 py-0.5 bg-blue-100 text-blue-700 rounded">
+                                      Preview
+                                    </span>
+                                  )}
+                                </div>
+                              </div>
+                            </div>
+                            <div className="flex items-center gap-3 flex-shrink-0">
+                              {activity.downloadable && (
+                                <Download className="h-3 w-3 text-gray-400" />
+                              )}
+                              {activity.duration && (
+                                <span className="text-xs text-gray-500">
+                                  {typeof activity.duration === 'number'
+                                    ? formatDuration(activity.duration)
+                                    : activity.duration}
+                                </span>
+                              )}
+                            </div>
+                          </button>
+                        );
+                      })}
+                    </div>
+                  )}
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+      </div>
+
+      {/* Related Courses — only on overview */}
+      {activeTab === 'overview' && (relatedCourses.length > 0 || isRelatedLoading) && (
+        <div className="mt-8 bg-[#EEF4FA] border-t border-gray-200 pb-8">
+          <div className="px-4 lg:px-6">
+            <section className="py-10">
+              <div className="flex items-center justify-between mb-6">
+                <h2 className="text-xl font-bold text-gray-900">Related Courses</h2>
+                <button className="text-sm font-medium text-[#49BBBD] hover:underline cursor-pointer">
+                  See all
+                </button>
+              </div>
+
+              {isRelatedLoading ? (
+                <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
+                  {[...Array(4)].map((_, i) => (
+                    <div key={i} className="rounded-2xl bg-gray-100 animate-pulse h-64" />
+                  ))}
+                </div>
+              ) : (
+                <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
+                  {relatedCourses.map((c: any) => {
+                    const cIsFree = c.settings?.pricingType === 'FREE' || (!c.settings?.price && !c.price);
+                    const cPrice = c.settings?.price ?? c.price ?? 0;
+                    const cCurrency = c.settings?.currency ?? c.currency ?? 'USD';
+                    return (
+                      <div
+                        key={c.id}
+                        onClick={() => onRelatedCourseClick(c.id)}
+                        className="bg-white rounded-2xl overflow-hidden shadow-sm border border-gray-100 hover:shadow-md transition-shadow cursor-pointer"
+                      >
+                        <div className="h-40 bg-gray-100 overflow-hidden">
+                          {c.thumbnail && (
+                            <img
+                              src={c.thumbnail}
+                              alt={c.title}
+                              className="w-full h-full object-cover"
+                            />
+                          )}
+                        </div>
+                        <div className="p-4">
+                          <h3 className="font-semibold text-gray-900 text-sm mb-2 line-clamp-2">
+                            {c.title}
+                          </h3>
+                          <div className="flex items-center justify-between text-xs text-gray-500">
+                            <span>{c.totalLessons ?? 0} lessons</span>
+                            <span className={cIsFree ? 'text-green-600 font-medium' : 'font-semibold text-gray-900'}>
+                              {cIsFree ? 'Free' : formatCoursePrice(cPrice, false, cCurrency)}
+                            </span>
+                          </div>
+                        </div>
+                      </div>
+                    );
+                  })}
+                </div>
+              )}
+            </section>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}