Add a billing tab to the settings

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

@@ -0,0 +1,83 @@
+{{#if @user.isVip}}
+  <div
+    class="inline-flex items-center gap-2 rounded-full bg-teal-50 px-2 py-1 border border-teal-500 has-active-plan has-vip-access"
+    data-test-membership-section
+  >
+    <StaticDot @color="green" @size="large" />
+    <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.hasActiveSubscription}}
+  <div class="inline-flex items-center gap-2 rounded-full bg-teal-50 px-2 py-1 border border-teal-500 has-active-plan" data-test-membership-section>
+    <StaticDot @color="green" @size="large" />
+    <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 @user.activeSubscription.cancelAt}}
+      <p class="mb-3">
+        Your CodeCrafters membership is valid until
+        <b class="font-semibold">{{date-format @user.activeSubscription.cancelAt format="PPPp"}}</b>.
+      </p>
+      <p>Your membership doesn't renew automatically. To restart your membership, make a new one-time payment.</p>
+    {{else}}
+      <p>
+        You are currently subscribed to the
+        <b class="font-semibold">{{@user.activeSubscription.pricingPlanName}}</b>
+        plan.
+      </p>
+    {{/if}}
+  </div>
+{{else if @user.activeSubscription}}
+  <div class="inline-flex items-center gap-2 rounded-full bg-red-50 px-2 py-1 border border-red-500" data-test-membership-section>
+    <StaticDot @color="red" @size="large" />
+    <div class="text-red-500 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" data-test-membership-section>
+    <StaticDot @color="yellow" @size="large" />
+    <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}}

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,45 @@
+{{#if (gt @charges.length 0)}}
+  <div class="grid grid-cols-3 gap-y-3" data-test-payment-history-section>
+
+    <div class="border-b pb-2 text-gray-500 text-sm">Date</div>
+    <div class="border-b pb-2 text-gray-500 text-sm text-right">Amount</div>
+    <div class="border-b pb-2"></div>
+
+    {{#each @charges as |charge|}}
+      <div class="text-gray-600 text-sm">
+        {{date-format charge.createdAt format="PPP"}}
+      </div>
+      <div class="{{if charge.statusIsFailed 'text-red-600' 'text-gray-600'}} 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 data-test-refund-text>(refunded)</span>
+          {{else}}
+            <span 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 hover:text-teal-600 font-semibold text-sm"
+            data-test-status
+            data-test-download-invoice-link
+            rel="noopener noreferrer"
+          >
+            Download Invoice
+          </a>
+        {{else if charge.statusIsFailed}}
+          <span class="text-gray-600 text-sm" data-test-status>Payment failed</span>
+        {{/if}}
+      </div>
+    {{/each}}
+  </div>
+{{else}}
+  <div class="text-gray-700 is-empty" data-test-payment-history-section data-test-empty-state>
+    No payment history found.
+  </div>
+{{/if}}

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

@@ -0,0 +1,18 @@
+import Component from '@glimmer/component';
+import type ChargeModel from 'codecrafters-frontend/models/charge';
+
+interface Signature {
+  Element: HTMLDivElement;
+
+  Args: {
+    charges: ChargeModel[];
+  };
+}
+
+export default class PaymentHistorySectionComponent extends Component<Signature> {}
+
+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,10 @@
+<div class="inline-flex items-center gap-2 rounded-full bg-gray-50 px-2 py-1 border border-gray-300">
+  <StaticDot @color="gray" @size="large" />
+  <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>

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,12 @@
+<a href="mailto:hello@codecrafters.io?subject=Billing help (account: {{@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:hello@codecrafters.io" class="underline text-blue-500 dark:text-blue-400">hello@codecrafters.io</a>
+    and we'll help sort things out.
+  </p>
+</div>

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

@@ -0,0 +1,17 @@
+import Component from '@glimmer/component';
+
+interface Signature {
+  Element: HTMLDivElement;
+
+  Args: {
+    username: string;
+  };
+}
+
+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/settings/billing.ts

@@ -0,0 +1,23 @@
+import Route from '@ember/routing/route';
+import type ChargeModel from 'codecrafters-frontend/models/charge';
+import { inject as service } from '@ember/service';
+import type Store from '@ember-data/store';
+import type { ModelType as SettingsModelType } from 'codecrafters-frontend/routes/settings';
+
+interface BillingModelType extends SettingsModelType {
+  charges: ChargeModel[];
+}
+
+export default class BillingRoute extends Route {
+  @service declare store: Store;
+
+  async model(): Promise<BillingModelType> {
+    const user = this.modelFor('settings') as SettingsModelType;
+    const charges = await this.store.findAll('charge');
+
+    return {
+      user: user.user,
+      charges: charges.toArray(),
+    };
+  }
+}

app/templates/settings/billing.hbs

@@ -0,0 +1,24 @@
+{{! template-lint-disable no-implicit-this }}
+<Settings::FormSection @title="Membership" @description="Your CodeCrafters membership details">
+  <Settings::BillingPage::MembershipSection @user={{this.model.user}} />
+</Settings::FormSection>
+
+<Settings::FormDivider />
+
+<Settings::FormSection @title="Renewal" @description="Details of your upcoming payment">
+  <Settings::BillingPage::RenewalSection />
+</Settings::FormSection>
+
+<Settings::FormDivider />
+
+<Settings::FormSection @title="Support" @description="How to get help with billing">
+  <Settings::BillingPage::SupportSection @username={{this.model.user.username}} />
+</Settings::FormSection>
+
+<Settings::FormDivider />
+
+<Settings::FormSection @title="Payment history" @description="Details of your previous payments">
+  {{#let this.model.charges as |charges|}}
+    <Settings::BillingPage::PaymentHistorySection @charges={{charges}} />
+  {{/let}}
+</Settings::FormSection>

mirage/models/charge.js

@@ -0,0 +1,13 @@
+import { Model, belongsTo } from 'miragejs';
+
+export default Model.extend({
+  user: belongsTo(),
+  amount: 0,
+  amountRefunded: 0,
+  currency: 'usd',
+  createdAt() {
+    return new Date(); // Done this way due to linting error and shared objects
+  },
+  invoiceId: null,
+  status: 'succeeded',
+});