From b59b645d6516182c09069d4a9c5b6c555562baa6 Mon Sep 17 00:00:00 2001
From: Victor Jack <67293106+thedon-dev@users.noreply.github.com>
Date: Fri, 14 Aug 2026 12:08:07 +0100
Subject: [PATCH] made the course card clickable everywhere on the body

---
 apps/api/src/__tests__/widget-payload.test.ts | 39 +++++++++++++++++++
 .../features/course/components/card.svelte    | 25 +++++++++++-
 .../src/custom/course-card/course-card.svelte | 19 ++++++++-
 packages/utils/src/validation/course/index.ts |  1 -
 4 files changed, 81 insertions(+), 3 deletions(-)

diff --git a/apps/api/src/__tests__/widget-payload.test.ts b/apps/api/src/__tests__/widget-payload.test.ts
index bdf68fdb..b4055616 100644
--- a/apps/api/src/__tests__/widget-payload.test.ts
+++ b/apps/api/src/__tests__/widget-payload.test.ts
@@ -111,3 +111,42 @@ describe('getWidgetEmbedCode', () => {
     expect(embedCode).toMatch(/^<div[^>]+><\/div>\n<script[^>]+><\/script>$/);
   });
 });
+
+// describe('formatCourseForWidget price', () => {
+//   const baseCourse = {
+//     id: 'course-1',
+//     slug: 'my-course',
+//     title: 'My Course',
+//     description: 'A course',
+//     bannerImage: null,
+//     logo: null,
+//     isPublished: true,
+//     currency: 'USD',
+//     lessonCount: 10,
+//     exerciseCount: 5,
+//     type: 'PUBLIC',
+//     createdAt: new Date().toISOString()
+//   };
+
+//   function format(overrides: Record<string, unknown>) {
+//     const course = { ...baseCourse, ...overrides } as Parameters<typeof formatCourseForWidget>[0];
+//     return formatCourseForWidget(course, []);
+//   }
+
+//   it('renders the price for a paid course', () => {
+//     expect(format({ cost: 100, metadata: { paymentEnabled: true } }).price).toBe('USD 100');
+//   });
+
+//   it('renders the price when paymentEnabled is absent but the cost is positive', () => {
+//     expect(format({ cost: 100, metadata: {} }).price).toBe('USD 100');
+//   });
+
+//   it('renders Free for a free course', () => {
+//     expect(format({ cost: 0, metadata: { paymentEnabled: false } }).price).toBe('Free');
+//     expect(format({ cost: 0, metadata: {} }).price).toBe('Free');
+//   });
+
+//   it('renders Free when a paid course has a zero cost (state blocked by API validation)', () => {
+//     expect(format({ cost: 0, metadata: { paymentEnabled: true } }).price).toBe('Free');
+//   });
+// });
diff --git a/apps/dashboard/src/lib/features/course/components/card.svelte b/apps/dashboard/src/lib/features/course/components/card.svelte
index c77c9a6f..569adb78 100644
--- a/apps/dashboard/src/lib/features/course/components/card.svelte
+++ b/apps/dashboard/src/lib/features/course/components/card.svelte
@@ -166,6 +166,8 @@
     return `/courses/${id}${isLMS ? '/lessons?next=true' : ''}`;
   });
 
+  const isExploreClickable = $derived(!!(isExplore && onExploreClick));
+
   const typeBadge = $derived(
     type && COURSE_TAG[type]
       ? {
@@ -221,10 +223,23 @@
       dateStyle: 'medium'
     }).format(date);
   }
+
+  function handleExploreCardKeydown(event: KeyboardEvent) {
+    if (event.key !== 'Enter' && event.key !== ' ') {
+      return;
+    }
+
+    event.preventDefault();
+    onExploreClick?.();
+  }
 </script>
 
 <CourseCard
   href={courseUrl ? resolve(courseUrl, {}) : undefined}
+  onclick={isExploreClickable ? onExploreClick : undefined}
+  onkeydown={isExploreClickable ? handleExploreCardKeydown : undefined}
+  role={isExploreClickable ? 'button' : undefined}
+  tabindex={isExploreClickable ? 0 : undefined}
   {title}
   {description}
   {typeBadge}
@@ -318,7 +333,15 @@
       </div>
 
       {#if isLMS}
-        <Button variant="outline" onclick={isExplore && onExploreClick ? onExploreClick : undefined}>
+        <Button
+          variant="outline"
+          onclick={(event) => {
+            if (isExploreClickable) {
+              event.stopPropagation();
+              onExploreClick?.();
+            }
+          }}
+        >
           {isCertificateView
             ? $t('certificates.view_certificate')
             : isExplore
diff --git a/packages/ui/src/custom/course-card/course-card.svelte b/packages/ui/src/custom/course-card/course-card.svelte
index 14779edb..52937622 100644
--- a/packages/ui/src/custom/course-card/course-card.svelte
+++ b/packages/ui/src/custom/course-card/course-card.svelte
@@ -25,6 +25,12 @@
       iconClass?: string;
     };
     class?: string;
+    /** Click handler for the card wrapper (e.g. opening a preview modal when `href` is absent) */
+    onclick?: (event: MouseEvent) => void;
+    /** Keyboard handler for the card wrapper when it acts as a clickable region */
+    onkeydown?: (event: KeyboardEvent) => void;
+    role?: string;
+    tabindex?: number;
     /** Custom banner area (e.g. optimized `Image`); overrides `bannerImage` */
     media?: Snippet;
     /** Optional overlay inside the link (e.g. dropdown), typically absolutely positioned */
@@ -42,6 +48,10 @@
     typeBadge,
     visibilityBadge,
     class: className = '',
+    onclick,
+    onkeydown,
+    role,
+    tabindex,
     media,
     overlay,
     tags,
@@ -51,7 +61,14 @@
   const resolvedBannerImage = $derived(bannerImage?.trim() ? bannerImage : DEFAULT_COURSE_BANNER_IMAGE);
 </script>
 
-<Item.Root variant="outline" class={cn('ui:group ui:relative ui:max-w-[320px] ui:p-3!', className)}>
+<Item.Root
+  variant="outline"
+  class={cn('ui:group ui:relative ui:max-w-[320px] ui:p-3!', className)}
+  {onclick}
+  {onkeydown}
+  {role}
+  {tabindex}
+>
   {#snippet child({ props })}
     {#if href}
       <a {href} {...props} class={cn('ui:block', props.class as string)}>
diff --git a/packages/utils/src/validation/course/index.ts b/packages/utils/src/validation/course/index.ts
index 04af0472..db7c8bb4 100644
--- a/packages/utils/src/validation/course/index.ts
+++ b/packages/utils/src/validation/course/index.ts
@@ -12,4 +12,3 @@ export * from './compliance';
 export * from './public-course';
 export * from './section';
 export * from './invite';
-export { ZCourseGetParam, type TCourseGetParam } from './course';