@academy-sdk/sdk 0.1.1 → 0.2.1

package/src/components/pages/MessagesPage.tsx

@@ -0,0 +1,285 @@
+'use client';
+
+import { useState, useRef, useEffect } from 'react';
+import { MessageSquare, Send, ArrowLeft, Plus, ChevronUp, Loader2, Search } from 'lucide-react';
+import type { MessagesPageProps } from '../../contracts/pages.contract';
+import { cn } from '../utils';
+
+function formatTime(timestamp: string) {
+  try {
+    const date = new Date(timestamp);
+    const now = new Date();
+    const diffDays = Math.floor((now.getTime() - date.getTime()) / (1000 * 60 * 60 * 24));
+    if (diffDays === 0) return date.toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit' });
+    if (diffDays === 1) return 'Yesterday';
+    if (diffDays < 7) return date.toLocaleDateString('en-US', { weekday: 'short' });
+    return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
+  } catch { return ''; }
+}
+
+function timeAgo(timestamp: string) {
+  try {
+    const diff = Date.now() - new Date(timestamp).getTime();
+    const mins = Math.floor(diff / 60000);
+    if (mins < 1) return 'just now';
+    if (mins < 60) return `${mins}m`;
+    const hrs = Math.floor(mins / 60);
+    if (hrs < 24) return `${hrs}h`;
+    return `${Math.floor(hrs / 24)}d`;
+  } catch { return ''; }
+}
+
+export function MessagesPage(props: Partial<MessagesPageProps>) {
+  const noop = (..._args: any[]) => {};
+  const {
+    conversations = [], isLoadingConversations = false,
+    selectedConversation, onSelectConversation = noop,
+    messages = [], isLoadingMessages = false, isLoadingMore = false, hasMoreMessages = false, onLoadMoreMessages = noop,
+    onSendMessage = noop as any, isSending = false,
+    searchQuery = '', onSearchChange = noop,
+    showNewMessageDialog = false, onNewMessageDialogChange = noop,
+    mobileView = 'list' as const, onMobileViewChange = noop,
+    currentUserId = 'student-current',
+  } = props;
+
+  const [messageText, setMessageText] = useState('');
+  const messagesEndRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+  }, [messages]);
+
+  const handleSend = async () => {
+    if (!messageText.trim()) return;
+    const text = messageText.trim();
+    setMessageText('');
+    await onSendMessage(text);
+  };
+
+  const selectedName = selectedConversation?.participant?.name || selectedConversation?.name || 'Conversation';
+  const selectedCourse = selectedConversation?.courseContext?.courseName || '';
+
+  return (
+    <div className="flex h-[calc(100vh-4rem)] -mx-4 lg:-mx-6 lg:-my-4 pt-3 overflow-hidden bg-theme-bg-secondary">
+
+      {/* ── Left panel: Conversation List ── */}
+      <div className={cn(
+        'w-full lg:w-80 shrink-0 border-r border-theme-border-primary flex flex-col bg-theme-bg-secondary',
+        mobileView === 'chat' ? 'hidden lg:flex' : 'flex'
+      )}>
+        {/* Header */}
+        <div className="px-4 pt-5 pb-3">
+          <div className="flex items-center justify-between mb-4">
+            <h1 className="text-xl font-bold text-theme-text-primary">Messages</h1>
+            <button
+              onClick={() => onNewMessageDialogChange(true)}
+              title="New message"
+              className="inline-flex items-center justify-center w-8 h-8 rounded-full bg-[rgb(var(--accent-primary))] text-white hover:opacity-90 transition-opacity shadow-sm cursor-pointer"
+            >
+              <Plus className="h-4 w-4" />
+            </button>
+          </div>
+          {/* Search */}
+          <div className="relative">
+            <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-theme-text-secondary" />
+            <input
+              type="text"
+              value={searchQuery}
+              onChange={(e) => onSearchChange(e.target.value)}
+              placeholder="Search messages..."
+              className="w-full rounded-lg border border-theme-border-primary bg-theme-bg-primary pl-10 pr-4 py-2.5 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-colors"
+            />
+          </div>
+        </div>
+
+        {/* Conversation list */}
+        <div className="flex-1 overflow-y-auto">
+          {isLoadingConversations ? (
+            <div className="flex justify-center py-8">
+              <div className="h-8 w-8 animate-spin rounded-full border-4 border-theme-border-primary border-t-theme-accent-primary" />
+            </div>
+          ) : conversations.length === 0 ? (
+            <div className="flex flex-col items-center justify-center py-12 px-4 text-center">
+              <div className="w-16 h-16 rounded-full bg-theme-bg-tertiary flex items-center justify-center mb-4">
+                <MessageSquare className="w-8 h-8 text-theme-text-secondary" />
+              </div>
+              <p className="text-sm text-theme-text-secondary">No conversations found</p>
+            </div>
+          ) : (
+            conversations.map((conv: any) => {
+              const convId = conv.id || conv.conversationId;
+              const isSelected = selectedConversation?.id === convId;
+              const name = conv.participant?.name || conv.name || conv.courseContext?.courseName || 'Conversation';
+              const initials = name.split(' ').map((n: string) => n[0]).join('').toUpperCase().slice(0, 2);
+              const lastMsg = conv.lastMessage?.content || '';
+              const lastTime = conv.lastMessage?.timestamp;
+              const courseName = conv.courseContext?.courseName;
+              const unread = conv.unreadCount || 0;
+
+              return (
+                <button
+                  key={convId}
+                  onClick={() => { onSelectConversation(conv); onMobileViewChange('chat'); }}
+                  className={cn(
+                    'w-full flex items-start gap-3 px-4 py-3.5 text-left transition-colors border-l-[3px] border-transparent hover:bg-theme-bg-tertiary/50 cursor-pointer',
+                    isSelected && 'bg-theme-accent-primary/5 border-l-[rgb(var(--accent-primary))]'
+                  )}
+                >
+                  {/* Avatar initials */}
+                  <div className="relative shrink-0">
+                    <div className="w-10 h-10 rounded-full bg-theme-accent-primary/10 flex items-center justify-center">
+                      <span className="text-sm font-semibold text-[rgb(var(--accent-primary))]">{initials}</span>
+                    </div>
+                    {unread > 0 && (
+                      <span className="absolute -top-1 -right-1 w-5 h-5 rounded-full bg-[rgb(var(--accent-primary))] text-white text-[10px] font-bold flex items-center justify-center">
+                        {unread > 9 ? '9+' : unread}
+                      </span>
+                    )}
+                  </div>
+                  {/* Content */}
+                  <div className="flex-1 min-w-0">
+                    <div className="flex items-center justify-between gap-2">
+                      <span className="text-sm font-semibold text-theme-text-primary truncate">{name}</span>
+                      {lastTime && (
+                        <span className="text-xs text-theme-text-secondary whitespace-nowrap">{timeAgo(lastTime)}</span>
+                      )}
+                    </div>
+                    <p className="text-xs text-theme-text-secondary truncate mt-0.5">{lastMsg}</p>
+                    {courseName && (
+                      <p className="text-xs text-[rgb(var(--accent-primary))] mt-1 truncate">{courseName}</p>
+                    )}
+                  </div>
+                </button>
+              );
+            })
+          )}
+        </div>
+      </div>
+
+      {/* ── Right: Chat Area ── */}
+      <div className={cn(
+        'flex-1 min-w-0 flex flex-col bg-theme-bg-primary',
+        mobileView === 'list' ? 'hidden lg:flex' : 'flex'
+      )}>
+        {!selectedConversation ? (
+          <div className="flex-1 flex flex-col items-center justify-center gap-3 text-center px-4">
+            <div className="w-20 h-20 rounded-full bg-theme-bg-tertiary flex items-center justify-center">
+              <MessageSquare className="w-10 h-10 text-theme-text-secondary" />
+            </div>
+            <h2 className="text-lg font-semibold text-theme-text-primary">Select a conversation</h2>
+            <p className="text-sm text-theme-text-secondary max-w-xs">Choose a conversation from the list or start a new one</p>
+            <button
+              onClick={() => onNewMessageDialogChange(true)}
+              className="mt-2 inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-[rgb(var(--accent-primary))] text-white text-sm font-medium hover:opacity-90 transition-opacity cursor-pointer"
+            >
+              <Plus className="w-4 h-4" />
+              New Message
+            </button>
+          </div>
+        ) : (
+          <>
+            {/* Chat Header */}
+            <div className="px-4 py-3 border-b border-theme-border-primary flex items-center gap-3 bg-theme-bg-secondary">
+              <button
+                onClick={() => onMobileViewChange('list')}
+                className="lg:hidden text-theme-text-secondary hover:text-theme-text-primary cursor-pointer"
+              >
+                <ArrowLeft className="w-5 h-5" />
+              </button>
+              <div className="w-9 h-9 rounded-full bg-theme-accent-primary/10 flex items-center justify-center shrink-0">
+                <span className="text-sm font-semibold text-[rgb(var(--accent-primary))]">
+                  {selectedName.split(' ').map((n: string) => n[0]).join('').toUpperCase().slice(0, 2)}
+                </span>
+              </div>
+              <div className="min-w-0">
+                <p className="font-semibold text-sm text-theme-text-primary truncate">{selectedName}</p>
+                {selectedCourse && (
+                  <p className="text-xs text-[rgb(var(--accent-primary))] truncate">{selectedCourse}</p>
+                )}
+              </div>
+            </div>
+
+            {/* Messages */}
+            <div className="flex-1 overflow-y-auto px-4 py-4 space-y-3">
+              {hasMoreMessages && (
+                <div className="flex justify-center pb-2">
+                  <button
+                    onClick={onLoadMoreMessages}
+                    disabled={isLoadingMore}
+                    className="inline-flex items-center gap-1 text-xs text-[rgb(var(--accent-primary))] hover:opacity-80 cursor-pointer disabled:opacity-50"
+                  >
+                    {isLoadingMore ? <Loader2 className="w-3 h-3 animate-spin" /> : <ChevronUp className="w-3 h-3" />}
+                    Load older messages
+                  </button>
+                </div>
+              )}
+
+              {isLoadingMessages ? (
+                <div className="flex justify-center py-8">
+                  <div className="h-8 w-8 animate-spin rounded-full border-4 border-theme-border-primary border-t-theme-accent-primary" />
+                </div>
+              ) : messages.length === 0 ? (
+                <div className="flex flex-col items-center justify-center py-12 text-center">
+                  <MessageSquare className="w-10 h-10 text-theme-text-secondary mb-3" />
+                  <p className="text-sm text-theme-text-secondary">No messages yet. Say hello!</p>
+                </div>
+              ) : (
+                messages.map((msg: any) => {
+                  const isOwn = msg.senderId === currentUserId || msg.senderRole === 'STUDENT';
+                  return (
+                    <div key={msg.id} className={cn('flex', isOwn ? 'justify-end' : 'justify-start')}>
+                      <div className={cn('flex items-end gap-2 max-w-[75%]', isOwn && 'flex-row-reverse')}>
+                        {!isOwn && (
+                          <div className="w-7 h-7 rounded-full bg-theme-accent-primary/10 flex items-center justify-center shrink-0">
+                            <span className="text-[10px] font-semibold text-[rgb(var(--accent-primary))]">
+                              {selectedName.charAt(0).toUpperCase()}
+                            </span>
+                          </div>
+                        )}
+                        <div>
+                          <div className={cn(
+                            'rounded-2xl px-4 py-2.5 text-sm leading-relaxed',
+                            isOwn
+                              ? 'bg-[rgb(var(--accent-primary))] text-white rounded-br-md'
+                              : 'bg-theme-bg-tertiary text-theme-text-primary rounded-bl-md'
+                          )}>
+                            {msg.content}
+                          </div>
+                          <p className={cn('text-[10px] text-theme-text-muted mt-1', isOwn ? 'text-right' : 'text-left')}>
+                            {msg.timestamp ? formatTime(msg.timestamp) : ''}
+                          </p>
+                        </div>
+                      </div>
+                    </div>
+                  );
+                })
+              )}
+              <div ref={messagesEndRef} />
+            </div>
+
+            {/* Send Input */}
+            <div className="px-4 py-3 border-t border-theme-border-primary bg-theme-bg-secondary">
+              <div className="flex items-center gap-2">
+                <input
+                  type="text"
+                  value={messageText}
+                  onChange={(e) => setMessageText(e.target.value)}
+                  onKeyDown={(e) => { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); handleSend(); } }}
+                  placeholder="Type a message..."
+                  className="flex-1 h-10 px-4 text-sm rounded-full border border-theme-border-primary bg-theme-bg-primary text-theme-text-primary placeholder:text-theme-text-muted focus:outline-none focus:border-theme-accent-primary transition-colors"
+                />
+                <button
+                  onClick={handleSend}
+                  disabled={isSending || !messageText.trim()}
+                  className="flex items-center justify-center w-10 h-10 rounded-full bg-[rgb(var(--accent-primary))] text-white hover:opacity-90 disabled:opacity-50 transition-opacity shrink-0 cursor-pointer"
+                >
+                  {isSending ? <Loader2 className="w-4 h-4 animate-spin" /> : <Send className="w-4 h-4" />}
+                </button>
+              </div>
+            </div>
+          </>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/components/pages/MyLearningPage.tsx

@@ -0,0 +1,239 @@
+import { useState } from 'react';
+import { Search, X, ChevronDown } from 'lucide-react';
+import type { MyLearningPageProps } from '../../contracts/pages.contract';
+import { CourseCard } from '../molecules/CourseCard';
+import { Pagination } from '../molecules/Pagination';
+
+export function MyLearningPage(props: Partial<MyLearningPageProps>) {
+  const noop = () => {};
+  const {
+    courses = [], coursesMeta, coursesLoading, coursesPage = 1, onCoursesPageChange = noop,
+    bundles = [], bundlesMeta, bundlesLoading, bundlesPage = 1, onBundlesPageChange = noop,
+    searchQuery = '', onSearchChange = noop,
+    activeTab = 'courses', onTabChange = noop,
+    statusFilter = 'all', onStatusFilterChange = noop,
+    onCourseClick = noop, onBundleClick = noop,
+  } = props;
+
+  const [showStatusDropdown, setShowStatusDropdown] = useState(false);
+
+  const isLoading = activeTab === 'courses' ? !!coursesLoading : !!bundlesLoading;
+  const currentPage = activeTab === 'courses' ? coursesPage : bundlesPage;
+  const meta = activeTab === 'courses' ? coursesMeta : bundlesMeta;
+  const onPageChange = activeTab === 'courses' ? onCoursesPageChange : onBundlesPageChange;
+  const isSearchMode = Boolean(searchQuery.trim());
+
+  const getStatusLabel = () => {
+    switch (statusFilter) {
+      case 'in-progress': return 'In Progress';
+      case 'completed': return 'Completed';
+      default: return 'All Status';
+    }
+  };
+
+  const handleStatusFilterChange = (status: string) => {
+    onStatusFilterChange(status);
+    setShowStatusDropdown(false);
+  };
+
+  return (
+    <div className="container mx-auto space-y-6">
+      {/* Header */}
+      <div>
+        <h1 className="text-3xl font-bold text-theme-text-primary">My Learning Content</h1>
+        <p className="mt-2 text-lg text-theme-text-secondary">Continue your learning journey with courses and bundles</p>
+      </div>
+
+      {/* Search Bar and Status Filter */}
+      <div className="flex gap-4">
+        <div className="relative flex-1">
+          <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 ${activeTab}...`}
+            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>
+
+        {/* Status Filter Dropdown */}
+        {!isSearchMode && (
+          <div className="relative">
+            <button
+              onClick={() => setShowStatusDropdown(!showStatusDropdown)}
+              className="flex items-center gap-2 min-w-[150px] justify-between px-4 py-2 border border-theme-border-primary rounded-lg text-sm text-theme-text-primary bg-theme-bg-secondary hover:bg-theme-bg-tertiary transition-colors cursor-pointer"
+            >
+              {getStatusLabel()}
+              <ChevronDown className="h-4 w-4" />
+            </button>
+            {showStatusDropdown && (
+              <div className="absolute right-0 mt-2 w-48 rounded-lg border border-theme-border-primary bg-theme-bg-secondary shadow-lg z-10">
+                {(['all', 'in-progress', 'completed'] as const).map((s) => (
+                  <button
+                    key={s}
+                    onClick={() => handleStatusFilterChange(s)}
+                    className={`w-full text-left px-4 py-2 hover:bg-theme-bg-tertiary transition-colors ${statusFilter === s ? 'bg-theme-bg-tertiary text-theme-accent-primary font-medium' : 'text-theme-text-primary'}`}
+                  >
+                    {s === 'all' ? 'All Status' : s === 'in-progress' ? 'In Progress' : 'Completed'}
+                  </button>
+                ))}
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+
+      {/* Tabs */}
+      <div className="flex gap-6 border-b border-theme-border-primary">
+        {(['courses', 'bundles'] as const).map((tab) => (
+          <button
+            key={tab}
+            onClick={() => { onTabChange(tab); onSearchChange(''); onStatusFilterChange('all'); }}
+            className={`pb-3 px-0 bg-transparent border-0 font-medium text-sm cursor-pointer capitalize ${
+              activeTab === tab
+                ? 'border-b-2 border-theme-accent-primary text-theme-accent-primary'
+                : 'text-theme-text-secondary hover:text-theme-text-primary border-b-2 border-transparent'
+            }`}
+          >
+            {tab.charAt(0).toUpperCase() + tab.slice(1)}
+          </button>
+        ))}
+      </div>
+
+      {/* Loading */}
+      {isLoading && (
+        <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 {activeTab}...</p>
+        </div>
+      )}
+
+      {/* Courses Empty State */}
+      {!isLoading && activeTab === 'courses' && courses.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 courses found</h3>
+          <p className="mt-2 max-w-md text-theme-text-secondary">
+            {statusFilter === 'all'
+              ? "You don't have any enrolled courses yet"
+              : `You don't have any ${statusFilter === 'in-progress' ? 'in progress' : 'completed'} courses yet`}
+          </p>
+        </div>
+      )}
+
+      {/* Bundles Empty State */}
+      {!isLoading && activeTab === 'bundles' && 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">
+            {statusFilter === 'all'
+              ? "You don't have any enrolled bundles yet"
+              : `You don't have any ${statusFilter === 'in-progress' ? 'in progress' : 'completed'} bundles yet`}
+          </p>
+        </div>
+      )}
+
+      {/* Courses Grid */}
+      {!isLoading && activeTab === 'courses' && courses.length > 0 && (
+        <>
+          <div className="grid gap-6 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
+            {courses.map((enrollment: any) => {
+              const course = enrollment.course || enrollment;
+              const title = course?.title || enrollment.title || '';
+              const thumbnail = course?.thumbnail || enrollment.thumbnail;
+              const totalLessons = enrollment.totalNumberOfActivities || enrollment.totalLessons || 0;
+              const progress = Math.min(enrollment.progressPercentage || enrollment.progress || 0, 100);
+              const status: 'in-progress' | 'completed' | undefined =
+                enrollment.status === 'COMPLETED' ? 'completed' :
+                enrollment.status === 'IN_PROGRESS' ? 'in-progress' : undefined;
+              const description = (course?.summary || enrollment.description || '').replace(/<[^>]*>/g, '');
+              return (
+                <CourseCard
+                  key={enrollment.id}
+                  id={enrollment.id}
+                  title={title}
+                  thumbnail={thumbnail}
+                  totalLessons={totalLessons}
+                  progress={progress}
+                  status={status}
+                  isFree={true}
+                  price={0}
+                  showPrice={false}
+                  showProgress={true}
+                  description={description}
+                  onClick={() => (onCourseClick as any)(course?.id || enrollment.courseId || enrollment.id, enrollment.id)}
+                />
+              );
+            })}
+          </div>
+          {meta && (
+            <Pagination
+              currentPage={currentPage}
+              totalPages={meta.totalPages}
+              total={meta.total}
+              pageSize={meta.limit || 12}
+              hasNextPage={currentPage < meta.totalPages}
+              hasPreviousPage={currentPage > 1}
+              onPageChange={onPageChange}
+            />
+          )}
+        </>
+      )}
+
+      {/* Bundles Grid */}
+      {!isLoading && activeTab === 'bundles' && bundles.length > 0 && (
+        <>
+          <div className="grid gap-6 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
+            {bundles.map((enrollment: any) => {
+              const thumbnails = enrollment.courses?.slice(0, 3).map((c: any) => c.thumbnail).filter(Boolean) as string[] | undefined;
+              const description = enrollment.courses?.[0]?.summary || '';
+              const status: 'in-progress' | 'completed' | undefined =
+                enrollment.status === 'COMPLETED' ? 'completed' :
+                enrollment.status === 'IN_PROGRESS' ? 'in-progress' : undefined;
+              return (
+                <CourseCard
+                  key={enrollment.id}
+                  id={enrollment.id}
+                  title={enrollment.bundleTitle || enrollment.title || ''}
+                  thumbnails={thumbnails}
+                  totalLessons={enrollment.totalCourses || 0}
+                  progress={Math.min(enrollment.progressPercentage || 0, 100)}
+                  status={status}
+                  isFree={true}
+                  price={0}
+                  showPrice={false}
+                  showProgress={true}
+                  description={description}
+                  isBundle={true}
+                  onClick={() => (onBundleClick as any)(enrollment.sourceBundleId || enrollment.bundleId || enrollment.id)}
+                />
+              );
+            })}
+          </div>
+          {meta && (
+            <Pagination
+              currentPage={currentPage}
+              totalPages={meta.totalPages}
+              total={meta.total}
+              pageSize={meta.limit || 12}
+              hasNextPage={currentPage < meta.totalPages}
+              hasPreviousPage={currentPage > 1}
+              onPageChange={onPageChange}
+            />
+          )}
+        </>
+      )}
+    </div>
+  );
+}
+

package/src/components/pages/PaymentCancelPage.tsx

@@ -0,0 +1,74 @@
+import { useEffect, useState } from 'react';
+import { XCircle } from 'lucide-react';
+import type { PaymentCancelPageProps } from '../../contracts/pages.contract';
+
+export function PaymentCancelPage({ onRetry = () => {}, onGoBack = () => {} }: Partial<PaymentCancelPageProps>) {
+  const [countdown, setCountdown] = useState(10);
+
+  useEffect(() => {
+    const timer = setInterval(() => {
+      setCountdown((prev) => {
+        if (prev <= 1) {
+          clearInterval(timer);
+          onGoBack();
+          return 0;
+        }
+        return prev - 1;
+      });
+    }, 1000);
+    return () => clearInterval(timer);
+  }, []);
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100 flex items-center justify-center px-4 py-12">
+      <div className="max-w-lg w-full">
+        <div>
+          {/* Cancel Icon */}
+          <div className="mb-8 flex justify-center">
+            <div className="bg-gradient-to-br from-orange-400 to-orange-500 rounded-full p-5 shadow-lg">
+              <XCircle className="h-16 w-16 text-white" strokeWidth={2.5} />
+            </div>
+          </div>
+
+          {/* Cancel Message */}
+          <h1 className="text-2xl font-bold text-gray-900 mb-3 text-center">
+            Payment Cancelled
+          </h1>
+          <p className="text-gray-600 text-sm mb-8 text-center leading-relaxed">
+            Your payment was cancelled. No charges have been made to your account.
+          </p>
+
+          {/* Info Box */}
+          <div className="mb-6 p-4 bg-blue-50 rounded-xl border border-blue-100">
+            <p className="text-sm text-blue-600 text-center font-medium leading-relaxed">
+              You can complete your purchase anytime. The course will be waiting for you!
+            </p>
+          </div>
+
+          {/* Auto-redirect Notice */}
+          <div className="mb-8 p-4 bg-gradient-to-br from-gray-50 to-gray-100 rounded-xl border border-gray-200">
+            <p className="text-sm text-gray-600 text-center font-medium">
+              Redirecting in {countdown} second{countdown !== 1 ? 's' : ''}...
+            </p>
+          </div>
+
+          {/* Manual Actions */}
+          <div className="flex gap-4 justify-center">
+            <button
+              onClick={onRetry}
+              className="px-6 py-2 bg-theme-accent-primary text-white rounded-lg font-medium hover:opacity-90 transition-opacity cursor-pointer"
+            >
+              Try Again
+            </button>
+            <button
+              onClick={onGoBack}
+              className="px-6 py-2 border border-theme-border-primary rounded-lg font-medium text-theme-text-primary hover:bg-theme-bg-secondary transition-colors cursor-pointer"
+            >
+              Go Back
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/components/pages/PaymentSuccessPage.tsx

@@ -0,0 +1,73 @@
+import { useEffect, useState } from 'react';
+import { CheckCircle, Loader2 } from 'lucide-react';
+import type { PaymentSuccessPageProps } from '../../contracts/pages.contract';
+
+export function PaymentSuccessPage({ onContinueLearning = () => {} }: Partial<PaymentSuccessPageProps>) {
+  const [countdown, setCountdown] = useState(5);
+  const [isRedirecting, setIsRedirecting] = useState(false);
+
+  useEffect(() => {
+    const timer = setInterval(() => {
+      setCountdown((prev) => {
+        if (prev <= 1) {
+          clearInterval(timer);
+          setIsRedirecting(true);
+          onContinueLearning();
+          return 0;
+        }
+        return prev - 1;
+      });
+    }, 1000);
+    return () => clearInterval(timer);
+  }, []);
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100 flex items-center justify-center px-4 py-12">
+      <div className="max-w-lg w-full">
+        <div>
+          {/* Success Icon */}
+          <div className="mb-8 flex justify-center">
+            <div className="relative">
+              <div className="absolute inset-0 bg-green-400 rounded-full animate-ping opacity-20"></div>
+              <div className="relative bg-gradient-to-br from-green-400 to-green-500 rounded-full p-5 shadow-lg">
+                <CheckCircle className="h-16 w-16 text-white" strokeWidth={2.5} />
+              </div>
+            </div>
+          </div>
+
+          {/* Success Message */}
+          <h1 className="text-2xl font-bold text-gray-900 mb-3 text-center">
+            Payment Successful!
+          </h1>
+          <p className="text-gray-600 text-sm mb-8 text-center leading-relaxed">
+            Thank you for your purchase. You're now enrolled in the course and can start learning immediately.
+          </p>
+
+          {/* Auto-redirect Notice */}
+          <div className="mb-8 p-4 bg-blue-50 rounded-xl border border-blue-100">
+            {isRedirecting ? (
+              <div className="flex items-center justify-center gap-2 text-blue-600">
+                <Loader2 className="h-5 w-5 animate-spin" />
+                <span className="text-sm font-medium">Redirecting...</span>
+              </div>
+            ) : (
+              <p className="text-sm text-blue-600 text-center font-medium">
+                Redirecting to course page in {countdown} second{countdown !== 1 ? 's' : ''}...
+              </p>
+            )}
+          </div>
+
+          {/* Manual action */}
+          <div className="text-center">
+            <button
+              onClick={onContinueLearning}
+              className="inline-flex items-center gap-2 px-6 py-2 bg-green-500 text-white rounded-lg font-medium hover:bg-green-600 transition-colors cursor-pointer"
+            >
+              Continue Learning
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}