Add a billing tab to the settings

app/components/billing-status-badge/member-badge.hbs

@@ -1,4 +1,4 @@
-<PrimaryLinkButton @size={{this.linkButtonSize}} @route="membership" data-test-member-badge ...attributes>
+<PrimaryLinkButton @size={{this.linkButtonSize}} @route="settings.billing" data-test-member-badge ...attributes>
 
   <span class="flex items-center">
     Member

app/components/header/account-dropdown.ts

@@ -52,7 +52,7 @@
   @action
   async handleManageSubscriptionClick(dropdownActions: { close: () => void }) {
     dropdownActions.close();
-    this.router.transitionTo('membership');
+    this.router.transitionTo('settings.billing');
   }
 
   @action

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

@@ -0,0 +1,80 @@
+<Settings::FormSection @title="Membership" @description="Your CodeCrafters membership details" data-test-membership-section>
+  {{#if @user.hasActiveSubscription}}
+    <div class="inline-flex items-center gap-2 rounded-full bg-teal-50 dark:bg-teal-900 px-2 py-1 border border-teal-500 dark:border-teal-400">
+      {{svg-jar "circle" class="h-5 w-5 text-teal-500"}}
+      <div class="text-teal-500 font-semibold uppercase text-sm">
+        Membership active
+      </div>
+    </div>
+    <div class="text-gray-500 dark:text-gray-400 text-xs mt-2">
+      {{#if (and @user.isVip (gt @user.vipStatusExpiresAt @user.activeSubscription.cancelAt))}}
+        <p class="line-through">
+          You have access to all CodeCrafters content, valid until
+          <b class="font-semibold">{{date-format @user.activeSubscription.cancelAt format="PPPp"}}</b>.
+        </p>
+        <p>
+          🎉 You have VIP access to all CodeCrafters content, valid until
+          <b class="font-semibold">{{date-format @user.vipStatusExpiresAt format="PPPp"}}</b>.
+        </p>
+      {{else}}
+        <p>
+          You have access to all CodeCrafters content, valid until
+          <b class="font-semibold">{{date-format @user.activeSubscription.cancelAt format="PPPp"}}</b>.
+        </p>
+      {{/if}}
+    </div>
+  {{else if @user.isVip}}
+    <div class="inline-flex items-center gap-2 rounded-full bg-teal-50 px-2 py-1 border border-teal-500">
+      {{svg-jar "circle" class="h-5 w-5 text-teal-500"}}
+      <div class="text-teal-500 font-semibold uppercase text-sm">
+        VIP Access
+      </div>
+    </div>
+    <div class="text-gray-500 dark:text-gray-400 text-xs mt-2">
+      <p>
+        {{#if @user.vipStatusExpiresAt}}
+          🎉 You have VIP access to all CodeCrafters content, valid until
+          <b class="font-semibold">{{date-format @user.vipStatusExpiresAt format="PPPp"}}</b>.
+        {{else}}
+          🎉 You have VIP access to all CodeCrafters content.
+        {{/if}}
+      </p>
+    </div>
+  {{else if @user.expiredSubscription}}
+    <div class="inline-flex items-center gap-2 rounded-full bg-red-50 px-2 py-1 border border-red-500">
+      {{svg-jar "circle" class="h-5 w-5 text-red-700 dark:text-red-300"}}
+      <div class="text-red-700 dark:text-red-300 font-semibold uppercase text-sm">
+        Membership inactive
+      </div>
+    </div>
+    <div class="text-gray-500 dark:text-gray-400 text-xs mt-2">
+      <p>
+        Your CodeCrafters membership is
+        <b class="text-red-600 font-semibold">currently inactive</b>.
+      </p>
+      <p>
+        Start a new membership to get access to
+        <a href="https://docs.codecrafters.io/membership" target="_blank" rel="noopener noreferrer">membership benefits</a>.
+      </p>
+    </div>
+    <PrimaryLinkButton @size="small" @route="pay" class="mt-3">
+      Start membership →
+    </PrimaryLinkButton>
+  {{else}}
+    <div class="inline-flex items-center gap-2 rounded-full bg-yellow-50 px-2 py-1 border border-yellow-500">
+      {{svg-jar "circle" class="h-5 w-5 text-yellow-500"}}
+      <div class="text-yellow-500 font-semibold uppercase text-sm">
+        No membership found
+      </div>
+    </div>
+    <div class="text-gray-500 dark:text-gray-400 text-xs mt-2">
+      <p>
+        You don't have a CodeCrafters membership. Start one to get access to
+        <a href="https://docs.codecrafters.io/membership" target="_blank" rel="noopener noreferrer">membership benefits</a>.
+      </p>
+    </div>
+    <PrimaryLinkButton @size="small" @route="pay" class="mt-3">
+      Start membership →
+    </PrimaryLinkButton>
+  {{/if}}
+</Settings::FormSection>

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

@@ -0,0 +1,18 @@
+import Component from '@glimmer/component';
+import type UserModel from 'codecrafters-frontend/models/user';
+
+interface Signature {
+  Element: HTMLDivElement;
+
+  Args: {
+    user: UserModel;
+  };
+}
+
+export default class MembershipSectionComponent extends Component<Signature> {}
+
+declare module '@glint/environment-ember-loose/registry' {
+  export default interface Registry {
+    'Settings::BillingPage::MembershipSection': typeof MembershipSectionComponent;
+  }
+}

app/components/settings/billing-page/payment-history-section.hbs

@@ -0,0 +1,63 @@
+<Settings::FormSection @title="Payment history" @description="Details of your previous payments" data-test-payment-history-section>
+  {{#if this.isLoading}}
+    <div class="flex justify-center py-8">
+      <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-gray-900 dark:border-gray-100"></div>
+    </div>
+  {{else if this.errorMessage}}
+    <div class="bg-red-50 dark:bg-red-900 border border-red-200 dark:border-red-400 rounded-md p-4">
+      <div class="flex gap-3">
+        <div class="flex-shrink-0">
+          {{svg-jar "x-circle" class="h-5 w-5 text-red-700 dark:text-red-300"}}
+        </div>
+        <p class="text-sm text-red-700 dark:text-red-300">{{this.errorMessage}}</p>
+      </div>
+    </div>
+  {{else if (gt this.charges.length 0)}}
+    <div class="grid grid-cols-3 gap-y-3">
+      <div class="border-b pb-2 text-gray-500 dark:text-gray-400 text-sm">Date</div>
+      <div class="border-b pb-2 text-gray-500 dark:text-gray-400 text-sm text-right">Amount</div>
+      <div class="border-b pb-2"></div>
+
+      {{#each this.charges as |charge|}}
+        <div class="text-gray-600 dark:text-gray-300 text-sm">
+          {{date-format charge.createdAt format="PPP"}}
+        </div>
+        <div
+          class="{{if charge.statusIsFailed 'text-red-600 dark:text-red-400' 'text-gray-600 dark:text-gray-300'}} text-sm text-right"
+          data-test-payment-history-item
+        >
+          <span class="font-semibold" data-test-amount>{{charge.displayString}}</span>
+          {{#if (gt charge.amountRefunded 0)}}
+            {{#if charge.isFullyRefunded}}
+              <span class="text-red-600 dark:text-red-400" data-test-refund-text>(refunded)</span>
+            {{else}}
+              <span class="text-red-600 dark:text-red-400" data-test-refund-text>(<span
+                  class="font-semibold"
+                >{{charge.refundedAmountDisplayString}}</span>
+                refunded)</span>
+            {{/if}}
+          {{/if}}
+        </div>
+        <div class="flex items-center justify-end">
+          {{#if (and charge.invoiceId charge.statusIsSucceeded)}}
+            <a
+              href={{charge.invoiceDownloadUrl}}
+              target="_blank"
+              class="text-teal-500 dark:text-teal-400 hover:text-teal-600 dark:hover:text-teal-300 font-semibold text-sm"
+              data-test-download-invoice-link
+              rel="noopener noreferrer"
+            >
+              Download Invoice
+            </a>
+          {{else if charge.statusIsFailed}}
+            <span class="text-gray-600 dark:text-gray-300 text-sm">Payment failed</span>
+          {{/if}}
+        </div>
+      {{/each}}
+    </div>
+  {{else}}
+    <div class="text-gray-700 dark:text-gray-200">
+      No payment history found.
+    </div>
+  {{/if}}
+</Settings::FormSection>

app/components/settings/billing-page/payment-history-section.ts

@@ -0,0 +1,52 @@
+import Component from '@glimmer/component';
+import { inject as service } from '@ember/service';
+import { tracked } from '@glimmer/tracking';
+import * as Sentry from '@sentry/ember';
+import type Store from '@ember-data/store';
+import type UserModel from 'codecrafters-frontend/models/user';
+import type ChargeModel from 'codecrafters-frontend/models/charge';
+
+interface Signature {
+  Element: HTMLDivElement;
+  Args: {
+    user: UserModel;
+  };
+}
+
+export default class PaymentHistorySectionComponent extends Component<Signature> {
+  @service declare store: Store;
+
+  @tracked charges: ChargeModel[] = [];
+  @tracked errorMessage: string | null = null;
+  @tracked isLoading = true;
+
+  constructor(owner: unknown, args: Signature['Args']) {
+    super(owner, args);
+    this.loadCharges();
+  }
+
+  async loadCharges() {
+    this.isLoading = true;
+    this.errorMessage = null;
+
+    try {
+      const result = await this.store.query('charge', {
+        filter: { user_id: this.args.user.id },
+      });
+      this.charges = result.toArray();
+    } catch (error) {
+      console.error('Failed to fetch charges:', error);
+      this.errorMessage = 'Failed to load payment history. Please try again later.';
+      Sentry.captureException(error);
+      this.charges = [];
+    } finally {
+      this.isLoading = false;
+    }
+  }
+}
+
+declare module '@glint/environment-ember-loose/registry' {
+  export default interface Registry {
+    'Settings::BillingPage::PaymentHistorySection': typeof PaymentHistorySectionComponent;
+  }
+}

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

@@ -0,0 +1,12 @@
+<Settings::FormSection @title="Renewal" @description="Details of your upcoming payment">
+  <div class="inline-flex items-center gap-2 rounded-full bg-gray-50 dark:bg-gray-800 px-2 py-1 border border-gray-300 dark:border-gray-600">
+    {{svg-jar "circle" class="h-5 w-5 text-gray-400"}}
+    <div class="text-gray-400 font-semibold uppercase text-sm">
+      Auto-renew disabled
+    </div>
+  </div>
+
+  <div class="text-gray-500 dark:text-gray-400 text-xs mt-2">
+    Your membership does not renew automatically. Once your membership expires, you'll be able to make a new one-time payment.
+  </div>
+</Settings::FormSection>

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

@@ -0,0 +1,13 @@
+import Component from '@glimmer/component';
+
+interface Signature {
+  Element: HTMLDivElement;
+}
+
+export default class RenewalSectionComponent extends Component<Signature> {}
+
+declare module '@glint/environment-ember-loose/registry' {
+  export default interface Registry {
+    'Settings::BillingPage::RenewalSection': typeof RenewalSectionComponent;
+  }
+}

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

@@ -0,0 +1,14 @@
+<Settings::FormSection @title="Support" @description="How to get help with billing">
+  <a href="mailto:[email protected]?subject=Billing help (account: {{@user.username}})" class="inline-block rounded" data-test-support-section>
+    <PrimaryButton @size="small" data-test-support-contact-button>
+      Get help
+    </PrimaryButton>
+  </a>
+  <div class="text-gray-500 dark:text-gray-400 text-xs mt-3">
+    <p>
+      Questions? Click the button above or write to us at
+      <a href="mailto:[email protected]" class="underline text-blue-500 dark:text-blue-400">[email protected]</a>
+      and we'll help sort things out.
+    </p>
+  </div>
+</Settings::FormSection>

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

@@ -0,0 +1,17 @@
+import Component from '@glimmer/component';
+import type UserModel from 'codecrafters-frontend/models/user';
+
+interface Signature {
+  Element: HTMLDivElement;
+  Args: {
+    user: UserModel;
+  };
+}
+
+export default class SupportSectionComponent extends Component<Signature> {}
+
+declare module '@glint/environment-ember-loose/registry' {
+  export default interface Registry {
+    'Settings::BillingPage::SupportSection': typeof SupportSectionComponent;
+  }
+}

app/controllers/settings.ts

@@ -15,6 +15,7 @@ export default class SettingsController extends Controller {
   get tabs() {
     return [
       { route: 'settings.profile', label: 'Profile' },
+      { route: 'settings.billing', label: 'Billing' },
       { route: 'settings.account', label: 'Account' },
     ];
   }

app/controllers/settings/billing.ts

@@ -0,0 +1,11 @@
+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[];
+}
+
+export default class BillingController extends Controller {
+  declare model: BillingModelType;
+}

app/router.ts

@@ -81,6 +81,7 @@ Router.map(function () {
 
   this.route('settings', function () {
     this.route('profile');
+    this.route('billing');
     this.route('account');
   });
 

app/routes/pay.ts

@@ -28,7 +28,7 @@ export default class PayRoute extends BaseRoute {
     await this.authenticator.authenticate();
 
     if (this.authenticator.currentUser && this.authenticator.currentUser.hasActiveSubscription) {
-      this.router.transitionTo('membership');
+      this.router.transitionTo('settings.billing');
 
       return;
     }

app/templates/settings/billing.hbs

@@ -0,0 +1,7 @@
+<Settings::BillingPage::MembershipSection @user={{@model.user}} />
+<Settings::FormDivider />
+<Settings::BillingPage::RenewalSection />
+<Settings::FormDivider />
+<Settings::BillingPage::SupportSection @user={{@model.user}} />
+<Settings::FormDivider />
+<Settings::BillingPage::PaymentHistorySection @user={{@model.user}} />