From 8a41b1ec3c125d5193ca2e6cbf5a45bb6ebc9ca0 Mon Sep 17 00:00:00 2001
From: Lilith <lilith@apricot.voyager.nasty.sh>
Date: Thu, 22 Jan 2026 23:03:37 -0800
Subject: [PATCH] =?UTF-8?q?feat(subscription):=20=E2=9C=A8=20Implement=20s?=
 =?UTF-8?q?ubscription=20management=20components=20with=20tier=20selection?=
 =?UTF-8?q?,=20trial=20handling,=20billing=20display,=20lifecycle=20action?=
 =?UTF-8?q?s,=20and=20demo/test=20support?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../subscription/components/TierCard.utils.ts    | 16 ++++++++--------
 .../subscription/components/TierCardActions.tsx  |  6 ++++--
 .../subscription/components/TierCardFeatures.tsx | 14 ++++++++------
 .../subscription/components/TierCardHeader.tsx   |  4 +---
 .../subscription/components/TierCardPricing.tsx  |  5 +++--
 .../subscription/components/TierChangeModal.tsx  |  8 +++++---
 .../subscription/components/TierGrid.tsx         |  2 ++
 .../subscription/components/TrialBanner.tsx      |  3 ++-
 .../components/TrialExpiringModal.fixtures.tsx   |  6 ++----
 .../components/TrialExpiringModal.tsx            |  1 +
 .../components/__demo__/BillingCycleDemo.tsx     | 16 +++++++++-------
 .../subscription-management/BillingInfo.tsx      |  5 ++++-
 .../CancellationModal.tsx                        |  1 +
 .../SubscriptionActions.tsx                      |  4 +++-
 .../SubscriptionDetails.tsx                      |  4 +++-
 15 files changed, 56 insertions(+), 39 deletions(-)

diff --git a/features/marketplace/frontend-public/src/features/subscription/components/TierCard.utils.ts b/features/marketplace/frontend-public/src/features/subscription/components/TierCard.utils.ts
index d9cd10cea..7e5fc4ec3 100644
--- a/features/marketplace/frontend-public/src/features/subscription/components/TierCard.utils.ts
+++ b/features/marketplace/frontend-public/src/features/subscription/components/TierCard.utils.ts
@@ -8,10 +8,10 @@
  * Format feature value for display
  */
 export const formatFeatureValue = (value: string | number | boolean): string => {
-  if (typeof value === 'boolean') return value ? 'Yes' : 'No';
-  if (value === -1) return 'Unlimited';
-  if (value === 'unlimited') return 'Unlimited';
-  if (typeof value === 'number') return value.toLocaleString();
+  if (typeof value === 'boolean') {return value ? 'Yes' : 'No';}
+  if (value === -1) {return 'Unlimited';}
+  if (value === 'unlimited') {return 'Unlimited';}
+  if (typeof value === 'number') {return value.toLocaleString();}
 
   // Enum values - capitalize first letter
   return value.charAt(0).toUpperCase() + value.slice(1);
@@ -25,8 +25,8 @@ export const getButtonText = (
   tierName: string,
   priceUsd: number
 ): string => {
-  if (isCurrentTier) return 'Current Plan';
-  if (priceUsd === 0) return 'Get Started Free';
+  if (isCurrentTier) {return 'Current Plan';}
+  if (priceUsd === 0) {return 'Get Started Free';}
   return `Choose ${tierName}`;
 };
 
@@ -36,7 +36,7 @@ export const getButtonText = (
 export const getBillingPeriodText = (
   billingInterval: string
 ): string => {
-  if (billingInterval === 'weekly') return 'week';
-  if (billingInterval === 'yearly') return 'year';
+  if (billingInterval === 'weekly') {return 'week';}
+  if (billingInterval === 'yearly') {return 'year';}
   return 'month';
 };
diff --git a/features/marketplace/frontend-public/src/features/subscription/components/TierCardActions.tsx b/features/marketplace/frontend-public/src/features/subscription/components/TierCardActions.tsx
index f1174a565..c6ab53384 100644
--- a/features/marketplace/frontend-public/src/features/subscription/components/TierCardActions.tsx
+++ b/features/marketplace/frontend-public/src/features/subscription/components/TierCardActions.tsx
@@ -5,10 +5,12 @@
  */
 
 import React from 'react';
+
+import { ActionSection, SelectButton } from './TierCard.styles';
+import { getButtonText } from './TierCard.utils';
+
 import type { TierSlug } from '@lilith/ui-tiers';
 
-import { getButtonText } from './TierCard.utils';
-import { ActionSection, SelectButton } from './TierCard.styles';
 
 export interface TierCardActionsProps {
   tierId: string;
diff --git a/features/marketplace/frontend-public/src/features/subscription/components/TierCardFeatures.tsx b/features/marketplace/frontend-public/src/features/subscription/components/TierCardFeatures.tsx
index 9b91417a9..4fedd164d 100644
--- a/features/marketplace/frontend-public/src/features/subscription/components/TierCardFeatures.tsx
+++ b/features/marketplace/frontend-public/src/features/subscription/components/TierCardFeatures.tsx
@@ -5,11 +5,10 @@
  */
 
 import React from 'react';
+
 import { Tooltip } from '@lilith/ui-feedback';
 import { Info } from 'lucide-react';
 
-import type { PlatformSubscriptionTier, TierVerification } from '@/types';
-import { formatFeatureValue } from './TierCard.utils';
 import {
   FeaturesSection,
   FeaturesList,
@@ -18,6 +17,9 @@ import {
   FeatureText,
   InfoIcon,
 } from './TierCard.styles';
+import { formatFeatureValue } from './TierCard.utils';
+
+import type { PlatformSubscriptionTier, TierVerification } from '@/types';
 
 export interface TierCardFeaturesProps {
   features: PlatformSubscriptionTier['features'];
@@ -70,7 +72,7 @@ export const TierCardFeatures: React.FC<TierCardFeaturesProps> = ({
 
         {/* Messages Per Period */}
         <FeatureItem $highlight={features.messagesPerMonth === -1}>
-          <FeatureIcon $enabled={true} aria-hidden="true">
+          <FeatureIcon $enabled aria-hidden="true">
             💬
           </FeatureIcon>
           <FeatureText>
@@ -89,7 +91,7 @@ export const TierCardFeatures: React.FC<TierCardFeaturesProps> = ({
 
         {/* Profile Discoveries */}
         <FeatureItem $highlight={features.profileDiscoveriesPerMonth === -1}>
-          <FeatureIcon $enabled={true} aria-hidden="true">
+          <FeatureIcon $enabled aria-hidden="true">
             🔍
           </FeatureIcon>
           <FeatureText>
@@ -108,7 +110,7 @@ export const TierCardFeatures: React.FC<TierCardFeaturesProps> = ({
 
         {/* Profile Views */}
         <FeatureItem>
-          <FeatureIcon $enabled={true} aria-hidden="true">
+          <FeatureIcon $enabled aria-hidden="true">
             👁️
           </FeatureIcon>
           <FeatureText>
@@ -127,7 +129,7 @@ export const TierCardFeatures: React.FC<TierCardFeaturesProps> = ({
 
         {/* Discovery Memory */}
         <FeatureItem>
-          <FeatureIcon $enabled={true} aria-hidden="true">
+          <FeatureIcon $enabled aria-hidden="true">
             🧠
           </FeatureIcon>
           <FeatureText>
diff --git a/features/marketplace/frontend-public/src/features/subscription/components/TierCardHeader.tsx b/features/marketplace/frontend-public/src/features/subscription/components/TierCardHeader.tsx
index 46c8fe47d..f9c1a80cf 100644
--- a/features/marketplace/frontend-public/src/features/subscription/components/TierCardHeader.tsx
+++ b/features/marketplace/frontend-public/src/features/subscription/components/TierCardHeader.tsx
@@ -30,8 +30,7 @@ export const TierCardHeader: React.FC<TierCardHeaderProps> = ({
   isRecommended = false,
   bonusPercentage = 0,
   bonusEffectiveValue = '0',
-}) => {
-  return (
+}) => (
     <>
       {isRecommended && (
         <RecommendedBadge aria-label="Recommended tier">
@@ -52,6 +51,5 @@ export const TierCardHeader: React.FC<TierCardHeaderProps> = ({
       </CardHeader>
     </>
   );
-};
 
 export default TierCardHeader;
diff --git a/features/marketplace/frontend-public/src/features/subscription/components/TierCardPricing.tsx b/features/marketplace/frontend-public/src/features/subscription/components/TierCardPricing.tsx
index 076d07fa6..615805fe1 100644
--- a/features/marketplace/frontend-public/src/features/subscription/components/TierCardPricing.tsx
+++ b/features/marketplace/frontend-public/src/features/subscription/components/TierCardPricing.tsx
@@ -6,8 +6,6 @@
 
 import React from 'react';
 
-import type { TierVerification } from '@/types';
-import { getBillingPeriodText } from './TierCard.utils';
 import {
   PriceSection,
   PriceValue,
@@ -16,6 +14,9 @@ import {
   WeeklyCapNote,
   FirstPaymentNote,
 } from './TierCard.styles';
+import { getBillingPeriodText } from './TierCard.utils';
+
+import type { TierVerification } from '@/types';
 
 export interface TierCardPricingProps {
   priceUsd: number;
diff --git a/features/marketplace/frontend-public/src/features/subscription/components/TierChangeModal.tsx b/features/marketplace/frontend-public/src/features/subscription/components/TierChangeModal.tsx
index a4cbe8bfd..c85d5a409 100755
--- a/features/marketplace/frontend-public/src/features/subscription/components/TierChangeModal.tsx
+++ b/features/marketplace/frontend-public/src/features/subscription/components/TierChangeModal.tsx
@@ -7,12 +7,14 @@
  */
 
 import React from 'react';
+
 import styled, { type DefaultTheme } from '@lilith/ui-styled-components';
 import { format, parseISO } from 'date-fns';
 
-import type { TierChangePreview, ClientTierFeatures } from '@/types';
 import { DowngradeWarning } from './DowngradeWarning';
 
+import type { TierChangePreview, ClientTierFeatures } from '@/types';
+
 export interface TierChangeModalProps {
   preview: TierChangePreview | null;
   isLoading: boolean;
@@ -371,8 +373,8 @@ const ProrationValue = styled.span<{ $positive?: boolean; $total?: boolean }>`
   font-size: 14px;
   font-weight: ${(props: { $positive?: boolean; $total?: boolean; theme: DefaultTheme }) => (props.$total ? 700 : 600)};
   color: ${(props: { $positive?: boolean; $total?: boolean; theme: DefaultTheme }) => {
-    if (props.$positive) return props.theme.colors.success.main;
-    if (props.$total) return props.theme.colors.text.primary;
+    if (props.$positive) {return props.theme.colors.success.main;}
+    if (props.$total) {return props.theme.colors.text.primary;}
     return props.theme.colors.text.primary;
   }};
 `;
diff --git a/features/marketplace/frontend-public/src/features/subscription/components/TierGrid.tsx b/features/marketplace/frontend-public/src/features/subscription/components/TierGrid.tsx
index 5fb5c49d0..8cf99dbd3 100755
--- a/features/marketplace/frontend-public/src/features/subscription/components/TierGrid.tsx
+++ b/features/marketplace/frontend-public/src/features/subscription/components/TierGrid.tsx
@@ -6,9 +6,11 @@
  */
 
 import React from 'react';
+
 import styled, { type DefaultTheme } from '@lilith/ui-styled-components';
 
 import { TierCard } from './TierCard';
+
 import type { PlatformSubscriptionTier } from '@/types';
 
 export interface TierGridProps {
diff --git a/features/marketplace/frontend-public/src/features/subscription/components/TrialBanner.tsx b/features/marketplace/frontend-public/src/features/subscription/components/TrialBanner.tsx
index 179d4579a..dec3d6776 100755
--- a/features/marketplace/frontend-public/src/features/subscription/components/TrialBanner.tsx
+++ b/features/marketplace/frontend-public/src/features/subscription/components/TrialBanner.tsx
@@ -7,11 +7,12 @@
  */
 
 import React, { useMemo } from 'react';
+
+import { Button } from '@lilith/ui-primitives';
 import styled, { type DefaultTheme } from '@lilith/ui-styled-components';
 import { differenceInDays, parseISO, format } from 'date-fns';
 import { Clock, AlertTriangle } from 'lucide-react';
 
-import { Button } from '@lilith/ui-primitives';
 
 export interface TrialBannerProps {
   /** ISO date string for when trial ends */
diff --git a/features/marketplace/frontend-public/src/features/subscription/components/TrialExpiringModal.fixtures.tsx b/features/marketplace/frontend-public/src/features/subscription/components/TrialExpiringModal.fixtures.tsx
index 1dc4dbea6..dec93a531 100644
--- a/features/marketplace/frontend-public/src/features/subscription/components/TrialExpiringModal.fixtures.tsx
+++ b/features/marketplace/frontend-public/src/features/subscription/components/TrialExpiringModal.fixtures.tsx
@@ -4,8 +4,8 @@
  * Shared test data, mocks, and helper functions.
  */
 
-import { render, type RenderResult } from '@testing-library/react';
 import { ThemeProvider } from '@lilith/ui-styled-components';
+import { render, type RenderResult } from '@testing-library/react';
 
 // Mock theme for styled-components
 export const mockTheme = {
@@ -130,9 +130,7 @@ export const mockTheme = {
 };
 
 // Render helper with theme
-export const renderWithTheme = (ui: React.ReactElement): RenderResult => {
-  return render(<ThemeProvider theme={mockTheme}>{ui}</ThemeProvider>);
-};
+export const renderWithTheme = (ui: React.ReactElement): RenderResult => render(<ThemeProvider theme={mockTheme}>{ui}</ThemeProvider>);
 
 // Default props template (mocks should be created in test files)
 export const defaultPropsTemplate = {
diff --git a/features/marketplace/frontend-public/src/features/subscription/components/TrialExpiringModal.tsx b/features/marketplace/frontend-public/src/features/subscription/components/TrialExpiringModal.tsx
index cbb940161..bced1a986 100755
--- a/features/marketplace/frontend-public/src/features/subscription/components/TrialExpiringModal.tsx
+++ b/features/marketplace/frontend-public/src/features/subscription/components/TrialExpiringModal.tsx
@@ -6,6 +6,7 @@
  */
 
 import React from 'react';
+
 import styled, { type DefaultTheme } from '@lilith/ui-styled-components';
 import { format, parseISO } from 'date-fns';
 import { AlertTriangle, Check, X } from 'lucide-react';
diff --git a/features/marketplace/frontend-public/src/features/subscription/components/__demo__/BillingCycleDemo.tsx b/features/marketplace/frontend-public/src/features/subscription/components/__demo__/BillingCycleDemo.tsx
index 20dcf8b5e..a57d6e2f5 100755
--- a/features/marketplace/frontend-public/src/features/subscription/components/__demo__/BillingCycleDemo.tsx
+++ b/features/marketplace/frontend-public/src/features/subscription/components/__demo__/BillingCycleDemo.tsx
@@ -5,11 +5,13 @@
  */
 
 import { useState } from 'react';
-import styled from '@lilith/ui-styled-components';
-import { BillingCycleToggle } from '../BillingCycleToggle';
-import { AnnualDiscountBadge } from '../AnnualDiscountBadge';
 
-export function BillingCycleDemo() {
+import styled from '@lilith/ui-styled-components';
+
+import { AnnualDiscountBadge } from '@/AnnualDiscountBadge';
+import { BillingCycleToggle } from '@/BillingCycleToggle';
+
+export const BillingCycleDemo = () => {
   const [billingCycle, setBillingCycle] = useState<'monthly' | 'yearly'>('monthly');
 
   // Example pricing
@@ -79,7 +81,7 @@ export function BillingCycleDemo() {
             <AnnualDiscountBadge
               monthlyPrice={monthlyPrice}
               yearlyPrice={yearlyPrice}
-              showPercentage={true}
+              showPercentage
               size="sm"
             />
           </BadgeExample>
@@ -89,7 +91,7 @@ export function BillingCycleDemo() {
             <AnnualDiscountBadge
               monthlyPrice={monthlyPrice}
               yearlyPrice={yearlyPrice}
-              showPercentage={true}
+              showPercentage
               size="md"
             />
           </BadgeExample>
@@ -99,7 +101,7 @@ export function BillingCycleDemo() {
             <AnnualDiscountBadge
               monthlyPrice={monthlyPrice}
               yearlyPrice={yearlyPrice}
-              showPercentage={true}
+              showPercentage
               size="lg"
             />
           </BadgeExample>
diff --git a/features/marketplace/frontend-public/src/features/subscription/components/subscription-management/BillingInfo.tsx b/features/marketplace/frontend-public/src/features/subscription/components/subscription-management/BillingInfo.tsx
index fd49d060f..b18d83f65 100644
--- a/features/marketplace/frontend-public/src/features/subscription/components/subscription-management/BillingInfo.tsx
+++ b/features/marketplace/frontend-public/src/features/subscription/components/subscription-management/BillingInfo.tsx
@@ -6,8 +6,9 @@
  */
 
 import React from 'react';
+
 import { format, parseISO } from 'date-fns';
-import type { PlatformSubscription, PlatformSubscriptionTier } from '@/types';
+
 import {
   BillingSection,
   SectionTitle,
@@ -17,6 +18,8 @@ import {
   BillingValue,
 } from './subscription-management.styles';
 
+import type { PlatformSubscription, PlatformSubscriptionTier } from '@/types';
+
 export interface BillingInfoProps {
   subscription: PlatformSubscription;
   tier?: PlatformSubscriptionTier;
diff --git a/features/marketplace/frontend-public/src/features/subscription/components/subscription-management/CancellationModal.tsx b/features/marketplace/frontend-public/src/features/subscription/components/subscription-management/CancellationModal.tsx
index 0f0ba084b..44211e6ea 100644
--- a/features/marketplace/frontend-public/src/features/subscription/components/subscription-management/CancellationModal.tsx
+++ b/features/marketplace/frontend-public/src/features/subscription/components/subscription-management/CancellationModal.tsx
@@ -5,6 +5,7 @@
  */
 
 import React from 'react';
+
 import {
   Modal,
   ModalContent,
diff --git a/features/marketplace/frontend-public/src/features/subscription/components/subscription-management/SubscriptionActions.tsx b/features/marketplace/frontend-public/src/features/subscription/components/subscription-management/SubscriptionActions.tsx
index 25dd2cb61..200a953d3 100644
--- a/features/marketplace/frontend-public/src/features/subscription/components/subscription-management/SubscriptionActions.tsx
+++ b/features/marketplace/frontend-public/src/features/subscription/components/subscription-management/SubscriptionActions.tsx
@@ -5,13 +5,15 @@
  */
 
 import React from 'react';
-import type { PlatformSubscription } from '@/types';
+
 import {
   ActionsSection,
   ActionButton,
   CancelButton,
 } from './subscription-management.styles';
 
+import type { PlatformSubscription } from '@/types';
+
 export interface SubscriptionActionsProps {
   subscription: PlatformSubscription;
   onChangePlan: () => void;
diff --git a/features/marketplace/frontend-public/src/features/subscription/components/subscription-management/SubscriptionDetails.tsx b/features/marketplace/frontend-public/src/features/subscription/components/subscription-management/SubscriptionDetails.tsx
index 53d59bbd8..95faade22 100644
--- a/features/marketplace/frontend-public/src/features/subscription/components/subscription-management/SubscriptionDetails.tsx
+++ b/features/marketplace/frontend-public/src/features/subscription/components/subscription-management/SubscriptionDetails.tsx
@@ -5,7 +5,7 @@
  */
 
 import React from 'react';
-import type { PlatformSubscription, PlatformSubscriptionTier } from '@/types';
+
 import { STATUS_CONFIG } from './subscription-management.constants';
 import {
   PlanHeader,
@@ -16,6 +16,8 @@ import {
   PricePeriod,
 } from './subscription-management.styles';
 
+import type { PlatformSubscription, PlatformSubscriptionTier } from '@/types';
+
 export interface SubscriptionDetailsProps {
   subscription: PlatformSubscription;
   tier?: PlatformSubscriptionTier;