✨ Student Review Component

assets/core/ts/components/star-rating.ts

@@ -0,0 +1,58 @@
+import { __ } from '@wordpress/i18n';
+
+interface StarRatingConfig {
+  initialRating?: number;
+  fieldName: string;
+}
+
+const starRatingInput = (config: StarRatingConfig) => ({
+  rating: config.initialRating || 1,
+  hoverRating: 0,
+  fieldName: config.fieldName,
+
+  get effectiveRating() {
+    return this.hoverRating > 0 ? this.hoverRating : this.rating;
+  },
+
+  get feedback(): string {
+    const rating = this.effectiveRating;
+    if (rating === 0) {
+      return '';
+    }
+
+    const labels: Record<number, string> = {
+      1: __('Poor', 'tutor'),
+      2: __('Fair', 'tutor'),
+      3: __('Average', 'tutor'),
+      4: __('Good', 'tutor'),
+      5: __('Amazing', 'tutor'),
+    };
+
+    if (Number.isInteger(rating)) {
+      return labels[rating] || '';
+    }
+
+    // Handle fractional ratings (e.g., 4.5 -> "Good / Amazing")
+    const lower = Math.floor(rating);
+    const upper = Math.ceil(rating);
+
+    const lowerLabel = labels[lower];
+    const upperLabel = labels[upper];
+
+    if (lowerLabel && upperLabel) {
+      return `${lowerLabel} / ${upperLabel}`;
+    }
+
+    return lowerLabel || upperLabel || '';
+  },
+
+  setRating(val: number, onSet: (rating: number) => void) {
+    this.rating = val;
+    onSet(this.rating);
+  },
+});
+
+export const starRatingMeta = {
+  name: 'starRatingInput',
+  component: starRatingInput,
+};

assets/core/ts/index.ts

@@ -16,6 +16,7 @@ import { popoverMeta } from '@Core/ts/components/popover';
 import { previewTriggerMeta } from '@Core/ts/components/preview-trigger';
 import { selectMeta } from '@Core/ts/components/select';
 import { selectDropdownMeta } from '@Core/ts/components/select-dropdown';
+import { starRatingMeta } from '@Core/ts/components/star-rating';
 import { staticsMeta } from '@Core/ts/components/statics';
 import { stepperDropdownMeta } from '@Core/ts/components/stepper-dropdown';
 import { tabsMeta } from '@Core/ts/components/tabs';
@@ -51,6 +52,7 @@ const initializePlugin = () => {
       stepperDropdownMeta,
       selectMeta,
       previewTriggerMeta,
+      starRatingMeta,
       toastMeta,
     ],
     services: [formServiceMeta, modalServiceMeta, queryServiceMeta, toastServiceMeta],

assets/src/js/frontend/dashboard/index.ts

@@ -10,6 +10,7 @@ import { initializeHome } from './pages/instructor/home';
 import { initializeMyCourses } from './pages/my-courses';
 import { initializeOverview } from './pages/overview';
 import { initializeQuizAttempts } from './pages/quiz-attempts';
+import { initializeReviews } from './pages/reviews';
 import { initializeSettings } from './pages/settings';
 
 /**
@@ -24,7 +25,7 @@ const getCurrentPage = (): string => {
   const params = new URLSearchParams(window.location.search);
 
   // Check for subpage parameter - if not 'dashboard', return early
-  const subpage = params.get('subpage');
+  const subpage = params.get('page') ? params.get('subpage') : '';
   if (subpage && subpage !== 'dashboard') {
     return ''; // Not on dashboard, will be handled by early return in initializeDashboard
   }
@@ -63,6 +64,9 @@ const getCurrentPage = (): string => {
   if (path.includes('/discussions')) {
     return 'discussions';
   }
+  if (path.includes('/reviews')) {
+    return 'reviews';
+  }
 
   // Default to home when subpage=dashboard
   return 'home';
@@ -103,6 +107,9 @@ const initializeDashboard = () => {
     case 'discussions':
       initializeDiscussions();
       break;
+    case 'reviews':
+      initializeReviews();
+      break;
     default:
       // eslint-disable-next-line no-console
       console.warn('Unknown dashboard page:', currentPage);

assets/src/js/frontend/dashboard/pages/reviews.ts

@@ -0,0 +1,149 @@
+import { __ } from '@wordpress/i18n';
+
+import { type MutationState } from '@Core/ts/services/Query';
+
+import { wpAjaxInstance } from '@TutorShared/utils/api';
+import endpoints from '@TutorShared/utils/endpoints';
+import { type TutorMutationResponse } from '@TutorShared/utils/types';
+import { convertToErrorMessage } from '@TutorShared/utils/util';
+
+interface ReviewFormProps {
+  comment_ID?: string;
+  comment_post_ID: string;
+  rating: string;
+  comment_content: string;
+}
+
+interface ReviewPayload {
+  course_id: string;
+  review_id?: string;
+  tutor_rating_gen_input: string;
+  review: string;
+}
+
+const reviewDeleteModal = () => {
+  const query = window.TutorCore.query;
+
+  return {
+    query,
+    $el: null as HTMLElement | null,
+    deleteReviewMutation: null as MutationState<unknown> | null,
+
+    init() {
+      if (!this.$el) {
+        return;
+      }
+
+      this.deleteReviewMutation = this.query.useMutation(this.deleteReview, {
+        onSuccess: (data: TutorMutationResponse<string>) => {
+          window.location.reload();
+          window.TutorCore.toast.success(data?.message ?? __('Review deleted successfully', 'tutor'));
+        },
+        onError: (error: Error) => {
+          window.TutorCore.toast.error(error.message || __('Failed to delete review', 'tutor'));
+        },
+      });
+    },
+
+    async handleDeleteReview(reviewId: string) {
+      await this.deleteReviewMutation?.mutate(reviewId);
+    },
+
+    async deleteReview(reviewId: string) {
+      return wpAjaxInstance
+        .post(endpoints.DELETE_REVIEW, {
+          review_id: reviewId,
+        })
+        .then((res) => res.data);
+    },
+  };
+};
+
+const reviewCard = (id: string) => {
+  const query = window.TutorCore.query;
+
+  return {
+    query,
+    id,
+    isEditMode: false,
+    $el: null as HTMLElement | null,
+    $refs: {} as {
+      edit: HTMLButtonElement;
+      delete: HTMLButtonElement;
+      cancel: HTMLButtonElement;
+    },
+    saveRatingMutation: null as MutationState<TutorMutationResponse<string>> | null,
+
+    handlers: {} as { [key: string]: EventListener },
+
+    init() {
+      if (!this.$el) {
+        return;
+      }
+
+      // Bind handlers once to maintain stable references for cleanup
+      this.handlers.toggleEditMode = () => this.toggleEditMode();
+
+      this.$refs.edit?.addEventListener('click', this.handlers.toggleEditMode);
+      this.$refs.cancel?.addEventListener('click', this.handlers.toggleEditMode);
+      this.$refs.delete?.addEventListener('click', this.handlers.onDeleteButtonClick);
+
+      this.saveRatingMutation = this.query.useMutation(this.saveRating, {
+        onSuccess: (data: TutorMutationResponse<string>) => {
+          this.isEditMode = false;
+          window.TutorCore.toast.success(data.message);
+          window.location.reload();
+        },
+        onError: (error: Error) => {
+          window.TutorCore.toast.error(convertToErrorMessage(error));
+        },
+      });
+    },
+
+    destroy() {
+      this.$refs.edit?.removeEventListener('click', this.handlers.toggleEditMode);
+      this.$refs.cancel?.removeEventListener('click', this.handlers.toggleEditMode);
+      this.$refs.delete?.removeEventListener('click', this.handlers.onDeleteButtonClick);
+    },
+
+    async handleReviewSubmit(data: ReviewFormProps) {
+      const payload = this.convertFormDataToPayload(data);
+      await this.saveRatingMutation?.mutate(payload);
+    },
+
+    async saveRating(payload: ReviewPayload) {
+      return wpAjaxInstance.post(endpoints.PLACE_RATING, payload).then((res) => res.data);
+    },
+
+    convertFormDataToPayload(data: ReviewFormProps): ReviewPayload {
+      return {
+        ...(data.comment_ID && { comment_id: data.comment_ID }),
+        course_id: data.comment_post_ID,
+        tutor_rating_gen_input: data.rating,
+        review: data.comment_content,
+      };
+    },
+
+    toggleEditMode() {
+      this.isEditMode = !this.isEditMode;
+    },
+  };
+};
+
+const reviewServicesMeta = {
+  name: 'reviewDeleteModal',
+  component: reviewDeleteModal,
+};
+
+const reviewCardMeta = {
+  name: 'reviewCard',
+  component: reviewCard,
+};
+
+export const initializeReviews = () => {
+  window.TutorComponentRegistry.registerAll({
+    components: [reviewCardMeta, reviewServicesMeta],
+  });
+
+  window.TutorComponentRegistry.initWithAlpine(window.Alpine);
+};

assets/src/js/v3/shared/utils/endpoints.ts

@@ -167,6 +167,10 @@ const endpoints = {
   // Announcement
   CREATE_ANNOUNCEMENT: 'tutor_announcement_create',
   DELETE_ANNOUNCEMENT: 'tutor_announcement_delete',
+
+  //Reviews
+  PLACE_RATING: 'tutor_place_rating',
+  DELETE_REVIEW: 'delete_tutor_review',
 } as const;
 
 export default endpoints;

assets/src/scss/frontend/dashboard/_reviews.scss

@@ -12,9 +12,7 @@
     background-color: $tutor-surface-l1;
     border: 1px solid $tutor-border-idle;
     border-radius: $tutor-radius-lg;
-    transition-property: background-color, border-color, opacity;
-    transition-duration: 0.2s;
-    transition-timing-function: ease-in-out;
+    @include tutor-transition((background-color, border-color, opacity));
 
     &:hover {
       background-color: $tutor-surface-l1-hover;
@@ -59,16 +57,30 @@
   &-actions {
     @include tutor-flex(row);
     gap: $tutor-spacing-4;
+    @include tutor-transition(opacity);
     opacity: 0;
-
-    &-button {
-      @include tutor-button-base;
-      @include tutor-button-variant(secondary);
-      @include tutor-button-icon-size(x-small)
-    }
   }
 
   &-text {
     @include tutor-typography('p1', 'regular', 'secondary');
   }
-}
+
+  &-form {
+    @include tutor-flex(column);
+    background-color: $tutor-surface-l1-hover;
+    gap: $tutor-spacing-5;
+    padding: $tutor-spacing-6;
+
+    &-fields {
+      @include tutor-flex(column);
+      gap: $tutor-spacing-6;
+      width: 100%;
+    }
+  }
+
+  &-student {
+    @include tutor-flex(row, center);
+    gap: $tutor-spacing-4;
+    margin-top: $tutor-spacing-4;
+  }
+}

assets/src/scss/frontend/dashboard/layout/_profile-pages.scss

@@ -1,10 +1,19 @@
 @use '@Core/scss/mixins' as *;
 @use '@Core/scss/tokens' as *;
 
+body:has(#wpadminbar) {
+  .tutor-profile-header {
+    top: 32px;
+  }
+}
+
 .tutor-profile-header {
   background-color: $tutor-surface-base;
   border-bottom: 1px solid $tutor-border-idle;
   padding-block: $tutor-spacing-5;
+  position: sticky;
+  top: 0;
+  z-index: $tutor-z-positive;
 
   &-title {
     @include tutor-typography(h4, semibold, primary, heading);

classes/Assets.php

@@ -102,7 +102,7 @@ public function __construct( $register_hooks = true ) {
 		 *
 		 * @since 4.0.0
 		 */
-		add_action( 'wp_enqueue_scripts', array( $this, 'enqueue_scripts' ), PHP_INT_MAX );
+		add_action( 'wp_enqueue_scripts', array( $this, 'enqueue_scripts' ) );
 	}
 
 	/**