feat: add language support to affiliate link components

Adds language handling to the affiliate link page components. 
Introduces a new `language` argument in the `AcceptReferralContainer` 
and `AcceptReferralButton` components. Updates the routing logic 
to transition to the appropriate track based on the provided 
language. Enhances the join track template to include the 
`AcceptReferralContainer` for both mobile and desktop views, 
improving user experience and accessibility.

Author: rohitpaulk

app/components/affiliate-link-page/accept-referral-button.ts

@@ -2,6 +2,7 @@ import Component from '@glimmer/component';
 import type AffiliateLinkModel from 'codecrafters-frontend/models/affiliate-link';
 import type AuthenticatorService from 'codecrafters-frontend/services/authenticator';
 import type CourseModel from 'codecrafters-frontend/models/course';
+import type LanguageModel from 'codecrafters-frontend/models/language';
 import type RouterService from '@ember/routing/router-service';
 import type Store from '@ember-data/store';
 import { action } from '@ember/object';
@@ -15,6 +16,7 @@ interface Signature {
   Args: {
     affiliateLink: AffiliateLinkModel;
     course?: CourseModel;
+    language?: LanguageModel;
   };
 }
 
@@ -78,6 +80,8 @@ export default class AcceptReferralButtonComponent extends Component<Signature>
 
       if (this.args.course) {
         this.router.transitionTo('course', this.args.course.slug);
+      } else if (this.args.language) {
+        this.router.transitionTo('track', this.args.language.slug);
       } else {
         this.router.transitionTo('pay');
       }

app/components/affiliate-link-page/accept-referral-container.ts

@@ -2,13 +2,15 @@ import Component from '@glimmer/component';
 import logoImage from '/assets/images/logo/logomark-color.svg';
 import type AffiliateLinkModel from 'codecrafters-frontend/models/affiliate-link';
 import type CourseModel from 'codecrafters-frontend/models/course';
+import type LanguageModel from 'codecrafters-frontend/models/language';
 
 interface Signature {
   Element: HTMLDivElement;
 
   Args: {
     affiliateLink: AffiliateLinkModel;
     course?: CourseModel;
+    language?: LanguageModel;
     verticalSize: 'tall' | 'compact';
   };
 }

app/templates/join-track.hbs

@@ -13,12 +13,28 @@
 
 <div class="bg-white dark:bg-gray-850">
   <div class="container mx-auto lg:max-w-screen-lg px-3 md:px-6 py-6 md:py-10">
+    <div class="lg:hidden flex justify-center items-center pb-6 md:pb-10">
+      <AffiliateLinkPage::AcceptReferralContainer
+        @affiliateLink={{this.model.affiliateLink}}
+        {{!-- @course={{this.model.course}} --}}
+        @verticalSize="tall"
+        class="w-full bg-github-green-dot-wall"
+      />
+    </div>
+
     <div class="flex items-start">
       <div class="flex-grow">
         <TrackPage::IntroductionAndCourses @language={{@model.language}} @courses={{this.sortedCourses}} class="w-full mb-4" />
       </div>
 
       <div class="w-80 flex-shrink-0 hidden lg:block">
+        <AffiliateLinkPage::AcceptReferralContainer
+          @affiliateLink={{this.model.affiliateLink}}
+          {{!-- @language={{this.model.language}} --}}
+          @verticalSize="compact"
+          class="mb-6 ml-2 w-full bg-github-green-dot-wall"
+        />
+
         <TrackLeaderboard class="ml-2 mb-6" @language={{@model.language}} />
 
         {{! TODO: Show testimonials for track instead of courses? }}
@@ -29,5 +45,14 @@
         </div>
       </div>
     </div>
+
+    <div class="flex justify-center items-center py-6 md:py-10">
+      <AffiliateLinkPage::AcceptReferralContainer
+        @affiliateLink={{this.model.affiliateLink}}
+        {{!-- @course={{this.model.course}} --}}
+        @verticalSize="tall"
+        class="w-full bg-github-green-dot-wall"
+      />
+    </div>
   </div>
 </div>

app/templates/track.hbs

@@ -1,7 +1,7 @@
 {{page-title @model.language.name}}
 
 <div class="container mx-auto lg:max-w-screen-lg px-3 md:px-6 py-6 md:py-10">
-  <TrackPage::Header @language={{@model.language}} @courses={{this.sortedCourses}}>
+  <TrackPage::Header @language={{@model.language}} @courses={{this.sortedCourses}} />
 </div>
 
 <div class="h-px bg-gray-200 dark:bg-white/5 w-full"></div>

tests/acceptance/view-join-track-page-test.js

@@ -0,0 +1,49 @@
+import percySnapshot from '@percy/ember';
+import joinTrackPage from 'codecrafters-frontend/tests/pages/join-track-page';
+import testScenario from 'codecrafters-frontend/mirage/scenarios/test';
+import { currentURL } from '@ember/test-helpers';
+import { module, test } from 'qunit';
+import { setupAnimationTest } from 'ember-animated/test-support';
+import { setupApplicationTest } from 'codecrafters-frontend/tests/helpers';
+import { signIn } from 'codecrafters-frontend/tests/support/authentication-helpers';
+
+module('Acceptance | view-join-track-page', function (hooks) {
+  setupApplicationTest(hooks);
+  setupAnimationTest(hooks);
+
+  test('can view join track page when not logged in', async function (assert) {
+    testScenario(this.server);
+
+    this.server.create('affiliate-link', { user: this.server.schema.users.first() });
+
+    await joinTrackPage.visit({ track_slug: 'go' });
+    assert.notOk(joinTrackPage.acceptReferralButtons[0].isVisible, 'First button is hidden (for mobile only)');
+    assert.ok(joinTrackPage.acceptReferralButtons[1].isVisible, 'Second button is visible (leaderboard)');
+    assert.ok(joinTrackPage.acceptReferralButtons[2].isVisible, 'Third button is visible (bottom of page)');
+    assert.strictEqual(joinTrackPage.acceptReferralButtons.length, 3, 'Three accept referral buttons are present');
+
+    await percySnapshot('Join Track Page | Anonymous');
+  });
+
+  test('can view affiliate link when logged in', async function (assert) {
+    testScenario(this.server);
+    signIn(this.owner, this.server);
+
+    this.server.create('affiliate-link', { user: this.server.schema.users.first() });
+
+    await joinTrackPage.visit({ track_slug: 'go' });
+    assert.notOk(joinTrackPage.acceptReferralButtons[0].isVisible, 'First button is hidden (for mobile only)');
+    assert.ok(joinTrackPage.acceptReferralButtons[1].isVisible, 'Second button is visible (leaderboard)');
+    assert.ok(joinTrackPage.acceptReferralButtons[2].isVisible, 'Third button is visible (bottom of page)');
+    assert.strictEqual(joinTrackPage.acceptReferralButtons.length, 3, 'Three accept referral buttons are present');
+
+    await percySnapshot('Affiliate Link Page | View Affiliate Link (anonymous)');
+  });
+
+  test('redirects to not found if affiliate link is invalid', async function (assert) {
+    testScenario(this.server);
+
+    await joinTrackPage.visit({ track_slug: 'invalid' });
+    assert.strictEqual(currentURL(), '/404');
+  });
+});

tests/pages/join-track-page.ts

@@ -1,10 +1,8 @@
-import { visitable } from 'ember-cli-page-object';
+import { collection, visitable } from 'ember-cli-page-object';
 import createPage from 'codecrafters-frontend/tests/support/create-page';
 
 export default createPage({
-  acceptReferralButton: {
-    scope: '[data-test-accept-referral-button]',
-  },
+  acceptReferralButtons: collection('[data-test-accept-referral-button]'),
 
   visit: visitable('/join-track/:track_slug'),
 });