Merge pull request #2700 from codecrafters-io/update-start-track-button-functionality

feat(track-page): update start track button logic

Author: rohitpaulk

app/components/pay-page/pricing-card.hbs

@@ -72,10 +72,14 @@
         {{svg-jar "github" class="fill-current w-4 transform transition-all mr-2"}}
       {{/unless}}
 
-      Start membership →
+      {{#if this.authenticator.isAuthenticated}}
+        Start membership →
+      {{else}}
+        Try a free project →
+      {{/if}}
 
       {{#unless this.authenticator.isAuthenticated}}
-        <EmberTooltip @text="Login via GitHub to start a membership." />
+        <EmberTooltip @text="Login via GitHub to try a free project." />
       {{/unless}}
     </button>
 

app/components/track-page/header/index.hbs

@@ -29,13 +29,15 @@
     {{#if (has-block "cta")}}
       {{yield to="cta"}}
     {{else}}
-      {{#if this.currentUserHasStartedTrack}}
+      {{#if this.authenticator.isAnonymous}}
+        <div class="flex items-center flex-wrap gap-x-2 gap-y-4 mt-5">
+          {{! TODO: Bring this back for authed users once we can account for both concepts & challenges }}
+          <TrackPage::StartTrackButton @language={{@language}} @courses={{@courses}} />
+        </div>
+      {{else if this.currentUserHasStartedTrack}}
         <div class="flex items-center flex-wrap gap-x-2 gap-y-4 mt-5">
           <TrackPage::ResumeTrackButton @language={{@language}} @courses={{@courses}} />
 
-          {{! TODO: Bring this the "Start Track" button once we can account for both concepts & challenges }}
-          {{!-- <TrackPage::StartTrackButton @language={{@language}} @courses={{@courses}} /> --}}
-
           {{#if (gt this.topParticipants.length 0)}}
             <div class="hidden sm:flex items-center">
               <div class="flex -space-x-1 hover:space-x-1 items-center">

app/components/track-page/start-track-button.hbs

@@ -1,9 +1,10 @@
 <PrimaryButton class="mr-2 flex items-center" data-test-primary-start-track-button {{on "click" this.handleClicked}} @size="large" ...attributes>
-  {{#if this.currentUserIsAnonymous}}
+  {{! If there's no primer concept group, the user will need to login to start the track }}
+  {{#if (and this.authenticator.isAnonymous (not @language.primerConceptGroup))}}
     {{svg-jar "github" class="fill-current w-5 transform transition-all mr-2"}}
   {{/if}}
 
-  Start Track
+  Start Learning
 
   {{svg-jar "arrow-right" class="w-4 ml-2 fill-current"}}
 </PrimaryButton>

app/components/track-page/start-track-button.ts

@@ -21,14 +21,14 @@ export default class CourseOverviewStartTrackButtonComponent extends Component<S
   @service declare authenticator: AuthenticatorService;
   @service declare router: RouterService;
 
-  get currentUserIsAnonymous() {
-    return this.authenticator.isAnonymous;
-  }
-
   @action
   handleClicked() {
-    if (this.currentUserIsAnonymous) {
-      this.authenticator.initiateLogin();
+    if (this.authenticator.isAnonymous) {
+      if (this.args.language.primerConceptGroup) {
+        this.router.transitionTo('concept', this.args.language.primerConceptGroup.concepts[0]!.slug);
+      } else {
+        this.authenticator.initiateLogin();
+      }
     } else {
       this.router.transitionTo('course', this.args.courses[0]!.slug, { queryParams: { repo: null, track: this.args.language.slug } });
     }

app/controllers/pay.ts

@@ -58,7 +58,8 @@ export default class PayController extends Controller {
       this.configureCheckoutSessionModalIsOpen = true;
       this.selectedPricingFrequency = pricingFrequency;
     } else {
-      this.authenticator.initiateLogin();
+      // The CTA is "Try a free project ->", so doesn't make sense to redirect to /pay again
+      this.authenticator.initiateLoginAndRedirectTo('/catalog');
     }
   }
 

tests/acceptance/pay-test.js

@@ -25,19 +25,16 @@ module('Acceptance | pay-test', function (hooks) {
     await payPage.pricingCards[0].startPaymentButton.hover();
 
     assertTooltipContent(assert, {
-      contentString: 'Login via GitHub to start a membership.',
+      contentString: 'Login via GitHub to try a free project.',
     });
   });
 
-  test('user can view the page through the upgrade button', async function (assert) {
+  test('user can view the page through the pricing link', async function (assert) {
     testScenario(this.server);
 
     await catalogPage.visit();
 
-    assert.ok(catalogPage.header.upgradeButton.isVisible, 'Upgrade button is visible');
-
-    await catalogPage.header.upgradeButton.click();
-
+    await catalogPage.header.clickOnHeaderLink('Pricing');
     assert.strictEqual(currentURL(), '/pay');
   });
 
@@ -49,7 +46,7 @@ module('Acceptance | pay-test', function (hooks) {
 
     assert.strictEqual(
       windowMock.location.href,
-      `${windowMock.location.origin}/login?next=http%3A%2F%2Flocalhost%3A${window.location.port}%2Fpay`,
+      `${windowMock.location.origin}/login?next=http%3A%2F%2Flocalhost%3A${window.location.port}%2Fcatalog`,
       'should redirect to login URL',
     );
   });

tests/acceptance/track-page/start-track-test.js

@@ -1,19 +1,57 @@
+import createConceptFromFixture from 'codecrafters-frontend/mirage/utils/create-concept-from-fixture';
+import networkProtocols from 'codecrafters-frontend/mirage/concept-fixtures/network-protocols';
+import tcpOverview from 'codecrafters-frontend/mirage/concept-fixtures/tcp-overview';
 import testScenario from 'codecrafters-frontend/mirage/scenarios/test';
 import trackPage from 'codecrafters-frontend/tests/pages/track-page';
-import { module, skip } from 'qunit';
+import windowMock from 'ember-window-mock';
+import { currentURL, visit } from '@ember/test-helpers';
+import { module, skip, test } from 'qunit';
 import { setupApplicationTest } from 'codecrafters-frontend/tests/helpers';
+import { setupWindowMock } from 'ember-window-mock/test-support';
 import { signIn } from 'codecrafters-frontend/tests/support/authentication-helpers';
-import { currentURL, visit } from '@ember/test-helpers';
 
 module('Acceptance | track-page | start-track', function (hooks) {
   setupApplicationTest(hooks);
+  setupWindowMock(hooks);
 
-  // TODO: Bring this back once we can account for both concepts & challenges
-  skip('it display the start-track-button for anonymous user', async function (assert) {
+  test('it display the start-track-button for anonymous user (Track without primer concept group)', async function (assert) {
     testScenario(this.server);
 
     await visit('/tracks/go');
     assert.ok(trackPage.hasStartTrackButton, 'start track button should be visible for anonymous users');
+
+    await trackPage.clickOnStartTrackButton();
+
+    assert.strictEqual(
+      windowMock.location.href,
+      `${windowMock.location.origin}/login?next=http%3A%2F%2Flocalhost%3A${window.location.port}%2Ftracks%2Fgo`,
+      'should redirect to login URL',
+    );
+  });
+
+  test('it display the start-track-button for anonymous user (Track with primer concept group)', async function (assert) {
+    testScenario(this.server);
+
+    const tcpOverviewConcept = createConceptFromFixture(this.server, tcpOverview);
+    const networkProtocolsConcept = createConceptFromFixture(this.server, networkProtocols);
+
+    const rustPrimerConceptGroup = this.server.create('concept-group', {
+      author: this.server.schema.users.first(),
+      description_markdown: 'Dummy description',
+      concepts: [tcpOverviewConcept, networkProtocolsConcept],
+      concept_slugs: ['tcp-overview', 'network-protocols'],
+      slug: 'rust-primer',
+      title: 'Rust Primer',
+    });
+
+    const rust = this.server.schema.languages.findBy({ slug: 'rust' });
+    rust.update({ primerConceptGroup: rustPrimerConceptGroup });
+
+    await visit('/tracks/rust');
+    assert.ok(trackPage.hasStartTrackButton, 'start track button should be visible for anonymous users');
+
+    await trackPage.clickOnStartTrackButton();
+    assert.strictEqual(currentURL(), '/concepts/tcp-overview');
   });
 
   // TODO: Bring this back once we can account for both concepts & challenges