@sudobility/subscription-components-rn 1.0.1

package/src/__tests__/SubscriptionTile.test.tsx

@@ -0,0 +1,248 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react-native';
+import { SubscriptionTile } from '../SubscriptionTile';
+
+const baseProps = {
+  id: 'pro',
+  title: 'Pro Plan',
+  price: '$9.99',
+  periodLabel: '/month',
+  features: ['Unlimited access', 'Priority support'],
+  isSelected: false,
+  onSelect: jest.fn(),
+};
+
+describe('SubscriptionTile', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders title, price, period label, and features', () => {
+    render(<SubscriptionTile {...baseProps} />);
+
+    expect(screen.getByText('Pro Plan')).toBeTruthy();
+    expect(screen.getByText('$9.99')).toBeTruthy();
+    expect(screen.getByText('/month')).toBeTruthy();
+    expect(screen.getByText('Unlimited access')).toBeTruthy();
+    expect(screen.getByText('Priority support')).toBeTruthy();
+  });
+
+  it('calls onSelect when pressed in normal mode', () => {
+    const onSelect = jest.fn();
+    render(<SubscriptionTile {...baseProps} onSelect={onSelect} />);
+
+    fireEvent.press(screen.getByRole('radio'));
+    expect(onSelect).toHaveBeenCalledTimes(1);
+  });
+
+  it('does not call onSelect when disabled', () => {
+    const onSelect = jest.fn();
+    render(
+      <SubscriptionTile {...baseProps} onSelect={onSelect} disabled />
+    );
+
+    fireEvent.press(screen.getByRole('radio'));
+    expect(onSelect).not.toHaveBeenCalled();
+  });
+
+  it('does not call onSelect when not enabled', () => {
+    const onSelect = jest.fn();
+    render(
+      <SubscriptionTile {...baseProps} onSelect={onSelect} enabled={false} />
+    );
+
+    fireEvent.press(screen.getByRole('radio'));
+    expect(onSelect).not.toHaveBeenCalled();
+  });
+
+  it('renders with radio accessibility role in selection mode', () => {
+    render(<SubscriptionTile {...baseProps} />);
+    expect(screen.getByRole('radio')).toBeTruthy();
+  });
+
+  it('sets checked state matching isSelected', () => {
+    const { rerender } = render(
+      <SubscriptionTile {...baseProps} isSelected={false} />
+    );
+    expect(
+      screen.getByRole('radio').props.accessibilityState.checked
+    ).toBe(false);
+
+    rerender(<SubscriptionTile {...baseProps} isSelected={true} />);
+    expect(
+      screen.getByRole('radio').props.accessibilityState.checked
+    ).toBe(true);
+  });
+
+  it('renders top badge when provided', () => {
+    render(
+      <SubscriptionTile
+        {...baseProps}
+        topBadge={{ text: 'Most Popular', color: 'purple' }}
+      />
+    );
+
+    expect(screen.getByText('Most Popular')).toBeTruthy();
+  });
+
+  it('renders discount badge when provided', () => {
+    render(
+      <SubscriptionTile
+        {...baseProps}
+        discountBadge={{ text: 'Save 40%' }}
+      />
+    );
+
+    expect(screen.getByText('Save 40%')).toBeTruthy();
+  });
+
+  it('renders bottom note when provided', () => {
+    render(
+      <SubscriptionTile
+        {...baseProps}
+        bottomNote="Renews on Jan 1, 2027"
+      />
+    );
+
+    expect(screen.getByText('Renews on Jan 1, 2027')).toBeTruthy();
+  });
+
+  it('renders intro price note when provided', () => {
+    render(
+      <SubscriptionTile
+        {...baseProps}
+        introPriceNote="First month free!"
+      />
+    );
+
+    expect(screen.getByText('First month free!')).toBeTruthy();
+  });
+
+  it('renders premium callout with title and features', () => {
+    render(
+      <SubscriptionTile
+        {...baseProps}
+        premiumCallout={{
+          title: 'Premium Features',
+          features: ['AI Assistant', 'Analytics'],
+        }}
+      />
+    );
+
+    expect(screen.getByText('Premium Features')).toBeTruthy();
+    expect(screen.getByText(/AI Assistant/)).toBeTruthy();
+    expect(screen.getByText(/Analytics/)).toBeTruthy();
+  });
+
+  it('renders CTA button in cta mode with summary role', () => {
+    const onCtaPress = jest.fn();
+    render(
+      <SubscriptionTile
+        {...baseProps}
+        ctaButton={{ label: 'Subscribe Now', onPress: onCtaPress }}
+      />
+    );
+
+    // In CTA mode, role should be 'summary' not 'radio'
+    expect(screen.getByRole('summary')).toBeTruthy();
+    expect(screen.getByText('Subscribe Now')).toBeTruthy();
+  });
+
+  it('calls CTA onPress when CTA button is pressed', () => {
+    const onCtaPress = jest.fn();
+    render(
+      <SubscriptionTile
+        {...baseProps}
+        ctaButton={{ label: 'Subscribe Now', onPress: onCtaPress }}
+      />
+    );
+
+    fireEvent.press(screen.getByText('Subscribe Now'));
+    expect(onCtaPress).toHaveBeenCalledTimes(1);
+  });
+
+  it('does not call onSelect when in CTA mode (tile press is disabled)', () => {
+    const onSelect = jest.fn();
+    render(
+      <SubscriptionTile
+        {...baseProps}
+        onSelect={onSelect}
+        ctaButton={{ label: 'Buy', onPress: jest.fn() }}
+      />
+    );
+
+    fireEvent.press(screen.getByRole('summary'));
+    expect(onSelect).not.toHaveBeenCalled();
+  });
+
+  it('calls onTrack with select action when tile is pressed', () => {
+    const onTrack = jest.fn();
+    const onSelect = jest.fn();
+    render(
+      <SubscriptionTile
+        {...baseProps}
+        onSelect={onSelect}
+        onTrack={onTrack}
+        trackingLabel="pro_plan"
+      />
+    );
+
+    fireEvent.press(screen.getByRole('radio'));
+    expect(onTrack).toHaveBeenCalledWith({
+      action: 'select',
+      trackingLabel: 'pro_plan',
+      componentName: 'SubscriptionTile',
+    });
+  });
+
+  it('calls onTrack with cta_click action when CTA is pressed', () => {
+    const onTrack = jest.fn();
+    render(
+      <SubscriptionTile
+        {...baseProps}
+        ctaButton={{ label: 'Buy', onPress: jest.fn() }}
+        onTrack={onTrack}
+        trackingLabel="pro_cta"
+      />
+    );
+
+    fireEvent.press(screen.getByText('Buy'));
+    expect(onTrack).toHaveBeenCalledWith({
+      action: 'cta_click',
+      trackingLabel: 'pro_cta',
+      componentName: 'SubscriptionTile',
+    });
+  });
+
+  it('does not show indicator when isCurrentPlan is true', () => {
+    const onSelect = jest.fn();
+    render(
+      <SubscriptionTile {...baseProps} onSelect={onSelect} isCurrentPlan />
+    );
+
+    // Should be non-interactive when isCurrentPlan
+    fireEvent.press(screen.getByRole('radio'));
+    expect(onSelect).not.toHaveBeenCalled();
+  });
+
+  it('uses default accessibility label with title, price, and period', () => {
+    render(<SubscriptionTile {...baseProps} />);
+
+    const tile = screen.getByRole('radio');
+    expect(tile.props.accessibilityLabel).toBe('Pro Plan - $9.99/month');
+  });
+
+  it('uses custom accessibility label when provided', () => {
+    render(
+      <SubscriptionTile
+        {...baseProps}
+        accessibilityLabel="Pro plan nine ninety nine per month"
+      />
+    );
+
+    const tile = screen.getByRole('radio');
+    expect(tile.props.accessibilityLabel).toBe(
+      'Pro plan nine ninety nine per month'
+    );
+  });
+});

package/src/index.ts

@@ -0,0 +1,53 @@
+/**
+ * @sudobility/subscription-components-rn
+ *
+ * Subscription UI components for React Native with RevenueCat integration.
+ * All components support full localization - text labels are passed by the consumer.
+ *
+ * Aligned with @sudobility/subscription-components (web).
+ */
+
+// Components
+export {
+  SubscriptionTile,
+  type SubscriptionTileProps,
+} from './SubscriptionTile';
+export {
+  SubscriptionLayout,
+  SubscriptionDivider,
+  SubscriptionFooter,
+  type SubscriptionLayoutProps,
+  type SubscriptionLayoutVariant,
+  type SubscriptionDividerProps,
+  type SubscriptionFooterProps,
+} from './SubscriptionLayout';
+export {
+  SegmentedControl,
+  PeriodSelector,
+  type SegmentedControlProps,
+  type SegmentedControlOption,
+  type PeriodSelectorProps,
+} from './SegmentedControl';
+export {
+  SubscriptionProvider,
+  useSubscriptionContext,
+  SubscriptionContext,
+  type SubscriptionProviderProps,
+} from './SubscriptionProvider';
+
+// Types
+export type {
+  SubscriptionProduct,
+  SubscriptionStatus,
+  SubscriptionContextValue,
+  SubscriptionProviderConfig,
+  BadgeConfig,
+  CtaButtonConfig,
+  DiscountBadgeConfig,
+  PremiumCalloutConfig,
+  FreeTileConfig,
+  SubscriptionStatusConfig,
+  ActionButtonConfig,
+  SubscriptionTileTrackingData,
+  SubscriptionLayoutTrackingData,
+} from './types';

package/src/nativewind.d.ts

@@ -0,0 +1,24 @@
+// Type declarations for NativeWind className prop
+import 'react-native';
+
+declare module 'react-native' {
+  interface ViewProps {
+    className?: string;
+  }
+  interface TextProps {
+    className?: string;
+  }
+  interface ImageProps {
+    className?: string;
+  }
+  interface ScrollViewProps {
+    className?: string;
+    contentContainerClassName?: string;
+  }
+  interface PressableProps {
+    className?: string | ((state: { pressed: boolean }) => string);
+  }
+  interface TouchableOpacityProps {
+    className?: string;
+  }
+}

package/src/types.ts

@@ -0,0 +1,214 @@
+/**
+ * Type definitions for subscription components
+ * Aligned with @sudobility/subscription-components (web)
+ */
+
+/**
+ * Product information from RevenueCat or custom backend
+ */
+export interface SubscriptionProduct {
+  /** Unique identifier for the product/package */
+  identifier: string;
+  /** Underlying product ID (e.g., from app store) */
+  productId?: string;
+  /** Numeric price value */
+  price: string;
+  /** Formatted price string (e.g., "$9.99") */
+  priceString: string;
+  /** Product title */
+  title: string;
+  /** Product description */
+  description?: string;
+  /** ISO 8601 duration (e.g., "P1M", "P1Y") */
+  period?: string;
+  /** Formatted introductory price */
+  introPrice?: string;
+  /** Raw intro price amount */
+  introPriceAmount?: string;
+  /** Intro price period (ISO 8601) */
+  introPricePeriod?: string;
+  /** Number of billing cycles for intro price */
+  introPriceCycles?: number;
+  /** Free trial period (ISO 8601, e.g., "P7D") */
+  freeTrialPeriod?: string;
+  /** Entitlement identifier this product grants (from offering metadata) */
+  entitlement?: string;
+}
+
+/**
+ * Active subscription status
+ */
+export interface SubscriptionStatus {
+  /** Whether the user has an active subscription */
+  isActive: boolean;
+  /** Expiration date of the subscription */
+  expirationDate?: Date;
+  /** Date when subscription was purchased */
+  purchaseDate?: Date;
+  /** Product identifier of the current subscription */
+  productIdentifier?: string;
+  /** Whether subscription will auto-renew */
+  willRenew?: boolean;
+  /** Whether this is a sandbox/test subscription */
+  isSandbox?: boolean;
+  /** Date when unsubscription was detected */
+  unsubscribeDetectedAt?: Date;
+  /** Date when billing issue was detected */
+  billingIssueDetectedAt?: Date;
+  /** Active entitlement identifiers */
+  activeEntitlements?: string[];
+  /** Management URL for subscription (platform store management) */
+  managementUrl?: string;
+}
+
+/**
+ * Badge display configuration
+ */
+export interface BadgeConfig {
+  /** Badge text */
+  text: string;
+  /** Badge color variant */
+  color: 'purple' | 'green' | 'blue' | 'yellow' | 'red';
+}
+
+/**
+ * Discount badge configuration
+ */
+export interface DiscountBadgeConfig {
+  /** Discount text (e.g., "Save 40%") */
+  text: string;
+  /** Whether this is the best value option */
+  isBestValue?: boolean;
+}
+
+/**
+ * Premium callout section configuration
+ */
+export interface PremiumCalloutConfig {
+  /** Callout title */
+  title: string;
+  /** List of premium features */
+  features: string[];
+}
+
+/**
+ * CTA button configuration for tile
+ */
+export interface CtaButtonConfig {
+  /** Button label */
+  label: string;
+  /** Press handler */
+  onPress?: () => void;
+}
+
+/** Tracking data for SubscriptionTile actions */
+export interface SubscriptionTileTrackingData {
+  action: 'select' | 'cta_click';
+  trackingLabel?: string;
+  componentName?: string;
+}
+
+/** Tracking data for SubscriptionLayout actions */
+export interface SubscriptionLayoutTrackingData {
+  action: 'primary_action' | 'secondary_action';
+  trackingLabel?: string;
+  componentName?: string;
+}
+
+/**
+ * Free tile configuration for CTA variant layout
+ */
+export interface FreeTileConfig {
+  /** Tile title (e.g., "Free") */
+  title: string;
+  /** Price display (e.g., "$0") */
+  price: string;
+  /** Period label (e.g., "/month") */
+  periodLabel?: string;
+  /** List of features included in free tier */
+  features: string[];
+  /** CTA button configuration */
+  ctaButton: CtaButtonConfig;
+  /** Optional top badge */
+  topBadge?: BadgeConfig;
+}
+
+/**
+ * Current subscription status display configuration
+ */
+export interface SubscriptionStatusConfig {
+  /** Whether user has an active subscription */
+  isActive: boolean;
+  /** Content to display when subscription is active */
+  activeContent?: {
+    /** Status title (e.g., "Active Subscription") */
+    title: string;
+    /** Status fields to display */
+    fields?: Array<{
+      label: string;
+      value: string;
+    }>;
+  };
+  /** Content to display when no active subscription */
+  inactiveContent?: {
+    /** Status title (e.g., "No Active Subscription") */
+    title: string;
+    /** Description message */
+    message: string;
+  };
+}
+
+/**
+ * Action button configuration
+ */
+export interface ActionButtonConfig {
+  /** Button label */
+  label: string;
+  /** Press handler */
+  onPress: () => void;
+  /** Whether button is disabled */
+  disabled?: boolean;
+  /** Whether button is in loading state */
+  loading?: boolean;
+}
+
+/**
+ * Subscription context value
+ */
+export interface SubscriptionContextValue {
+  /** Available products */
+  products: SubscriptionProduct[];
+  /** Current subscription status */
+  currentSubscription: SubscriptionStatus | null;
+  /** Whether data is loading */
+  isLoading: boolean;
+  /** Error message if any */
+  error: string | null;
+  /** Initialize the subscription service. If userId is undefined, clears the current user. */
+  initialize: (userId?: string, email?: string) => Promise<void>;
+  /** Purchase a subscription. subscriptionUserId identifies which user/entity the subscription is for. */
+  purchase: (
+    productIdentifier: string,
+    subscriptionUserId?: string
+  ) => Promise<boolean>;
+  /** Restore previous purchases. subscriptionUserId identifies which user/entity to restore for. */
+  restore: (subscriptionUserId?: string) => Promise<boolean>;
+  /** Refresh subscription status */
+  refresh: () => Promise<void>;
+  /** Clear error state */
+  clearError: () => void;
+}
+
+/**
+ * Provider configuration
+ */
+export interface SubscriptionProviderConfig {
+  /** RevenueCat API key */
+  apiKey: string;
+  /** Optional user email for RevenueCat */
+  userEmail?: string;
+  /** Error callback */
+  onError?: (error: Error) => void;
+  /** Success callback after purchase */
+  onPurchaseSuccess?: (productId: string) => void;
+}