Merge pull request #3143 from codecrafters-io/enhance-redeem-button-functionality

feat(gifts): enhance redeem button functionality and add tests

Author: rohitpaulk

app/controllers/gifts/redeem.ts

@@ -1,6 +1,53 @@
 import Controller from '@ember/controller';
 import type { ModelType } from 'codecrafters-frontend/routes/gifts/redeem';
+import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
+import { tracked } from '@glimmer/tracking';
+import type RouterService from '@ember/routing/router-service';
+import type AuthenticatorService from 'codecrafters-frontend/services/authenticator';
 
 export default class GiftsRedeemController extends Controller {
   declare model: ModelType;
+
+  @service declare router: RouterService;
+  @service declare authenticator: AuthenticatorService;
+
+  @tracked isRedeemingGift = false;
+
+  get currentUserCanAccessMembershipBenefits() {
+    return this.authenticator.currentUser && this.authenticator.currentUser.canAccessMembershipBenefits;
+  }
+
+  get currentUserIsAnonymous() {
+    return this.authenticator.isAnonymous;
+  }
+
+  get redeemButtonIsDisabled() {
+    // Button is disabled if user already has membership benefits
+    return this.currentUserCanAccessMembershipBenefits || this.isRedeemingGift;
+  }
+
+  @action
+  async handleRedeemButtonClick() {
+    if (this.currentUserIsAnonymous) {
+      this.authenticator.initiateLogin();
+
+      return;
+    }
+
+    if (this.redeemButtonIsDisabled) {
+      return;
+    }
+
+    this.isRedeemingGift = true;
+
+    try {
+      await this.model.redeem({});
+      this.router.transitionTo('catalog');
+    } catch (error) {
+      // TODO: Handle error appropriately
+      this.isRedeemingGift = false;
+      throw error;
+    }
+  }
 }

app/models/membership-gift.ts

@@ -1,4 +1,5 @@
 import Model, { attr, belongsTo } from '@ember-data/model';
+import { memberAction } from 'ember-api-actions';
 import type UserModel from 'codecrafters-frontend/models/user';
 
 export default class MembershipGiftModel extends Model {
@@ -10,4 +11,11 @@ export default class MembershipGiftModel extends Model {
   @attr('string') declare giftMessage: string;
   @attr('number') declare validityInDays: number;
   @attr('string') declare secretToken: string;
+
+  declare redeem: (this: MembershipGiftModel, payload: unknown) => Promise<void>;
 }
+
+MembershipGiftModel.prototype.redeem = memberAction({
+  path: 'redeem',
+  type: 'post',
+});

app/templates/gifts/redeem.hbs

@@ -20,8 +20,22 @@
       </p>
     </div>
 
-    <PrimaryButton data-test-claim-button {{on "click" (noop)}}>
-      Claim Gift
+    <PrimaryButton data-test-redeem-button @isDisabled={{this.redeemButtonIsDisabled}} {{on "click" this.handleRedeemButtonClick}}>
+      {{#if this.currentUserIsAnonymous}}
+        {{svg-jar "github" class="fill-current w-6 transform transition-all mr-3"}}
+      {{/if}}
+
+      {{#if this.isRedeemingGift}}
+        Redeeming...
+      {{else}}
+        Redeem Gift
+      {{/if}}
+
+      {{#if this.currentUserIsAnonymous}}
+        <EmberTooltip @text="Click to login via GitHub" />
+      {{else if this.currentUserCanAccessMembershipBenefits}}
+        <EmberTooltip @text="You already have full access to CodeCrafters. You can claim this gift once your membership expires." />
+      {{/if}}
     </PrimaryButton>
   </div>
 </div>

tests/acceptance/concepts-test.js

@@ -876,10 +876,7 @@ module('Acceptance | concepts-test', function (hooks) {
     assert.ok(conceptsPage.conceptCards[3].draftLabel.isVisible, 'Draft label is visible for draft concepts');
 
     await conceptsPage.conceptCards[3].draftLabel.hover();
-
-    assertTooltipContent(assert, {
-      contentString: 'This concept is only visible to staff',
-    });
+    assertTooltipContent(assert, { contentString: 'This concept is only visible to staff' });
   });
 
   test('draft concepts are visible to concept author', async function (assert) {

tests/acceptance/redeem-gift-page/redeem-test.js

@@ -0,0 +1,51 @@
+import redeemGiftPage from 'codecrafters-frontend/tests/pages/redeem-gift-page';
+import testScenario from 'codecrafters-frontend/mirage/scenarios/test';
+import { module, test } from 'qunit';
+import { setupApplicationTest } from 'codecrafters-frontend/tests/helpers';
+import { signInAsSubscriber } from 'codecrafters-frontend/tests/support/authentication-helpers';
+import { assertTooltipContent } from 'ember-tooltips/test-support';
+
+module('Acceptance | redeem-gift-page | redeem', function (hooks) {
+  setupApplicationTest(hooks);
+
+  test('user cannot redeem a gift if they are not logged in', async function (assert) {
+    testScenario(this.server);
+
+    this.server.schema.membershipGifts.create({
+      secretToken: 'xyz',
+      giftMessage: 'Happy Birthday! Enjoy your CodeCrafters membership.',
+      validityInDays: 365,
+      purchasedAt: new Date(),
+      claimedAt: null,
+    });
+
+    await redeemGiftPage.visit({ secret_token: 'xyz' });
+    assert.notOk(redeemGiftPage.giftDetailsContainer.redeemButton.isDisabled, 'Redeem button should be enabled for anonymous users');
+
+    await redeemGiftPage.giftDetailsContainer.redeemButton.hover();
+    assertTooltipContent(assert, { contentString: 'Click to login via GitHub' });
+  });
+
+  test('user cannot redeem a gift if they already have a membership', async function (assert) {
+    testScenario(this.server);
+
+    signInAsSubscriber(this.owner, this.server);
+
+    this.server.schema.membershipGifts.create({
+      secretToken: 'xyz',
+      giftMessage: 'Happy Birthday! Enjoy your CodeCrafters membership.',
+      validityInDays: 365,
+      purchasedAt: new Date(),
+      claimedAt: null,
+    });
+
+    await redeemGiftPage.visit({ secret_token: 'xyz' });
+    assert.ok(redeemGiftPage.giftDetailsContainer.redeemButton.isDisabled, 'Redeem button should be disabled for users with existing membership');
+
+    await redeemGiftPage.giftDetailsContainer.redeemButton.hover();
+
+    assertTooltipContent(assert, {
+      contentString: 'You already have full access to CodeCrafters. You can claim this gift once your membership expires.',
+    });
+  });
+});

tests/pages/redeem-gift-page.ts

@@ -1,14 +1,19 @@
-import { clickable, text, visitable } from 'ember-cli-page-object';
+import { clickable, text, visitable, hasClass, triggerable } from 'ember-cli-page-object';
 import createPage from 'codecrafters-frontend/tests/support/create-page';
 
 export default createPage({
   visit: visitable('/gifts/redeem/:secret_token'),
 
   giftDetailsContainer: {
-    claimButton: { scope: '[data-test-claim-button]' },
+    redeemButton: {
+      scope: '[data-test-redeem-button]',
+      isDisabled: hasClass('cursor-not-allowed'),
+      hover: triggerable('mouseenter'),
+    },
+
     giftMessage: text('[data-test-gift-message]'),
     scope: '[data-test-gift-details-container]',
   },
 
-  clickClaimButton: clickable('[data-test-claim-button]'),
+  clickRedeemButton: clickable('[data-test-redeem-button]'),
 });