Merge pull request #2811 from codecrafters-io/arpan/cc-1703-revamp-membership-page

Add a billing tab to the settings

Author: Arpan-206

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 @@ export default class AccountDropdownComponent extends Component {
   @action
   async handleManageSubscriptionClick(dropdownActions: { close: () => void }) {
     dropdownActions.close();
-    this.router.transitionTo('membership');
+    this.router.transitionTo('settings.billing');
   }
 
   @action

app/components/membership-page/actions-section.hbs

@@ -0,0 +1,68 @@
+<Settings::FormSection @title="Membership" @description="Your CodeCrafters membership details" data-test-membership-section>
+  {{#if @user.hasActiveSubscription}}
+    <Settings::BillingPage::StatusPill @color="green" class="mb-3">
+      Membership active
+    </Settings::BillingPage::StatusPill>
+    <div class="prose prose-sm prose-compact dark:prose-invert">
+      {{#if (and @user.isVip (gt @user.vipStatusExpiresAt @user.activeSubscription.currentPeriodEnd))}}
+        <p class="line-through">
+          You have access to all CodeCrafters content, valid until
+          <strong>{{date-format @user.activeSubscription.currentPeriodEnd format="PPPp"}}</strong>.
+        </p>
+        <p>
+          🎉 You have VIP access to all CodeCrafters content, valid until
+          <strong>{{date-format @user.vipStatusExpiresAt format="PPPp"}}</strong>.
+        </p>
+      {{else}}
+        <p>
+          You have access to all CodeCrafters content, valid until
+          <strong>{{date-format @user.activeSubscription.currentPeriodEnd format="PPPp"}}</strong>.
+        </p>
+      {{/if}}
+    </div>
+  {{else if @user.isVip}}
+    <Settings::BillingPage::StatusPill @color="green" class="mb-3">
+      VIP Access
+    </Settings::BillingPage::StatusPill>
+    <div class="prose prose-sm prose-compact dark:prose-invert">
+      <p>
+        {{#if @user.vipStatusExpiresAt}}
+          🎉 You have VIP access to all CodeCrafters content, valid until
+          <strong>{{date-format @user.vipStatusExpiresAt format="PPPp"}}</strong>.
+        {{else}}
+          🎉 You have VIP access to all CodeCrafters content.
+        {{/if}}
+      </p>
+    </div>
+  {{else if @user.expiredSubscription}}
+    <Settings::BillingPage::StatusPill @color="red" class="mb-3">
+      Membership inactive
+    </Settings::BillingPage::StatusPill>
+    <div class="prose prose-sm prose-compact dark:prose-invert">
+      <p>
+        Your CodeCrafters membership is
+        <strong class="text-red-600">currently inactive</strong>.
+      </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}}
+    <Settings::BillingPage::StatusPill @color="yellow" class="mb-3">
+      No membership found
+    </Settings::BillingPage::StatusPill>
+    <div class="prose prose-sm prose-compact dark:prose-invert">
+      <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/membership-page/actions-section.js

@@ -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;
+  }
+}