Merge pull request #3272 from codecrafters-io/fix-rename-affiliate-username-avatar

fix: rename affiliate username and avatar fields across UI and model

Author: rohitpaulk

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

@@ -17,7 +17,7 @@
   {{else if this.currentUserIsReferrer}}
     <EmberTooltip @text="You can't accept your own referral offer." />
   {{else if this.currentUserHasActiveDiscountFromAffiliateReferral}}
-    <EmberTooltip @text="You've already accepted {{this.currentUser.currentAffiliateReferral.affiliateLink.usernameForDisplay}}'s referral offer." />
+    <EmberTooltip @text="You've already accepted {{this.currentUser.currentAffiliateReferral.affiliateLink.affiliateName}}'s referral offer." />
   {{else if this.currentUserCanAccessMembershipBenefits}}
     <EmberTooltip @text="As a CodeCrafters member, you already have full access." />
   {{/if}}

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

@@ -1,18 +1,18 @@
 <div
   class="flex flex-col items-center gap-y-6 bg-teal-50/25 dark:bg-teal-800/40 border-teal-500 dark:border-teal-600 px-4
     {{if (eq @verticalSize 'tall') 'py-12' 'py-8'}}
-    border rounded-md shadow-xl"
+    border rounded-md shadow-xl group"
   ...attributes
 >
   <div class="flex items-center justify-center">
-    {{#if @affiliateLink.overriddenAffiliateAvatarUrl}}
-      {{! No border for overridden avatars, we'll expect them to include a border in the image itself if needed }}
-      <img alt="avatar" src={{@affiliateLink.overriddenAffiliateAvatarUrl}} class="w-16 h-16 mr-2" />
-    {{else}}
-      <AvatarImage
-        @user={{@affiliateLink.user}}
-        class="w-16 h-16 border border-gray-300 shadow-xs group-hover:shadow-sm mr-2 transition-shadow rounded-md"
+    {{#if @affiliateLink.avatarIsGitHubAvatar}}
+      <img
+        alt="avatar"
+        src={{@affiliateLink.affiliateAvatarUrl}}
+        class="w-16 h-16 mr-2 rounded-md border border-gray-300 shadow-xs group-hover:shadow-sm transition-shadow"
       />
+    {{else}}
+      <img alt="avatar" src={{@affiliateLink.affiliateAvatarUrl}} class="w-16 h-16 mr-2" />
     {{/if}}
 
     {{svg-jar "plus" class="w-10 h-10 text-gray-600 dark:text-gray-400 mr-2 opacity-90 group-hover:opacity-100 transition-all"}}
@@ -21,7 +21,7 @@
   </div>
 
   <div class="prose dark:prose-invert text-center max-w-sm">
-    <b class="dark:text-gray-50">@{{@affiliateLink.usernameForDisplay}}</b>
+    <b class="dark:text-gray-50">@{{@affiliateLink.affiliateName}}</b>
     wants you to try CodeCrafters. Signing up is free.
     <b class="dark:text-gray-50">40% off</b>
     if you upgrade.

app/components/pay-page/choose-membership-plan-modal/plan-card.hbs

@@ -58,7 +58,7 @@
                 —
                 {{#if @promotionalDiscount.isFromAffiliateReferral}}<span
                     class="text-nowrap"
-                  >{{@promotionalDiscount.affiliateReferral.affiliateLink.usernameForDisplay}}'s</span>
+                  >{{@promotionalDiscount.affiliateReferral.affiliateLink.affiliateName}}'s</span>
                   referral offer{{else if @promotionalDiscount.isFromStage2Completion}}Stage 2 completion discount{{else if
                   @promotionalDiscount.isFromSignup
                 }}Signup discount{{/if}}, expires in

app/components/pay-page/referral-discount-notice.hbs

@@ -8,20 +8,17 @@
   </div>
 
   <div class="bg-repeating-gradient-to-b from-yellow-100 to-amber-500 text-transparent bg-clip-text leading-7 inline-block mt-0.5">
-    {{#if @discount.affiliateReferral.affiliateLink.overriddenAffiliateAvatarUrl}}
+    {{#if @discount.affiliateReferral.affiliateLink.avatarIsGitHubAvatar}}
       <img
         alt="avatar"
-        src={{@discount.affiliateReferral.affiliateLink.overriddenAffiliateAvatarUrl}}
-        class="inline-block mb-0 w-6 h-6 transform -translate-y-px"
+        src={{@discount.affiliateReferral.affiliateLink.affiliateAvatarUrl}}
+        class="inline-block w-6 h-6 border border-gray-100 rounded-full transform -translate-y-px"
       />
     {{else}}
-      <AvatarImage
-        @user={{@discount.affiliateReferral.referrer}}
-        class="inline-block mb-0 w-6 h-6 border border-gray-100 rounded-full transform -translate-y-px"
-      />
+      <img alt="avatar" src={{@discount.affiliateReferral.affiliateLink.affiliateAvatarUrl}} class="inline-block w-6 h-6" />
     {{/if}}
 
-    <b>{{@discount.affiliateReferral.affiliateLink.usernameForDisplay}}</b>'s referral offer: Subscribe in
+    <b>{{@discount.affiliateReferral.affiliateLink.affiliateName}}</b>'s referral offer: Subscribe in
     <span class="font-bold percy-timestamp font-mono text-lg border-b border-yellow-500 border-dashed">{{this.timeLeftText}}</span>
     to get
     <span class="font-bold">40% off</span>

app/models/affiliate-link.ts

@@ -9,23 +9,19 @@ export default class AffiliateLinkModel extends Model {
 
   @hasMany('affiliate-referral', { async: false, inverse: 'affiliateLink' }) declare referrals: AffiliateReferralModel[];
 
+  @attr('string') declare affiliateName: string;
+  @attr('string') declare affiliateAvatarUrl: string;
   @attr('string') declare slug: string;
   @attr('string') declare url: string;
-  @attr('string') declare overriddenAffiliateUsername: string | null;
-  @attr('string') declare overriddenAffiliateAvatarUrl: string | null;
 
-  get avatarUrlForDisplay() {
-    return this.overriddenAffiliateAvatarUrl || this.user.avatarUrl;
+  get avatarIsGitHubAvatar(): boolean {
+    return this.affiliateAvatarUrl.includes('avatars.githubusercontent.com');
   }
 
   get totalEarningsAmountInCents() {
     return this.referrals.reduce((sum, referral) => sum + referral.totalEarningsAmountInCents, 0);
   }
 
-  get usernameForDisplay() {
-    return this.overriddenAffiliateUsername || this.user.username;
-  }
-
   get visibleReferrals(): AffiliateReferralModel[] {
     const referralsGroupedByCustomer = this.referrals.reduce(
       groupByFieldReducer((referral) => referral.customer.id),

app/templates/join-course.hbs

@@ -1,4 +1,4 @@
-{{page-title (concat "Join " this.model.affiliateLink.usernameForDisplay " on CodeCrafters") replace=true}}
+{{page-title (concat "Join " this.model.affiliateLink.affiliateName " on CodeCrafters") replace=true}}
 
 {{! Note: This is very similar to the course overview page atm so it re-uses a lot of the same components. }}
 <div class="container mx-auto lg:max-w-(--breakpoint-lg) pt-6 md:pt-10 pb-10 px-3 md:px-6">

app/templates/join-track.hbs

@@ -1,4 +1,4 @@
-{{page-title (concat "Join " this.model.affiliateLink.usernameForDisplay " on CodeCrafters") replace=true}}
+{{page-title (concat "Join " this.model.affiliateLink.affiliateName " on CodeCrafters") replace=true}}
 
 {{! Note: This is very similar to the track page atm so it re-uses a lot of the same components. }}
 <div class="container mx-auto lg:max-w-(--breakpoint-lg) px-3 md:px-6 py-6 md:py-10">

app/templates/join.hbs

@@ -1,4 +1,4 @@
-{{page-title (concat "Join " this.model.affiliateLink.usernameForDisplay " on CodeCrafters") replace=true}}
+{{page-title (concat "Join " this.model.affiliateLink.affiliateName " on CodeCrafters") replace=true}}
 
 <div class="bg-white bg-github-green-dot-wall">
   <div class="container mx-auto lg:max-w-(--breakpoint-xl) pt-8 sm:pt-16 pb-48 px-3 md:px-6">
@@ -41,7 +41,7 @@
 
     <div class="flex flex-col gap-4 justify-center items-center mt-16">
       <AffiliateLinkPage::AcceptReferralButton @affiliateLink={{this.model.affiliateLink}} />
-      <div class="text-xs text-slate-700 text-center">Get access to 40% off via @{{@model.affiliateLink.usernameForDisplay}}</div>
+      <div class="text-xs text-slate-700 text-center">Get access to 40% off via @{{this.model.affiliateLink.affiliateName}}</div>
     </div>
 
     <h2 class="text-2xl font-bold text-gray-900 md:text-3xl text-center mt-16">
@@ -56,7 +56,7 @@
 
     <div class="flex flex-col gap-4 justify-center items-center mt-16">
       <AffiliateLinkPage::AcceptReferralButton @affiliateLink={{this.model.affiliateLink}} />
-      <div class="text-xs text-slate-700 text-center">Get access to 40% off via @{{@model.affiliateLink.usernameForDisplay}}</div>
+      <div class="text-xs text-slate-700 text-center">Get access to 40% off via @{{this.model.affiliateLink.affiliateName}}</div>
     </div>
   </div>
 </div>

mirage/factories/affiliate-link.js

@@ -1,5 +1,7 @@
 import { Factory } from 'miragejs';
 
 export default Factory.extend({
+  affiliateName: () => 'test',
+  affiliateAvatarUrl: () => 'https://avatars.githubusercontent.com/u/1234567890?v=4',
   url: () => `https://app.codecrafters.io/join?via=test`,
 });

tests/acceptance/affiliate-link-page/accept-referral-offer-test.js

@@ -34,13 +34,17 @@ module('Acceptance | affiliate-link-page | accept-referral-offer', function (hoo
     signIn(this.owner, this.server);
 
     const referrer = this.server.create('user', {
-      avatarUrl: 'https://github.com/sarupbanskota.png',
+      avatarUrl: 'https://avatars.githubusercontent.com/u/1234567890?v=4',
       createdAt: new Date(),
       githubUsername: 'sarupbanskota',
       username: 'sarupbanskota',
     });
 
-    this.server.create('affiliate-link', { user: referrer });
+    this.server.create('affiliate-link', {
+      user: referrer,
+      affiliateName: 'sarupbanskota',
+      affiliateAvatarUrl: 'https://avatars.githubusercontent.com/u/1234567890?v=4',
+    });
 
     await affiliateLinkPage.visit({ via: 'referral1' });
     await affiliateLinkPage.acceptReferralButtons[0].click();