feat(billing): add membership renewal extension flow

Add ability to extend active subscriptions within 45 days of expiry by 
introducing `canBeExtended` getter on Subscription model. Update renewal 
section to reflect membership renewal status and conditionally enable the 
extend membership button with tooltip showing the earliest extension date. 
Pass active subscription to renewal section and handle button click action.

Author: rohitpaulk

app/components/settings/billing-page/renewal-section.hbs

@@ -1,8 +1,38 @@
-<Settings::FormSection @title="Renewal" @description="Details of your upcoming payment">
+<Settings::FormSection @title="Renewal" @description="Details on renewing your membership" data-test-renewal-section>
   <Settings::BillingPage::StatusPill @color="gray" class="mb-3">
-    Auto-renew disabled
+    Auto-renew off
   </Settings::BillingPage::StatusPill>
-  <div class="prose prose-sm prose-compact dark:prose-invert">
-    Your membership does not renew automatically. Once your membership expires, you'll be able to make a new one-time payment.
+
+  <div class="prose prose-sm prose-compact dark:prose-invert mb-4" data-test-explanation-text>
+    {{#if @subscription.canBeExtended}}
+      <p>
+        Your membership does not renew automatically.
+      </p>
+      <p>
+        If you extend your membership before expiry, unused time will be added to your new membership.
+      </p>
+    {{else}}
+      <p>
+        Your membership does not renew automatically.
+      </p>
+      <p>
+        45 days before your membership expires, you'll be able to extend it below.
+      </p>
+    {{/if}}
   </div>
+
+  {{#if @subscription.canBeExtended}}
+    <PrimaryButton @size="small" {{on "click" @onExtendMembershipButtonClick}} data-test-extend-membership-button>
+      Extend membership →
+    </PrimaryButton>
+  {{else}}
+    <PrimaryButton @size="small" @isDisabled={{true}} data-test-extend-membership-button>
+      Extend membership →
+
+      <EmberTooltip>
+        This membership can only be extended after
+        {{date-format @subscription.extendableAt format="PPP"}}.
+      </EmberTooltip>
+    </PrimaryButton>
+  {{/if}}
 </Settings::FormSection>

app/components/settings/billing-page/renewal-section.ts

@@ -1,7 +1,13 @@
 import Component from '@glimmer/component';
+import type SubscriptionModel from 'codecrafters-frontend/models/subscription';
 
 interface Signature {
   Element: HTMLDivElement;
+
+  Args: {
+    onExtendMembershipButtonClick: () => void;
+    subscription: SubscriptionModel;
+  };
 }
 
 export default class RenewalSection extends Component<Signature> {}

app/controllers/settings/billing.ts

@@ -1,11 +1,20 @@
+import { inject as service } from '@ember/service';
 import Controller from '@ember/controller';
-import type ChargeModel from 'codecrafters-frontend/models/charge';
 import type { ModelType as SettingsModelType } from 'codecrafters-frontend/routes/settings';
-
-interface BillingModelType extends SettingsModelType {
-  charges: ChargeModel[];
-}
+import { tracked } from '@glimmer/tracking';
+import type RegionalDiscountModel from 'codecrafters-frontend/models/regional-discount';
+import { task } from 'ember-concurrency';
+import Store from '@ember-data/store';
 
 export default class BillingController extends Controller {
-  declare model: BillingModelType;
+  declare model: SettingsModelType;
+
+  @service declare store: Store;
+
+  @tracked chooseMembershipPlanModalIsOpen: boolean = false;
+  @tracked regionalDiscount: RegionalDiscountModel | null = null;
+
+  loadRegionalDiscountTask = task({ keepLatest: true }, async () => {
+    this.regionalDiscount = await this.store.createRecord('regional-discount').fetchCurrent();
+  });
 }

app/models/subscription.ts

@@ -11,11 +11,29 @@ export default class SubscriptionModel extends Model {
   @belongsTo('subscription-source', { async: false, inverse: null, polymorphic: true }) declare source: InstitutionMembershipGrantModel;
   @belongsTo('user', { async: false, inverse: 'subscriptions' }) declare user: UserModel;
 
+  get canBeExtended(): boolean {
+    return !!this.extendableAt && new Date() >= this.extendableAt;
+  }
+
+  // A membership can be extended up to 45 days before it expires
+  get extendableAt(): Date | null {
+    if (!this.isActive || this.isLifetimeMembership) {
+      return null;
+    }
+
+    return new Date(this.cancelAt.getTime() - 45 * 24 * 60 * 60 * 1000);
+  }
+
   get isActive() {
     return !this.endedAt && !this.isNew;
   }
 
   get isInactive() {
     return this.endedAt;
   }
+
+  // A lifetime membership is modeled as 100 year expiry, we check for 50 here to be safe
+  get isLifetimeMembership(): boolean {
+    return this.cancelAt >= new Date(Date.now() + 50 * 365 * 24 * 60 * 60 * 1000); // 50 years from now
+  }
 }

app/templates/settings/billing.hbs

@@ -1,11 +1,30 @@
 <Settings::BillingPage::MembershipSection @user={{@model.user}} />
 <Settings::FormDivider />
 
-{{#if @model.user.hasActiveSubscription}}
-  <Settings::BillingPage::RenewalSection />
-  <Settings::FormDivider />
+{{#if @model.user.activeSubscription}}
+  {{#unless @model.user.activeSubscription.isLifetimeMembership}}
+    <Settings::BillingPage::RenewalSection
+      @onExtendMembershipButtonClick={{fn (mut this.chooseMembershipPlanModalIsOpen) true}}
+      @subscription={{@model.user.activeSubscription}}
+    />
+
+    <Settings::FormDivider />
+  {{/unless}}
 {{/if}}
 
 <Settings::BillingPage::SupportSection @user={{@model.user}} />
 <Settings::FormDivider />
-<Settings::BillingPage::PaymentHistorySection @user={{@model.user}} />
+<Settings::BillingPage::PaymentHistorySection @user={{@model.user}} />
+
+{{#if this.chooseMembershipPlanModalIsOpen}}
+  <ModalBackdrop>
+    <PayPage::ChooseMembershipPlanModal
+      {{! @glint-expect-error mut types are broken  }}
+      @onClose={{fn (mut this.chooseMembershipPlanModalIsOpen) false}}
+      {{! we don't support discounts on extensions yet !}}
+      @activeDiscountForYearlyPlan={{null}}
+      {{! we're expecting this to be loaded by the time someone clicks on the extend membership button }}
+      @regionalDiscount={{this.regionalDiscount}}
+    />
+  </ModalBackdrop>
+{{/if}}

tests/pages/settings/billing-page.ts

@@ -1,7 +1,10 @@
-import { hasClass, visitable, collection, text, attribute } from 'ember-cli-page-object';
+import { hasClass, visitable, collection, text, attribute, triggerable } from 'ember-cli-page-object';
+import ChooseMembershipPlanModal from 'codecrafters-frontend/tests/pages/components/choose-membership-plan-modal';
 import createPage from 'codecrafters-frontend/tests/support/create-page';
 
 export default createPage({
+  chooseMembershipPlanModal: ChooseMembershipPlanModal,
+
   membershipSection: {
     scope: '[data-test-membership-section]',
   },
@@ -15,6 +18,18 @@ export default createPage({
     scope: '[data-test-payment-history-section]',
   },
 
+  renewalSection: {
+    explanationText: text('[data-test-explanation-text]'),
+
+    extendMembershipButton: {
+      isDisabled: hasClass('cursor-not-allowed'),
+      hover: triggerable('mouseenter'),
+      scope: '[data-test-extend-membership-button]',
+    },
+
+    scope: '[data-test-renewal-section]',
+  },
+
   supportSection: {
     scope: '[data-test-support-section]',
     contactButtonHref: attribute('href', '[data-test-support-contact-button]'),