Merge pull request #7190 from Automattic/add/stylings-for-footer-in-a…

…waiting-grade-quiz-lm Update stylings for footer in awaiting grade quizzes in learning mode
Automattic · Oct 2, 2023 · ad6ac8c · ad6ac8c
2 parents 6a4bc41 + 1a27979
commit ad6ac8c
Show file tree

Hide file tree

Showing 8 changed files with 251 additions and 18 deletions.
diff --git a/assets/css/3rd-party/themes/course/quiz.scss b/assets/css/3rd-party/themes/course/quiz.scss
@@ -12,26 +12,36 @@
 		}
 	}
 }
+
+.wp-block-sensei-lms-quiz-actions {
+	button:disabled {
+		opacity: 0.4;
+	}
+}
+
+#sensei-quiz-list {
+	margin: 0 0 clamp(3.75rem, 2.5rem + 3.333vw, 5rem) 0;
+}
+
 .quiz {
 	.sensei-course-theme__quiz {
 		&__main-content {
 			.wp-block-post-title {
 				margin-bottom: 3.75rem;
 			}
 		}
-		&__footer {
-			.sensei-quiz-actions {
-				.sensei-quiz-action {
-					button {
-						padding: 1rem 32px;
-					}
-				}
-				.sensei-quiz-actions-secondary {
-					.sensei-quiz-action {
-						button {
-							font-family: var( --wp--preset--font-family--body );
-						}
-					}
+	}
+
+	.sensei-quiz-actions {
+		.sensei-quiz-action {
+			button {
+				padding: 1rem 32px;
+			}
+		}
+		.sensei-quiz-actions-secondary {
+			.sensei-quiz-action {
+				button {
+					font-family: var( --wp--preset--font-family--body );
 				}
 			}
 		}

diff --git a/assets/css/frontend.scss b/assets/css/frontend.scss
@@ -302,7 +302,6 @@ a.sensei-certificate-link {
 .quiz {
 	form {
 		#sensei-quiz-list {
-			margin: 0 0 1.618em 0;
 			list-style-position: inside;
 			list-style-type: none;
 			padding-inline-start: 0;
@@ -521,6 +520,11 @@ div.sensei-quiz-actions {
 		.sensei-quiz-action {
 			.button, button {
 				@include button-link;
+				text-decoration: none;
+
+				&:hover {
+					text-decoration: underline;
+				}
 			}
 		}
 	}

diff --git a/assets/css/sensei-course-theme/quiz-compat.scss b/assets/css/sensei-course-theme/quiz-compat.scss
@@ -53,6 +53,22 @@ $textColor: #1E1E1E;
 	}
 }
 
+.wp-block-sensei-lms-quiz-actions {
+	button:disabled {
+		opacity: 0.6;
+	}
+
+	.sensei-quiz-actions-secondary {
+		.sensei-course-theme__button.is-link {
+			color: var(--sensei-primary-color);
+		}
+	}
+}
+
+#sensei-quiz-list {
+	margin: 0 0 3.75rem 0;
+}
+
 .quiz {
 	form {
 		#sensei-quiz-list {

diff --git a/assets/css/sensei-course-theme/quiz.scss b/assets/css/sensei-course-theme/quiz.scss
@@ -201,6 +201,14 @@ $vertical-spacing-desktop: 80px;
 	text-decoration: none;
 }
 
+.wp-block-sensei-lms-quiz-actions {
+	button:disabled {
+		cursor: not-allowed;
+		pointer-events: none;
+		width: auto;
+	}
+}
+
 .sensei-progress-bar {
 	&__bar {
 		height: 12px;

diff --git a/changelog/add-stylings-for-footer-in-awaiting-grade-quiz-lm b/changelog/add-stylings-for-footer-in-awaiting-grade-quiz-lm
@@ -0,0 +1,4 @@
+Significance: minor
+Type: changed
+
+Changed footer style for quizzes awaiting grading
diff --git a/includes/blocks/course-theme/class-lesson-actions.php b/includes/blocks/course-theme/class-lesson-actions.php
@@ -161,6 +161,13 @@ public function render( array $attributes = [] ): string {
 
 		$course_id = Sensei()->lesson->get_course_id( $lesson_id );
 
+		$is_learning_mode  = \Sensei_Course_Theme_Option::has_learning_mode_enabled( $course_id );
+		$is_awaiting_grade = \Sensei_Quiz::is_quiz_awaiting_grade_for_user( $lesson_id, $user_id );
+
+		if ( $is_learning_mode && $is_awaiting_grade && 'quiz' === get_post_type() ) {
+			return '';
+		}
+
 		if (
 			! Sensei_Course::is_user_enrolled( $course_id )
 		) {

diff --git a/includes/class-sensei-quiz.php b/includes/class-sensei-quiz.php
@@ -1856,14 +1856,20 @@ public static function action_buttons() {
 		$lesson_id         = Sensei()->quiz->get_lesson_id();
 		$is_quiz_completed = self::is_quiz_completed();
 		$is_reset_allowed  = self::is_reset_allowed( $lesson_id );
-		$has_actions       = $is_reset_allowed || ! $is_quiz_completed;
+		$course_id         = Sensei()->lesson->get_course_id( $lesson_id );
+		$is_learning_mode  = Sensei_Course_Theme_Option::has_learning_mode_enabled( $course_id );
+		$is_awaiting_grade = self::is_quiz_awaiting_grade_for_user( $lesson_id, get_current_user_id() );
+
+		$show_grade_pending_button = $is_learning_mode && $is_awaiting_grade;
 
 		$wrapper_attributes = get_block_wrapper_attributes(
 			[
 				'class' => 'sensei-quiz-actions',
 			]
 		);
 
+		$has_actions = $is_reset_allowed || ! $is_quiz_completed || $show_grade_pending_button;
+
 		if ( ! $has_actions ) {
 			return;
 		}
@@ -1898,11 +1904,17 @@ class="wp-block-button__link button quiz-submit complete sensei-course-theme__bu
 				</div>
 			<?php endif ?>
 
+			<?php if ( $is_awaiting_grade && $is_learning_mode ) : ?>
+				<button type="button" class="wp-element-button sensei-course-theme__button is-primary" disabled>
+					<?php esc_attr_e( 'Pending teacher grade', 'sensei-lms' ); ?>
+				</button>
+			<?php endif ?>
+
 			<div class="sensei-quiz-actions-secondary">
 				<?php if ( $is_reset_allowed ) : ?>
 					<div class="sensei-quiz-action">
-						<button type="submit" name="quiz_reset" form="sensei-quiz-form" class="quiz-submit reset sensei-stop-double-submission">
-							<?php esc_attr_e( 'Reset Quiz', 'sensei-lms' ); ?>
+						<button type="submit" name="quiz_reset" form="sensei-quiz-form" class="quiz-submit reset sensei-stop-double-submission sensei-course-theme__button is-link">
+							<?php esc_attr_e( 'Restart Quiz', 'sensei-lms' ); ?>
 						</button>
 
 						<input type="hidden" name="woothemes_sensei_reset_quiz_nonce" form="sensei-quiz-form" id="woothemes_sensei_reset_quiz_nonce" value="<?php echo esc_attr( wp_create_nonce( 'woothemes_sensei_reset_quiz_nonce' ) ); ?>" />
@@ -2379,6 +2391,32 @@ public function maybe_create_quiz_progress( $quiz_id = '', $user_id = '' ): void
 
 		$quiz_progress_repository->create( $quiz_id, $user_id );
 	}
+
+	/**
+	 * Check if the quiz is in ungraded state for a user.
+	 *
+	 * @param ?int $lesson_id The lesson ID.
+	 * @param ?int $user_id   The user ID.
+	 *
+	 * @return bool True if the quiz is in ungraded state for the user, false otherwise.
+	 */
+	public static function is_quiz_awaiting_grade_for_user( $lesson_id = null, $user_id = null ) {
+		if ( empty( $lesson_id ) ) {
+			$lesson_id = Sensei()->quiz->get_lesson_id();
+		}
+
+		if ( empty( $user_id ) ) {
+			$user_id = get_current_user_id();
+		}
+
+		if ( empty( $lesson_id ) || empty( $user_id ) || 'lesson' !== get_post_type( $lesson_id ) ) {
+			return false;
+		}
+
+		$lesson_status = \Sensei_Utils::user_lesson_status( $lesson_id, $user_id );
+
+		return $lesson_status && 'ungraded' === $lesson_status->comment_approved;
+	}
 }
 
 /**

diff --git a/tests/unit-tests/test-class-quiz.php b/tests/unit-tests/test-class-quiz.php
@@ -60,7 +60,7 @@ public function tearDown(): void {
 		foreach ( $quizzes as $index => $quiz ) {
 			wp_delete_post( $quiz->ID, true );
 		}
-
+		WP_Block_Supports::$block_to_render = null;
 	}
 
 	/**
@@ -1950,4 +1950,150 @@ public function testMaybeCreateQuizProgress_WhenTablesBasedProgressFeatureIsDisa
 		$actual                   = $quiz_progress_repository->has( $quiz_id, $user_id );
 		$this->assertFalse( $actual );
 	}
+
+	public function testQuizFooterActions_WhenAwaitingGradeInLearningMode_RendersAwaitingGradeButton() {
+		/* Arrange */
+		$user_id   = $this->factory->user->create();
+		$course_id = $this->factory->course->create();
+		$lesson_id = $this->factory->lesson->create(
+			[
+				'meta_input' => [
+					'_lesson_course' => $course_id,
+				],
+			]
+		);
+
+		$quiz_id          = $this->factory->maybe_create_quiz_for_lesson( $lesson_id );
+		$course_enrolment = Sensei_Course_Enrolment::get_course_instance( $course_id );
+		$course_enrolment->enrol( $user_id );
+
+		wp_set_current_user( $user_id );
+
+		// Enable course theme;
+		update_post_meta( $course_id, Sensei_Course_Theme_Option::THEME_POST_META_NAME, Sensei_Course_Theme_Option::SENSEI_THEME );
+
+		Sensei_Utils::update_lesson_status( $user_id, $lesson_id, 'ungraded' );
+
+		$this->go_to( get_permalink( $quiz_id ) );
+
+		WP_Block_Supports::$block_to_render = [
+			'attrs'     => [],
+			'blockName' => 'sensei-lms/quiz-actions',
+		];
+
+		/* Act */
+		$result = ( new \Sensei\Blocks\Course_Theme\Quiz_Actions() )->render();
+
+		/* Assert */
+		$this->assertStringContainsString( 'Pending teacher grade', $result );
+	}
+
+	public function testQuizFooterActions_WhenAwaitingGradeButNotInLearningMode_DoesNotRenderAwaitingGradeButton() {
+		/* Arrange */
+		$user_id   = $this->factory->user->create();
+		$course_id = $this->factory->course->create();
+		$lesson_id = $this->factory->lesson->create(
+			[
+				'meta_input' => [
+					'_lesson_course' => $course_id,
+				],
+			]
+		);
+
+		$quiz_id          = $this->factory->maybe_create_quiz_for_lesson( $lesson_id );
+		$course_enrolment = Sensei_Course_Enrolment::get_course_instance( $course_id );
+		$course_enrolment->enrol( $user_id );
+
+		wp_set_current_user( $user_id );
+
+		Sensei_Utils::update_lesson_status( $user_id, $lesson_id, 'ungraded' );
+
+		$this->go_to( get_permalink( $quiz_id ) );
+
+		WP_Block_Supports::$block_to_render = [
+			'attrs'     => [],
+			'blockName' => 'sensei-lms/quiz-actions',
+		];
+
+		/* Act */
+		$result = ( new \Sensei\Blocks\Course_Theme\Quiz_Actions() )->render();
+
+		/* Assert */
+		$this->assertStringNotContainsString( 'Pending teacher grade', $result );
+	}
+
+	public function testQuizFooterActions_WhenPassedButInLearningMode_DoesNotRenderAwaitingGradeButton() {
+		/* Arrange */
+		$user_id   = $this->factory->user->create();
+		$course_id = $this->factory->course->create();
+		$lesson_id = $this->factory->lesson->create(
+			[
+				'meta_input' => [
+					'_lesson_course' => $course_id,
+				],
+			]
+		);
+
+		$quiz_id          = $this->factory->maybe_create_quiz_for_lesson( $lesson_id );
+		$course_enrolment = Sensei_Course_Enrolment::get_course_instance( $course_id );
+		$course_enrolment->enrol( $user_id );
+
+		wp_set_current_user( $user_id );
+
+		// Enable course theme;
+		update_post_meta( $course_id, Sensei_Course_Theme_Option::THEME_POST_META_NAME, Sensei_Course_Theme_Option::SENSEI_THEME );
+
+		Sensei_Utils::update_lesson_status( $user_id, $lesson_id, 'passed' );
+
+		$this->go_to( get_permalink( $quiz_id ) );
+
+		WP_Block_Supports::$block_to_render = [
+			'attrs'     => [],
+			'blockName' => 'sensei-lms/quiz-actions',
+		];
+
+		/* Act */
+		$result = ( new \Sensei\Blocks\Course_Theme\Quiz_Actions() )->render();
+
+		/* Assert */
+		$this->assertStringNotContainsString( 'Pending teacher grade', $result );
+	}
+
+	public function testQuizFooterActions_WhenInProgressButInLearningMode_DoesNotRenderAwaitingGradeButton() {
+		/* Arrange */
+		$user_id   = $this->factory->user->create();
+		$course_id = $this->factory->course->create();
+		$lesson_id = $this->factory->lesson->create(
+			[
+				'meta_input' => [
+					'_lesson_course' => $course_id,
+				],
+			]
+		);
+
+		$quiz_id          = $this->factory->maybe_create_quiz_for_lesson( $lesson_id );
+		$course_enrolment = Sensei_Course_Enrolment::get_course_instance( $course_id );
+		$course_enrolment->enrol( $user_id );
+
+		wp_set_current_user( $user_id );
+
+		// Enable course theme;
+		update_post_meta( $course_id, Sensei_Course_Theme_Option::THEME_POST_META_NAME, Sensei_Course_Theme_Option::SENSEI_THEME );
+
+		// Explicitly set the lesson status to in-progress just to make sure.
+		Sensei_Utils::update_lesson_status( $user_id, $lesson_id );
+
+		$this->go_to( get_permalink( $quiz_id ) );
+
+		WP_Block_Supports::$block_to_render = [
+			'attrs'     => [],
+			'blockName' => 'sensei-lms/quiz-actions',
+		];
+
+		/* Act */
+		$result = ( new \Sensei\Blocks\Course_Theme\Quiz_Actions() )->render();
+
+		/* Assert */
+		$this->assertStringNotContainsString( 'Pending teacher grade', $result );
+	}
 }