Merge pull request #2746 from codecrafters-io/CC-1654-completions

Add dynamic completion messaging and TypeScript support to CourseCompletedCard

Author: ryan-gang

app/components/course-page/course-completed-card.hbs

@@ -7,38 +7,49 @@
   </:header>
   <:content>
     <div class="prose dark:prose-invert" data-test-instructions-text>
-      <p>
-        Congratulations are in order. Only ~{{@repository.course.roundedCompletionPercentage}}% of users that attempt this challenge end up completing
-        all stages, and you're one of them!
-      </p>
-      <p>
-        Here's what you can do next:
-      </p>
-      <ul>
-        <li>
-          <strong>Polish your code. </strong>Perhaps you took a shortcut when approaching the challenge the first time. Now is a great time to clean
-          up your code. You can simply push new commits to the existing repo, and we'll run tests just like before.
-        </li>
-        <li>
-          <strong>Publish to GitHub. </strong>Share your work with the world. With one click, you can publish your CodeCrafters project to GitHub.
-          <span role="button" class="underline" {{on "click" (fn (mut this.configureGithubIntegrationModalIsOpen) true)}}><strong>Click here</strong></span>
-          to get started.
-        </li>
-        <li>
-          <strong>Try a different approach. </strong>You can re-approach the same challenge with a new programming language, a new constraint, or a
-          new style. To launch the challenge again, use the dropdown on the top left.
-        </li>
-      </ul>
-      <p>
-        If you've got any feedback or feature requests, feel free to let us know at
-        <a href="mailto:[email protected]">[email protected]</a>. We respond to every single email.
-      </p>
+      {{! If there's no completion_message set, the backend returns null }}
+      {{#if (eq @repository.course.completionMessageMarkdown null)}}
+        <p>
+          Congratulations are in order. Only ~{{@repository.course.roundedCompletionPercentage}}% of users that attempt this challenge end up
+          completing all stages, and you're one of them!
+        </p>
+        <p>
+          Here's what you can do next:
+        </p>
+        <ul>
+          <li>
+            <strong>Polish your code. </strong>Perhaps you took a shortcut when approaching the challenge the first time. Now is a great time to clean
+            up your code. You can simply push new commits to the existing repo, and we'll run tests just like before.
+          </li>
+          <li>
+            <strong>Publish to GitHub. </strong>Share your work with the world. With one click, you can publish your CodeCrafters project to GitHub.
+            <span role="button" class="underline" {{on "click" (fn (mut this.configureGithubIntegrationModalIsOpen) true)}}><strong>Click here</strong></span>
+            to get started.
+          </li>
+          <li>
+            <strong>Try a different approach. </strong>You can re-approach the same challenge with a new programming language, a new constraint, or a
+            new style. To launch the challenge again, use the dropdown on the top left.
+          </li>
+        </ul>
+        <p>
+          If you've got any feedback or feature requests, feel free to let us know at
+          <a href="mailto:[email protected]">[email protected]</a>. We respond to every single email.
+        </p>
+      {{else}}
+        {{! @glint-expect-error the else condition is guarded by a null check }}
+        {{markdown-to-html @repository.course.completionMessageMarkdown}}
+      {{/if}}
     </div>
   </:content>
 </CoursePage::InstructionsCard>
 
 {{#if this.configureGithubIntegrationModalIsOpen}}
   <ModalBackdrop>
-    <CoursePage::ConfigureGithubIntegrationModal @repository={{@repository}} @onClose={{fn (mut this.configureGithubIntegrationModalIsOpen) false}} />
+    {{! @glint-expect-error: not ts-ified yet }}
+    <CoursePage::ConfigureGithubIntegrationModal
+      @repository={{@repository}}
+      {{! @glint-expect-error: mut not ts-ified yet }}
+      @onClose={{fn (mut this.configureGithubIntegrationModalIsOpen) false}}
+    />
   </ModalBackdrop>
 {{/if}}

app/components/course-page/course-completed-card.js

@@ -0,0 +1,24 @@
+import { tracked } from '@glimmer/tracking';
+import Component from '@glimmer/component';
+import congratulationsImage from '/assets/images/icons/congratulations.png';
+import type RepositoryModel from 'codecrafters-frontend/models/repository';
+
+interface Signature {
+  Element: HTMLDivElement;
+
+  Args: {
+    repository: RepositoryModel;
+  };
+}
+
+export default class CourseCompletedCardComponent extends Component<Signature> {
+  congratulationsImage = congratulationsImage;
+
+  @tracked configureGithubIntegrationModalIsOpen = false;
+}
+
+declare module '@glint/environment-ember-loose/registry' {
+  export default interface Registry {
+    'CoursePage::CourseCompletedCard': typeof CourseCompletedCardComponent;
+  }
+}

app/components/course-page/course-completed-card.ts

@@ -30,6 +30,7 @@ type SyncBuildpacksResponse = { error: string } | { success: boolean };
 
 export default class CourseModel extends Model {
   @attr('date') declare buildpacksLastSyncedAt: Date;
+  @attr('string') declare completionMessageMarkdown: string | null;
   @attr('number') declare completionPercentage: number;
   @attr() declare conceptSlugs: string[];
   @attr('string') declare definitionRepositoryFullName: string;

app/models/course.ts

@@ -6,6 +6,7 @@ export default {
   "description_md": "Add a description for your course here.",
   "short_description_md": "Add a short description for your course here.",
   "completion_percentage": 15,
+  "completion_message_markdown": "Congratulations! You've completed all stages of this course. 🎉\nWe recommend you to take a break and celebrate your achievement!",
   "languages": [
     {
       "slug": "go"

mirage/course-fixtures/dummy.js

@@ -73,6 +73,7 @@ function createLanguageConfigurations(server, course, courseData) {
 
 function courseAttributesFromData(courseData) {
   return {
+    completionMessageMarkdown: courseData.completion_message_markdown || null,
     completionPercentage: courseData.completion_percentage,
     descriptionMarkdown: courseData.description_md,
     difficulty: courseData.marketing.difficulty,

mirage/utils/create-course-from-data.js

@@ -18,18 +18,17 @@ module('Acceptance | course-page | complete-challenge-test', function (hooks) {
 
     const currentUser = this.server.schema.users.first();
     const python = this.server.schema.languages.findBy({ name: 'Python' });
-    const docker = this.server.schema.courses.findBy({ slug: 'docker' });
+    const grep = this.server.schema.courses.findBy({ slug: 'grep' });
 
     this.server.create('repository', 'withAllStagesCompleted', {
-      course: docker,
+      course: grep,
       language: python,
       user: currentUser,
     });
 
     await catalogPage.visit();
-    await catalogPage.clickOnCourse('Build your own Docker');
-    assert.strictEqual(currentURL(), '/courses/docker/completed', 'URL is /courses/docker/completed');
-
+    await catalogPage.clickOnCourse('Build your own grep');
+    assert.strictEqual(currentURL(), '/courses/grep/completed', 'URL is /courses/redis/completed');
     assert.contains(coursePage.courseCompletedCard.instructionsText, 'Congratulations are in order. Only ~30% of users');
 
     await percySnapshot('Course Completed Page');
@@ -38,6 +37,30 @@ module('Acceptance | course-page | complete-challenge-test', function (hooks) {
     assert.ok(coursePage.configureGithubIntegrationModal.isOpen, 'configure github integration modal is open');
   });
 
+  test('custom course completion message is displayed', async function (assert) {
+    testScenario(this.server, ['dummy']);
+    signIn(this.owner, this.server);
+
+    const currentUser = this.server.schema.users.first();
+    const python = this.server.schema.languages.findBy({ name: 'Python' });
+    const dummy = this.server.schema.courses.findBy({ slug: 'dummy' });
+    dummy.update('releaseStatus', 'live');
+
+    this.server.create('repository', 'withAllStagesCompleted', {
+      course: dummy,
+      language: python,
+      user: currentUser,
+    });
+
+    await catalogPage.visit();
+
+    // This opens in the extension completed page
+    await catalogPage.clickOnCourse('Build your own Dummy');
+    await visit('/courses/dummy/completed');
+
+    assert.contains(coursePage.courseCompletedCard.instructionsText, 'Congratulations!');
+  });
+
   test('visiting /completed route without completing course redirects to correct stage', async function (assert) {
     testScenario(this.server);
     signIn(this.owner, this.server);