Merge pull request #1809 from codecrafters-io/code-example-confirmati…

…on-modal

CC-1265 Add code example confirmation modal

app/components/course-page/course-stage-step/community-solutions-list.hbs

@@ -1,15 +1,60 @@
-{{#each @solutions as |solution solutionIndex|}}
-  <CoursePage::CourseStageStep::CommunitySolutionCard
-    @isCollapsedByDefault={{gt solutionIndex 0}}
-    @metadataForDownvote={{hash position_in_list=(add solutionIndex 1)}}
-    @metadataForUpvote={{hash position_in_list=(add solutionIndex 1)}}
-    @onExpand={{fn this.handleSolutionExpand solution solutionIndex}}
-    @onPublishToGithubButtonClick={{fn (mut this.configureGithubIntegrationModalIsOpen) true}}
-    @solution={{solution}}
-    {{! account for the sticky menu bar }}
-    class="scroll-mt-16"
-  />
-{{/each}}
+<BlurredOverlay @isBlurred={{this.shouldShowStageIncompleteModal}} class="px-3 md:px-6 lg:px-10">
+  <:content>
+    {{#each @solutions as |solution solutionIndex|}}
+      <CoursePage::CourseStageStep::CommunitySolutionCard
+        @isCollapsedByDefault={{gt solutionIndex 0}}
+        @metadataForDownvote={{hash position_in_list=(add solutionIndex 1)}}
+        @metadataForUpvote={{hash position_in_list=(add solutionIndex 1)}}
+        @onExpand={{fn this.handleSolutionExpand solution solutionIndex}}
+        @onPublishToGithubButtonClick={{fn (mut this.configureGithubIntegrationModalIsOpen) true}}
+        @solution={{solution}}
+        {{! account for the sticky menu bar }}
+        class="scroll-mt-16"
+      />
+    {{/each}}
+  </:content>
+  <:overlay>
+    <ModalBody
+      @allowManualClose={{false}}
+      @onClose={{fn (mut @stageIncompleteModalWasDismissed) true}}
+      class="w-full mt-8 border mx-3 md:mx-6"
+      data-test-stage-incomplete-modal
+    >
+      <div class="mb-4 font-semibold text-2xl text-gray-600 mr-6">
+        Stage incomplete
+      </div>
+
+      <div class="prose mb-6">
+        <p>
+          You haven't completed this stage yet. Are you sure you want to view code examples?
+        </p>
+      </div>
+
+      <div class="flex items-center gap-x-6 gap-y-4 flex-wrap">
+        <PrimaryLinkButton
+          @route={{this.coursePageState.activeStep.routeParams.route}}
+          @models={{this.coursePageState.activeStep.routeParams.models}}
+          data-test-instructions-button
+          class="flex-shrink-0"
+        >
+          <div class="flex items-center">
+            {{svg-jar "arrow-left" class="w-4 mr-1 fill-current flex-shrink-0"}}
+            <span>No, back to instructions</span>
+          </div>
+        </PrimaryLinkButton>
+
+        <div
+          class="text-gray-500 hover:text-gray-800 text-sm pb-0.25 border-b border-gray-400 hover:border-gray-600 flex-shrink-0"
+          role="button"
+          {{on "click" (fn (mut @stageIncompleteModalWasDismissed) true)}}
+          data-test-show-code-button
+        >
+          Yes, show me the code 👀
+        </div>
+      </div>
+    </ModalBody>
+  </:overlay>
+</BlurredOverlay>
 
 {{#if this.configureGithubIntegrationModalIsOpen}}
   <ModalBackdrop>

app/components/course-page/course-stage-step/community-solutions-list.ts

@@ -1,31 +1,53 @@
-import rippleSpinnerImage from '/assets/images/icons/ripple-spinner.svg';
 import Component from '@glimmer/component';
-import { tracked } from '@glimmer/tracking';
+import CourseStageStep from 'codecrafters-frontend/utils/course-page-step-list/course-stage-step';
+import rippleSpinnerImage from '/assets/images/icons/ripple-spinner.svg';
 import { action } from '@ember/object';
 import { service } from '@ember/service';
-import type CommunityCourseStageSolutionModel from 'codecrafters-frontend/models/community-course-stage-solution';
+import { tracked } from '@glimmer/tracking';
 import type AuthenticatorService from 'codecrafters-frontend/services/authenticator';
+import type CommunityCourseStageSolutionModel from 'codecrafters-frontend/models/community-course-stage-solution';
+import type CoursePageStateService from 'codecrafters-frontend/services/course-page-state';
+import type RepositoryModel from 'codecrafters-frontend/models/repository';
 
 type Signature = {
   Element: HTMLDivElement;
 
   Args: {
     solutions: CommunityCourseStageSolutionModel[];
-    repository: string;
+    stageIncompleteModalWasDismissed: boolean;
+    repository: RepositoryModel;
   };
 };
 
 export default class CommunitySolutionsListComponent extends Component<Signature> {
   rippleSpinnerImage = rippleSpinnerImage;
 
   @service declare authenticator: AuthenticatorService;
+  @service declare coursePageState: CoursePageStateService;
 
   @tracked configureGithubIntegrationModalIsOpen = false;
 
+  get shouldShowStageIncompleteModal() {
+    return (
+      !this.args.stageIncompleteModalWasDismissed &&
+      this.coursePageState.currentStep.type === 'CourseStageStep' &&
+      !(this.coursePageState.currentStep as CourseStageStep).courseStage.isFirst &&
+      !(this.coursePageState.currentStep as CourseStageStep).courseStage.isSecond &&
+      this.args.solutions.length > 0 &&
+      this.coursePageState.currentStep.status !== 'complete'
+    );
+  }
+
   @action
   handleSolutionExpand(solution: CommunityCourseStageSolutionModel, solutionIndex: number) {
     if (this.authenticator.isAuthenticated) {
       solution.createView({ position_in_list: solutionIndex + 1 });
     }
   }
 }
+
+declare module '@glint/environment-ember-loose/registry' {
+  export default interface Registry {
+    'CoursePage::CourseStageStep::CommunitySolutionsList': typeof CommunitySolutionsListComponent;
+  }
+}

app/controllers/course/stage/code-examples.ts

@@ -20,8 +20,9 @@ export default class CodeExamplesController extends Controller {
   rippleSpinnerImage = rippleSpinnerImage;
   @tracked order: 'recommended' | 'recent' | 'affiliated' = 'recommended';
   @tracked isLoading = true;
-  @tracked solutions: CommunityCourseStageSolutionModel[] = [];
   @tracked requestedLanguage: LanguageModel | null = null; // This shouldn't be state on the controller, see if we can move it to a query param or so?
+  @tracked solutions: CommunityCourseStageSolutionModel[] = [];
+  @tracked stageIncompleteModalWasDismissed = false;
 
   get communitySolutionsAreAvailableForCurrentLanguage() {
     return this.currentLanguage && this.courseStage.hasCommunitySolutionsForLanguage(this.currentLanguage);

app/templates/course/stage/code-examples.hbs

@@ -1,4 +1,11 @@
-<div class="pt-8 pb-32" {{did-update this.loadSolutions this.courseStage}} {{did-insert this.loadSolutions}} data-test-code-examples-tab>
+<div
+  class="pt-8 pb-32"
+  {{did-update (fn (mut this.stageIncompleteModalWasDismissed) false) this.courseStage}}
+  {{did-update this.loadSolutions this.courseStage}}
+  {{did-insert this.loadSolutions}}
+  {{will-destroy (fn (mut this.stageIncompleteModalWasDismissed) false)}}
+  data-test-code-examples-tab
+>
   <div class="flex items-center justify-between mb-4 pb-2 border-b">
     <div class="flex items-center gap-x-3 gap-y-2 flex-wrap">
       <h2 class="font-semibold text-lg">Code Examples using {{this.currentLanguage.name}}</h2>
@@ -57,8 +64,11 @@
         <span class="ml-3 text-gray-700">Loading...</span>
       </div>
     {{else if (gt this.sortedSolutions.length 0)}}
-      {{! @glint-expect-error: not ts-ified yet }}
-      <CoursePage::CourseStageStep::CommunitySolutionsList @solutions={{this.sortedSolutions}} @repository={{@model.activeRepository}} />
+      <CoursePage::CourseStageStep::CommunitySolutionsList
+        @solutions={{this.sortedSolutions}}
+        @repository={{@model.activeRepository}}
+        @stageIncompleteModalWasDismissed={{this.stageIncompleteModalWasDismissed}}
+      />
     {{else}}
       <div class="flex py-16 justify-center items-center w-full">
         <div class="text-sm text-gray-500 text-center max-w-lg">