@academy-sdk/sdk 0.1.1 → 0.2.0

package/src/components/pages/BundleDetailPage.tsx

@@ -0,0 +1,388 @@
+import { useState } from 'react';
+import {
+  Check, Tag, X, FileText, Clock, Monitor, BookOpen,
+  ChevronDown, ChevronRight, Package,
+} from 'lucide-react';
+import type { BundleDetailPageProps } 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)}`;
+  }
+}
+
+export function BundleDetailPage(props: Partial<BundleDetailPageProps>) {
+  const noop = (..._args: any[]) => {};
+  const {
+    bundle, isLoading = false, notFound = false, isEnrolled = false,
+    onEnroll = noop as any, isProcessingEnrollment = false,
+    paymentProviders = [], onCheckout = noop as any, isProcessingCheckout = false,
+    couponCode = '', onCouponCodeChange = noop, onApplyCoupon = noop as any,
+    appliedCoupon = null, couponError = null,
+    onCourseClick = noop,
+  } = props;
+
+  const [expandedCourses, setExpandedCourses] = useState<Set<string>>(new Set());
+  const [showCouponInput, setShowCouponInput] = useState(false);
+  const [imgErrors, setImgErrors] = useState<Record<string, boolean>>({});
+
+  if (isLoading) return <LoadingSpinner className="py-20" text="Loading bundle..." />;
+  if (notFound || !bundle) {
+    return (
+      <EmptyState
+        icon={<Package className="w-16 h-16" />}
+        title="Bundle not found"
+        description="The bundle you're looking for doesn't exist."
+      />
+    );
+  }
+
+  const b = bundle as any;
+  const pricingType = b.pricingType || 'FREE';
+  const price = b.price ?? 0;
+  const currency = b.currency ?? 'USD';
+  const isFree = pricingType === 'FREE' || price === 0;
+  const totalCourses = b.courses?.length || 0;
+  const creatorName = b.creator?.name || 'Academy Team';
+  const courses: any[] = b.courses || [];
+
+  const toggleCourse = (courseId: string) => {
+    const next = new Set(expandedCourses);
+    if (next.has(courseId)) next.delete(courseId);
+    else next.add(courseId);
+    setExpandedCourses(next);
+  };
+
+  const getButtonText = () => {
+    if (isEnrolled) return 'You are enrolled';
+    if (isFree) return 'Enroll for free';
+    if (pricingType === 'SUBSCRIPTION') return 'Subscribe to access';
+    if (pricingType === 'INSTALLMENT') return 'Make a payment';
+    return 'Buy bundle';
+  };
+
+  const handleEnrollClick = () => {
+    if (isEnrolled) return;
+    if (isFree) {
+      onEnroll();
+      return;
+    }
+    if (paymentProviders.length === 1) {
+      const p = paymentProviders[0] as any;
+      onCheckout(p.paymentProvider || p.id);
+      return;
+    }
+    onEnroll();
+  };
+
+  // Get up to 3 course thumbnails for the collage
+  const thumbnails = courses
+    .slice(0, 3)
+    .map((c: any) => c.thumbnail || c.course?.thumbnail)
+    .filter(Boolean) as string[];
+
+  const renderEnrollmentCard = () => (
+    <div className="bg-white p-4 rounded-xl shadow-lg border border-gray-100">
+      {/* Thumbnail collage */}
+      {thumbnails.length > 0 ? (
+        <div className="relative w-full h-48 flex mb-4 rounded-lg overflow-hidden">
+          <div className="relative h-full w-1/2 bg-gray-100">
+            <img
+              src={thumbnails[0]}
+              alt="Bundle course 1"
+              className="w-full h-full object-cover"
+              onError={() => setImgErrors((p: Record<string, boolean>) => ({ ...p, t0: true }))}
+            />
+          </div>
+          <div className="flex flex-col w-1/2 h-full">
+            <div className={`relative w-full overflow-hidden bg-gray-100 ${thumbnails.length > 1 ? 'h-1/2' : 'h-full'}`}>
+              {thumbnails[1] && (
+                <img
+                  src={thumbnails[1]}
+                  alt="Bundle course 2"
+                  className="w-full h-full object-cover"
+                  onError={() => setImgErrors((p: Record<string, boolean>) => ({ ...p, t1: true }))}
+                />
+              )}
+            </div>
+            {thumbnails.length > 2 && (
+              <div className="relative w-full h-1/2 overflow-hidden bg-gray-100">
+                <img
+                  src={thumbnails[2]}
+                  alt="Bundle course 3"
+                  className="w-full h-full object-cover"
+                  onError={() => setImgErrors((p: Record<string, boolean>) => ({ ...p, t2: true }))}
+                />
+              </div>
+            )}
+          </div>
+        </div>
+      ) : (
+        <div className="w-full h-48 bg-gray-100 rounded-lg mb-4 flex items-center justify-center">
+          <Package className="w-16 h-16 text-gray-300" />
+        </div>
+      )}
+
+      {/* Enrolled status */}
+      {isEnrolled && (
+        <div className="mb-4 flex items-center gap-2 text-green-600">
+          <Check className="h-5 w-5" />
+          <span className="font-semibold text-sm">Enrolled in this bundle</span>
+        </div>
+      )}
+
+      {/* Price */}
+      <div className="text-center mb-4">
+        <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>
+        {!isFree && !isEnrolled && (
+          <p className="text-sm text-[#49BBBD] font-medium mt-1">Bundle Deal</p>
+        )}
+      </div>
+
+      {/* Main action button */}
+      {!isEnrolled && (
+        <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}
+                  className="px-3 py-2 text-sm bg-theme-accent-primary text-white rounded-md hover:bg-[#3da5a7] disabled:opacity-50 cursor-pointer"
+                >
+                  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>
+      )}
+
+      {/* Bundle included */}
+      <div className="border-t border-gray-200 pt-4">
+        <h3 className="font-semibold text-gray-900 mb-3 text-sm">This bundle 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">{totalCourses} courses</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">
+      {/* Full-width Dark Header */}
+      <div className="relative bg-[#1a2332] text-white px-4 lg:px-8 py-8 lg:py-12 mb-8">
+        {/* Bundle info */}
+        <div className="max-w-7xl lg:pr-110">
+          <h1 className="text-3xl lg:text-4xl font-bold mb-2">{b.title}</h1>
+          {b.description && (
+            <p className="text-base lg:text-lg text-gray-300 mb-4 leading-relaxed">{b.description}</p>
+          )}
+          <div className="flex items-center gap-3 mt-4 lg:mt-6 mb-6 lg:mb-0">
+            <div className="w-10 h-10 rounded-full bg-theme-accent-primary flex items-center justify-center text-white font-semibold">
+              {creatorName.charAt(0).toUpperCase()}
+            </div>
+            <span className="text-sm">{creatorName}</span>
+          </div>
+        </div>
+
+        {/* Mobile enrollment card — inside dark header */}
+        <div className="lg:hidden mt-6">
+          {renderEnrollmentCard()}
+        </div>
+
+        {/* Desktop enrollment card — absolute positioned */}
+        <div className="hidden lg:block absolute right-30 top-15 w-80 z-10">
+          {renderEnrollmentCard()}
+        </div>
+      </div>
+
+      {/* Content */}
+      <div className="px-4 lg:px-6">
+        {/* About This Bundle */}
+        <div className="lg:pr-110 pr-4 mb-8 pb-8 border-b border-gray-300">
+          <h2 className="text-xl font-bold text-gray-900 mb-4">About This Bundle</h2>
+          <div className="text-gray-700 text-sm leading-relaxed">
+            {b.description || 'This comprehensive bundle includes multiple courses designed to help you master your learning goals.'}
+          </div>
+        </div>
+
+        {/* Included Courses */}
+        <div className="mb-8">
+          <h2 className="text-xl font-bold text-gray-900 mb-4">
+            Included Courses{totalCourses > 0 ? ` (${totalCourses})` : ''}
+          </h2>
+
+          {courses.length === 0 ? (
+            <div className="text-center py-8 text-gray-500">
+              No courses included in this bundle yet.
+            </div>
+          ) : (
+            <div className="space-y-1 lg:max-w-[70%] md:max-w-[100%]">
+              {courses
+                .sort((a: any, b: any) => (a.orderIndex ?? 0) - (b.orderIndex ?? 0))
+                .map((bundleCourse: any, index: number) => {
+                  const course = bundleCourse.course || bundleCourse;
+                  const courseId = bundleCourse.courseId || bundleCourse.id || course.id;
+                  const courseThumbnail = course.thumbnail || bundleCourse.thumbnail;
+                  const isExpanded = expandedCourses.has(courseId);
+                  const isCompleted = bundleCourse.isCompleted;
+
+                  return (
+                    <div key={courseId} className="border border-gray-200 rounded overflow-hidden">
+                      <button
+                        onClick={() => toggleCourse(courseId)}
+                        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-3">
+                          {isExpanded ? (
+                            <ChevronDown className="h-4 w-4 text-gray-600 flex-shrink-0" />
+                          ) : (
+                            <ChevronRight className="h-4 w-4 text-gray-600 flex-shrink-0" />
+                          )}
+                          {/* Course number */}
+                          <div className="w-8 h-8 rounded-full bg-purple-100 text-purple-700 flex items-center justify-center font-bold text-sm flex-shrink-0">
+                            {index + 1}
+                          </div>
+                          {/* Thumbnail */}
+                          {courseThumbnail && !imgErrors[`c-${courseId}`] && (
+                            <img
+                              src={courseThumbnail}
+                              alt={course.title}
+                              className="w-12 h-8 object-cover rounded flex-shrink-0"
+                              onError={() => setImgErrors((p: Record<string, boolean>) => ({ ...p, [`c-${courseId}`]: true }))}
+                            />
+                          )}
+                          <div className="flex-1 min-w-0">
+                            <span className="text-sm font-medium text-gray-900 truncate block">
+                              {course.title || bundleCourse.title || 'Course'}
+                            </span>
+                            {course.summary && (
+                              <p className="text-xs text-gray-500 truncate">{course.summary}</p>
+                            )}
+                          </div>
+                        </div>
+                        <div className="flex items-center gap-2 flex-shrink-0 ml-2">
+                          {isCompleted && (
+                            <Check className="h-4 w-4 text-green-600" />
+                          )}
+                        </div>
+                      </button>
+
+                      {isExpanded && (
+                        <div className="px-4 py-3 bg-gray-50 border-t border-gray-200">
+                          <div className="flex items-center gap-4 text-xs text-gray-500 mb-3">
+                            <div className="flex items-center gap-1">
+                              <BookOpen className="h-4 w-4" />
+                              <span>Course {index + 1}</span>
+                            </div>
+                            {course.status && (
+                              <div className="flex items-center gap-1">
+                                <div className={`w-2 h-2 rounded-full ${course.status === 'PUBLISHED' ? 'bg-green-500' : 'bg-gray-400'}`} />
+                                <span className="capitalize">{course.status.toLowerCase()}</span>
+                              </div>
+                            )}
+                          </div>
+                          <button
+                            onClick={() => onCourseClick(courseId, bundleCourse.enrollmentId)}
+                            className="text-sm font-medium text-[#49BBBD] hover:text-[#3da5a7] hover:underline cursor-pointer"
+                          >
+                            {isEnrolled ? 'Go to course →' : 'View course →'}
+                          </button>
+                        </div>
+                      )}
+                    </div>
+                  );
+                })}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/components/pages/CatalogBundlesPage.tsx

@@ -0,0 +1,96 @@
+import { Search, X } from 'lucide-react';
+import type { CatalogBundlesPageProps } from '../../contracts/pages.contract';
+import { Pagination } from '../molecules/Pagination';
+import { CourseCard } from '../molecules/CourseCard';
+
+export function CatalogBundlesPage(props: Partial<CatalogBundlesPageProps>) {
+  const noop = (..._args: any[]) => {};
+  const { bundles = [], meta, loading = false, searchQuery = '', page = 1, onSearchChange = noop, onPageChange = noop, onBundleClick = noop } = props;
+
+  return (
+    <div className="space-y-6">
+      {/* Search Bar */}
+      <div className="relative">
+        <Search className="absolute left-3 top-1/2 h-5 w-5 -translate-y-1/2 text-theme-text-secondary z-10" />
+        <input
+          type="text"
+          placeholder="Search bundles..."
+          value={searchQuery}
+          onChange={(e) => onSearchChange(e.target.value)}
+          className="w-full rounded-lg border border-theme-border-primary bg-theme-bg-secondary pl-10 pr-10 py-2 text-sm text-theme-text-primary placeholder:text-theme-text-secondary focus:outline-none focus:ring-2 focus:ring-theme-accent-primary/30 focus:border-theme-accent-primary transition-all"
+        />
+        {searchQuery && (
+          <button
+            onClick={() => onSearchChange('')}
+            className="absolute right-3 top-1/2 -translate-y-1/2 text-theme-text-secondary hover:text-theme-text-primary transition-colors"
+          >
+            <X className="h-5 w-5" />
+          </button>
+        )}
+      </div>
+
+      {/* Content */}
+      {loading ? (
+        <div className="flex flex-col items-center justify-center py-16">
+          <div className="h-12 w-12 animate-spin rounded-full border-4 border-theme-border-primary border-t-theme-accent-primary"></div>
+          <p className="mt-4 text-theme-text-secondary">Loading bundles...</p>
+        </div>
+      ) : bundles.length === 0 ? (
+        <div className="flex flex-col items-center justify-center rounded-lg border-2 border-dashed border-theme-border-primary bg-theme-bg-secondary py-16 text-center">
+          <div className="text-4xl mb-4">📦</div>
+          <h3 className="text-xl font-semibold text-theme-text-primary">No bundles found</h3>
+          <p className="mt-2 max-w-md text-theme-text-secondary">
+            Try adjusting your search query or check back later for new bundles
+          </p>
+        </div>
+      ) : (
+        <>
+          <div className="grid gap-6 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
+            {bundles.map((bundle: any) => {
+              const priceValue = bundle.price !== undefined && bundle.price !== null ? bundle.price : (bundle.settings?.price || 0);
+              const pricingType = bundle.pricingType || bundle.settings?.pricingType;
+              const isFree = pricingType === 'FREE' || !priceValue || priceValue === 0;
+              const thumbnails: string[] = bundle.courses && bundle.courses.length > 0
+                ? bundle.courses
+                    .sort((a: any, b: any) => a.orderIndex - b.orderIndex)
+                    .slice(0, 3)
+                    .map((c: any) => c.thumbnail)
+                : (bundle.thumbnails || []);
+              return (
+                <CourseCard
+                  key={bundle.id}
+                  id={bundle.id}
+                  title={bundle.title || ''}
+                  thumbnail={thumbnails[0]}
+                  thumbnails={thumbnails}
+                  totalLessons={bundle.totalCourses || bundle.courses?.length || 0}
+                  progress={0}
+                  showProgress={false}
+                  isFree={isFree}
+                  price={priceValue}
+                  showPrice={true}
+                  currency={bundle.currency}
+                  description={bundle.description || ''}
+                  isBundle={true}
+                  onClick={() => onBundleClick(bundle.id)}
+                />
+              );
+            })}
+          </div>
+          {meta && meta.totalPages > 1 && (
+            <Pagination
+              currentPage={page}
+              totalPages={meta.totalPages}
+              total={meta.total}
+              pageSize={meta.limit || 12}
+              hasNextPage={page < meta.totalPages}
+              hasPreviousPage={page > 1}
+              onPageChange={onPageChange}
+            />
+          )}
+        </>
+
+      )}
+    </div>
+  );
+}