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

Update all references from usernameForDisplay and 
overriddenAffiliateAvatarUrl to affiliateUsername and affiliateAvatarUrl
respectively. Remove deprecated overridden fields from the AffiliateLink
model. These changes unify how affiliate usernames and avatars are 
handled and ensure consistent display
across referral notices, join pages, and membership plan components.

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.affiliateUsername}}'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

@@ -5,23 +5,15 @@
   ...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}}
+    <img alt="avatar" src={{@affiliateLink.affiliateAvatarUrl}} class="w-16 h-16 mr-2" />
 
     {{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"}}
 
     <img class="h-14" src={{this.logoImage}} alt="CodeCrafters" />
   </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.affiliateUsername}}</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.affiliateUsername}}'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,13 @@
   </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}}
-      <img
-        alt="avatar"
-        src={{@discount.affiliateReferral.affiliateLink.overriddenAffiliateAvatarUrl}}
-        class="inline-block mb-0 w-6 h-6 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"
-      />
-    {{/if}}
+    <img
+      alt="avatar"
+      src={{@discount.affiliateReferral.affiliateLink.affiliateAvatarUrl}}
+      class="inline-block mb-0 w-6 h-6 transform -translate-y-px"
+    />
 
-    <b>{{@discount.affiliateReferral.affiliateLink.usernameForDisplay}}</b>'s referral offer: Subscribe in
+    <b>{{@discount.affiliateReferral.affiliateLink.affiliateUsername}}</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,15 @@ export default class AffiliateLinkModel extends Model {
 
   @hasMany('affiliate-referral', { async: false, inverse: 'affiliateLink' }) declare referrals: AffiliateReferralModel[];
 
+  @attr('string') declare affiliateUsername: 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 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.affiliateUsername " 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.affiliateUsername " 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.affiliateUsername " 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 @{{@model.affiliateLink.affiliateUsername}}</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 @{{@model.affiliateLink.affiliateUsername}}</div>
     </div>
   </div>
 </div>