Skip to content

refactor: simplify affiliate referral status display logic #2973

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Aug 4, 2025
Merged

refactor: simplify affiliate referral status display logic #2973

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
62 changes: 31 additions & 31 deletions app/components/affiliate-page/affiliate-referred-user-item.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,44 +22,44 @@
</div>
</div>
</a>
<div class="flex items-center flex-wrap gap-y-2">
<div class="flex items-center flex-wrap gap-2">
{{#if (gt @affiliateReferral.totalEarningsAmountInDollars 0)}}
<div class="flex shrink-0">
<span
class="inline-flex border border-green-300 rounded-full bg-green-100 px-2 text-xs font-semibold leading-5 text-green-700 mr-2"
>${{@affiliateReferral.spentAmountInDollars}} spent</span>
<Pill @color="green" class="shrink-0">
${{@affiliateReferral.spentAmountInDollars}}
spent

<EmberTooltip @text="This is the amount {{@affiliateReferral.customer.username}} has spent so far." />
</div>
</Pill>
{{/if}}

{{#if (gt @affiliateReferral.upcomingPaymentAmountInDollars 0)}}
<div class="flex shrink-0">
<span
class="inline-flex border border-yellow-300 rounded-full bg-yellow-100 px-2 text-xs font-semibold leading-5 text-yellow-700 mr-2"
>${{@affiliateReferral.upcomingPaymentAmountInDollars}} pending</span>
<Pill @color="yellow" class="shrink-0">
${{@affiliateReferral.upcomingPaymentAmountInDollars}}
pending

<EmberTooltip @text="This is the value of {{@affiliateReferral.customer.username}}'s upcoming payment." />
</div>
</Pill>
{{/if}}
<div class="flex shrink-0">
{{#if @affiliateReferral.statusIsTrialing}}
<span
class="inline-flex border border-yellow-300 rounded-full bg-yellow-100 px-2 text-xs font-semibold leading-5 text-yellow-700 mr-2"
>Trialing</span>
<EmberTooltip @text="This user has started a trial. We haven't received their first payment yet." />
{{else if @affiliateReferral.statusIsPendingTrial}}
<span class="inline-flex border border-gray-300 rounded-full bg-gray-100 px-2 text-xs font-semibold leading-5 text-gray-700 mr-2">Signed up</span>
<EmberTooltip @text="This user has accepted your referral offer but hasn't started a trial yet." />
{{else if @affiliateReferral.statusIsFirstChargeSuccessful}}
<span
class="inline-flex border border-green-300 rounded-full bg-green-100 px-2 text-xs font-semibold leading-5 text-green-700 mr-2"
>Paid</span>

{{#if @affiliateReferral.statusIsAwaitingFirstCharge}}
<Pill @color="gray" class="shrink-0">
Signed up

<EmberTooltip @text="This user has accepted your referral offer but hasn't made a payment yet." />
</Pill>
{{else if @affiliateReferral.statusIsFirstChargeSuccessful}}
<Pill @color="green" class="shrink-0">
Paid

<EmberTooltip @text="This user has made at least one payment that is attributable to you." />
{{else}}
<span
class="inline-flex border border-gray-300 rounded-full bg-gray-100 px-2 text-xs font-semibold leading-5 text-gray-700 mr-2"
>Inactive</span>
<EmberTooltip @text="This user either cancelled their trial, joined a paid team account or availed a separate discount." />
{{/if}}
</div>
</Pill>
{{else}}
<Pill @color="gray" class="shrink-0">
Inactive

<EmberTooltip @text="This user either joined a paid team account or availed a separate discount." />
</Pill>
{{/if}}
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Bug: Legacy Affiliate Statuses Incorrectly Marked Inactive

Affiliate referrals with legacy statuses ('trialing', 'pending_trial', 'trial_cancelled') incorrectly display as "Inactive". The updated template logic only checks for statusIsAwaitingFirstCharge and statusIsFirstChargeSuccessful, causing unhandled old statuses to fall through to the default "Inactive" state and misrepresent active trials.

Fix in Cursor Fix in Web


<span class="text-gray-400 text-xs hidden lg:block">{{date-from-now @affiliateReferral.activatedAt}}</span>
</div>
Expand Down
22 changes: 5 additions & 17 deletions app/models/affiliate-referral.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,20 +8,20 @@ export default class AffiliateReferralModel extends Model {
@belongsTo('affiliate-link', { async: false, inverse: 'referrals' }) declare affiliateLink: AffiliateLinkModel;

@attr('date') declare activatedAt: Date;
@attr('string') declare status: 'pending_trial' | 'trialing' | 'first_charge_successful' | 'trial_cancelled' | 'inactive';
@attr('string') declare status: 'awaiting_first_charge' | 'first_charge_successful' | 'inactive';
@attr('number') declare spentAmountInCents: number;
@attr('number') declare upcomingPaymentAmountInCents: number;
@attr('number') declare withdrawableEarningsAmountInCents: number;
@attr('number') declare withheldEarningsAmountInCents: number;

get hasStartedTrial() {
return this.statusIsTrialing || this.statusIsFirstChargeSuccessful || this.statusIsTrialCancelled;
}

get spentAmountInDollars() {
return this.spentAmountInCents / 100;
}

get statusIsAwaitingFirstCharge() {
return this.status === 'awaiting_first_charge';
}

get statusIsFirstChargeSuccessful() {
return this.status === 'first_charge_successful';
}
Expand All @@ -30,18 +30,6 @@ export default class AffiliateReferralModel extends Model {
return this.status === 'inactive';
}

get statusIsPendingTrial() {
return this.status === 'pending_trial';
}

get statusIsTrialCancelled() {
return this.status === 'trial_cancelled';
}

get statusIsTrialing() {
return this.status === 'trialing';
}

get totalEarningsAmountInCents() {
return this.withdrawableEarningsAmountInCents + this.withheldEarningsAmountInCents;
}
Expand Down