feat: show refunded status and hide newsletter toggle for refunded members

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: markgoho

members/src/app/membership/membership.html

@@ -119,6 +119,8 @@ <h1 class="welcome-greeting">Welcome back, {{ userDisplayName() }}!</h1>
       @if (userDocument(); as userDoc) {
         @if (userDoc.membershipActive) {
           <span class="membership-badge">Active Member</span>
+        } @else if (isRefunded()) {
+          <span class="membership-badge membership-badge--refunded">Membership Refunded</span>
         }
       }
     </div>
@@ -153,7 +155,7 @@ <h2 id="account-heading" class="section-heading">Your Account Details</h2>
         </section>
 
         <!-- Newsletter Preferences Card -->
-        @if (!hasClaimableProfile()) {
+        @if (!hasClaimableProfile() && !isRefunded()) {
           <section class="membership-card card-2" aria-labelledby="newsletter-heading">
             <h2 id="newsletter-heading" class="section-heading">Newsletter Preferences</h2>
             <div class="newsletter-content">

members/src/app/membership/membership.scss

@@ -54,6 +54,10 @@
   padding: var(--space-3xs) var(--space-s);
   border-radius: 999px;
   margin-block-start: var(--space-2xs);
+
+  &--refunded {
+    background: var(--brown-400);
+  }
 }
 
 // --- Card Grid ---

members/src/app/membership/membership.ts

@@ -107,6 +107,11 @@ export class Membership {
     return userDocument?.newsletterSubscribed ?? false;
   });
 
+  protected isRefunded = computed(() => {
+    const userDocument = this.userDocument();
+    return userDocument?.subscriptionStatus === 'refunded';
+  });
+
   // Hide newsletter preferences when there's a claimable profile (will be updated on claim)
   protected hasClaimableProfile = computed(() => {
     return this.claimableProfileResource.hasValue() && !!this.claimableProfileResource.value();