@sudobility/subscription-components-rn 1.0.1

package/src/SegmentedControl.tsx

@@ -0,0 +1,221 @@
+import { View, Text, Pressable } from 'react-native';
+
+export interface SegmentedControlOption<T extends string = string> {
+  /** Value for this option */
+  value: T;
+  /** Display label */
+  label: string;
+  /** Optional badge text (e.g., "Save 20%") */
+  badge?: string;
+  /** Whether this option is disabled */
+  disabled?: boolean;
+}
+
+export interface SegmentedControlProps<T extends string = string> {
+  /** Available options */
+  options: SegmentedControlOption<T>[];
+  /** Currently selected value */
+  value: T;
+  /** Selection change handler */
+  onChange: (value: T) => void;
+  /** Additional NativeWind classes for the container */
+  className?: string;
+  /** Whether the control is disabled */
+  disabled?: boolean;
+  /** Size variant */
+  size?: 'sm' | 'md' | 'lg';
+  /** Full width mode */
+  fullWidth?: boolean;
+  /** Accessibility label */
+  accessibilityLabel?: string;
+}
+
+/**
+ * Size class mapping
+ */
+const sizeClasses = {
+  sm: {
+    container: 'p-1 rounded-lg',
+    segment: 'px-3 py-1.5 rounded-md',
+    text: 'text-xs',
+    badge: 'text-xs px-1.5 py-0.5',
+  },
+  md: {
+    container: 'p-1 rounded-lg',
+    segment: 'px-4 py-2 rounded-md',
+    text: 'text-sm',
+    badge: 'text-xs px-2 py-0.5',
+  },
+  lg: {
+    container: 'p-1 rounded-lg',
+    segment: 'px-6 py-3 rounded-lg',
+    text: 'text-base',
+    badge: 'text-sm px-2 py-1',
+  },
+};
+
+/**
+ * SegmentedControl - A toggle control for switching between options
+ *
+ * Commonly used for billing period selection (Monthly/Yearly).
+ * All labels are passed by the consumer for full localization control.
+ *
+ * @example
+ * ```tsx
+ * <SegmentedControl
+ *   options={[
+ *     { value: 'monthly', label: 'Monthly' },
+ *     { value: 'yearly', label: 'Yearly', badge: 'Save 20%' },
+ *   ]}
+ *   value={billingPeriod}
+ *   onChange={setBillingPeriod}
+ * />
+ * ```
+ */
+export function SegmentedControl<T extends string = string>({
+  options,
+  value,
+  onChange,
+  className = '',
+  disabled = false,
+  size = 'md',
+  fullWidth = true,
+  accessibilityLabel,
+}: SegmentedControlProps<T>) {
+  const sizes = sizeClasses[size];
+
+  const containerClasses = [
+    'flex-row bg-gray-100 dark:bg-gray-800',
+    sizes.container,
+    fullWidth ? 'w-full' : '',
+    disabled ? 'opacity-50' : '',
+    className,
+  ]
+    .filter(Boolean)
+    .join(' ');
+
+  return (
+    <View
+      className={containerClasses}
+      accessibilityRole='tablist'
+      accessibilityLabel={accessibilityLabel}
+    >
+      {options.map(option => {
+        const isSelected = value === option.value;
+        const isDisabled = disabled || option.disabled;
+
+        const segmentClasses = [
+          sizes.segment,
+          'flex-1 items-center justify-center flex-row gap-2',
+          isSelected ? 'bg-white dark:bg-gray-700 shadow-sm' : 'bg-transparent',
+          isDisabled ? 'opacity-50' : '',
+        ]
+          .filter(Boolean)
+          .join(' ');
+
+        const textClasses = [
+          sizes.text,
+          'font-medium',
+          isSelected
+            ? 'text-gray-900 dark:text-white'
+            : 'text-gray-600 dark:text-gray-400',
+        ].join(' ');
+
+        return (
+          <Pressable
+            key={option.value}
+            onPress={() => !isDisabled && onChange(option.value)}
+            disabled={isDisabled}
+            accessibilityRole='tab'
+            accessibilityState={{
+              selected: isSelected,
+              disabled: isDisabled,
+            }}
+            accessibilityLabel={
+              option.label + (option.badge ? ', ' + option.badge : '')
+            }
+            className={segmentClasses}
+          >
+            <Text className={textClasses}>{option.label}</Text>
+
+            {/* Badge */}
+            {option.badge && (
+              <View
+                className={[
+                  sizes.badge,
+                  'rounded-full',
+                  isSelected
+                    ? 'bg-green-100 dark:bg-green-900'
+                    : 'bg-gray-200 dark:bg-gray-700',
+                ].join(' ')}
+              >
+                <Text
+                  className={[
+                    'text-xs font-semibold',
+                    isSelected
+                      ? 'text-green-700 dark:text-green-300'
+                      : 'text-gray-600 dark:text-gray-400',
+                  ].join(' ')}
+                >
+                  {option.badge}
+                </Text>
+              </View>
+            )}
+          </Pressable>
+        );
+      })}
+    </View>
+  );
+}
+
+/**
+ * Pre-configured period selector for Monthly/Yearly toggle
+ */
+export interface PeriodSelectorProps {
+  /** Current period */
+  period: 'monthly' | 'yearly';
+  /** Called when period changes */
+  onPeriodChange: (period: 'monthly' | 'yearly') => void;
+  /** Monthly label */
+  monthlyLabel?: string;
+  /** Yearly label */
+  yearlyLabel?: string;
+  /** Yearly savings badge */
+  yearlySavings?: string;
+  /** Size variant */
+  size?: 'sm' | 'md' | 'lg';
+  /** Custom class */
+  className?: string;
+  /** Disabled state */
+  disabled?: boolean;
+}
+
+export function PeriodSelector({
+  period,
+  onPeriodChange,
+  monthlyLabel = 'Monthly',
+  yearlyLabel = 'Yearly',
+  yearlySavings,
+  size = 'md',
+  className = '',
+  disabled = false,
+}: PeriodSelectorProps) {
+  const options: SegmentedControlOption<'monthly' | 'yearly'>[] = [
+    { value: 'monthly', label: monthlyLabel },
+    { value: 'yearly', label: yearlyLabel, badge: yearlySavings },
+  ];
+
+  return (
+    <SegmentedControl
+      options={options}
+      value={period}
+      onChange={onPeriodChange}
+      size={size}
+      className={className}
+      disabled={disabled}
+      accessibilityLabel='Billing period selector'
+    />
+  );
+}
+
+export default SegmentedControl;

package/src/SubscriptionLayout.tsx

@@ -0,0 +1,379 @@
+import type { ReactNode } from 'react';
+import {
+  View,
+  Text,
+  ScrollView,
+  Pressable,
+  ActivityIndicator,
+} from 'react-native';
+import { SubscriptionTile } from './SubscriptionTile';
+import type {
+  FreeTileConfig,
+  SubscriptionLayoutTrackingData,
+  SubscriptionStatusConfig,
+  ActionButtonConfig,
+} from './types';
+
+/**
+ * Layout variant:
+ * - 'selection': User selects a tile, then presses a shared CTA button (default)
+ * - 'cta': Each tile has its own CTA button, no shared action buttons
+ */
+export type SubscriptionLayoutVariant = 'selection' | 'cta';
+
+export interface SubscriptionLayoutProps {
+  /** Section title */
+  title: string;
+  /** Subscription tiles to render */
+  children: ReactNode;
+  /** Error message to display */
+  error?: string | null;
+
+  /**
+   * Layout variant
+   * - 'selection': User selects a tile, then presses primary action button
+   * - 'cta': Each tile has its own CTA button (use ctaButton prop on tiles)
+   * @default 'selection'
+   */
+  variant?: SubscriptionLayoutVariant;
+
+  /** Current subscription status configuration */
+  currentStatus?: SubscriptionStatusConfig;
+
+  /** Primary action button (e.g., "Subscribe Now") - only shown in 'selection' variant */
+  primaryAction?: ActionButtonConfig;
+
+  /** Secondary action button (e.g., "Restore Purchase") - only shown in 'selection' variant */
+  secondaryAction?: ActionButtonConfig;
+
+  /** Additional NativeWind classes */
+  className?: string;
+
+  /** Custom header content */
+  headerContent?: ReactNode;
+
+  /** Content to render above the product tiles (e.g., billing period selector) */
+  aboveProducts?: ReactNode;
+
+  /** Custom footer content (rendered above action buttons) */
+  footerContent?: ReactNode;
+
+  /** Label for "Current Status" section - for localization */
+  currentStatusLabel?: string;
+
+  /**
+   * Configuration for the free tile - only used when variant is 'cta'
+   * When provided, a "Free" subscription tile will be shown at the start of the list
+   */
+  freeTileConfig?: FreeTileConfig;
+
+  /** Optional tracking callback */
+  onTrack?: (data: SubscriptionLayoutTrackingData) => void;
+  /** Optional tracking label */
+  trackingLabel?: string;
+  /** Optional component name for tracking */
+  componentName?: string;
+}
+
+/**
+ * SubscriptionLayout - Container component for subscription selection UI
+ *
+ * Provides a consistent layout with:
+ * - Optional current status display
+ * - Title heading
+ * - Scrollable list of subscription tiles
+ * - Error message display
+ * - Primary and optional secondary action buttons
+ *
+ * All labels are passed by the consumer for full localization control.
+ */
+export function SubscriptionLayout({
+  title,
+  children,
+  error,
+  variant = 'selection',
+  currentStatus,
+  primaryAction,
+  secondaryAction,
+  className = '',
+  headerContent,
+  aboveProducts,
+  footerContent,
+  currentStatusLabel = 'Current Status',
+  freeTileConfig,
+  onTrack,
+  trackingLabel,
+  componentName = 'SubscriptionLayout',
+}: SubscriptionLayoutProps) {
+  const showActionButtons = variant === 'selection' && primaryAction;
+  // Free tile is only valid in 'cta' variant
+  const shouldShowFreeTile = variant === 'cta' && freeTileConfig;
+
+  const handlePrimaryPress = () => {
+    onTrack?.({ action: 'primary_action', trackingLabel, componentName });
+    primaryAction?.onPress();
+  };
+
+  const handleSecondaryPress = () => {
+    onTrack?.({ action: 'secondary_action', trackingLabel, componentName });
+    secondaryAction?.onPress();
+  };
+
+  return (
+    <ScrollView
+      className='flex-1'
+      contentContainerClassName='p-4'
+      showsVerticalScrollIndicator={false}
+    >
+      <View className={className}>
+        {/* Custom Header Content */}
+        {headerContent}
+
+        {/* Current Status Section */}
+        {currentStatus && (
+          <View className='mb-6'>
+            <Text className='text-2xl font-bold text-gray-900 dark:text-gray-100 mb-4'>
+              {currentStatusLabel}
+            </Text>
+
+            {currentStatus.isActive ? (
+              <View className='bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-lg p-4'>
+                <View className='flex-row items-center mb-2'>
+                  <View className='w-3 h-3 bg-green-500 rounded-full mr-3' />
+                  <Text className='font-semibold text-green-800 dark:text-green-300'>
+                    {currentStatus.activeContent?.title ||
+                      'Active Subscription'}
+                  </Text>
+                </View>
+                {currentStatus.activeContent?.fields &&
+                  currentStatus.activeContent.fields.length > 0 && (
+                    <View className='mt-4 gap-4'>
+                      {currentStatus.activeContent.fields.map(
+                        (field, index) => (
+                          <View key={index}>
+                            <Text className='text-sm text-green-600 dark:text-green-400'>
+                              {field.label}
+                            </Text>
+                            <Text className='font-semibold text-green-800 dark:text-green-300'>
+                              {field.value}
+                            </Text>
+                          </View>
+                        )
+                      )}
+                    </View>
+                  )}
+              </View>
+            ) : (
+              <View className='bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg p-4'>
+                <View className='flex-row items-center mb-2'>
+                  <View className='w-3 h-3 bg-yellow-500 rounded-full mr-3' />
+                  <Text className='font-semibold text-yellow-800 dark:text-yellow-300'>
+                    {currentStatus.inactiveContent?.title ||
+                      'No Active Subscription'}
+                  </Text>
+                </View>
+                {currentStatus.inactiveContent?.message && (
+                  <Text className='text-yellow-700 dark:text-yellow-400'>
+                    {currentStatus.inactiveContent.message}
+                  </Text>
+                )}
+              </View>
+            )}
+          </View>
+        )}
+
+        {/* Section Title */}
+        <Text className='text-2xl font-bold text-gray-900 dark:text-gray-100 mb-4'>
+          {title}
+        </Text>
+
+        {/* Above Products Content (e.g., billing period selector) */}
+        {aboveProducts}
+
+        {/* Subscription Tiles */}
+        <View className='gap-4'>
+          {/* Free Tile - only shown in 'cta' variant when enabled */}
+          {shouldShowFreeTile && (
+            <SubscriptionTile
+              id='free'
+              title={freeTileConfig.title}
+              price={freeTileConfig.price}
+              periodLabel={freeTileConfig.periodLabel}
+              features={freeTileConfig.features}
+              isSelected={false}
+              onSelect={() => {}}
+              topBadge={freeTileConfig.topBadge}
+              ctaButton={freeTileConfig.ctaButton}
+            />
+          )}
+          {children}
+        </View>
+
+        {/* Custom Footer Content */}
+        {footerContent}
+
+        {/* Error Message */}
+        {error && (
+          <View className='bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-4 mt-6'>
+            <Text className='text-red-600 dark:text-red-400'>{error}</Text>
+          </View>
+        )}
+
+        {/* Action Buttons - only shown in 'selection' variant */}
+        {showActionButtons && (
+          <View className='gap-3 mt-6'>
+            {secondaryAction && (
+              <Pressable
+                onPress={handleSecondaryPress}
+                disabled={secondaryAction.disabled || secondaryAction.loading}
+                className={[
+                  'py-3 rounded-lg border border-gray-300 dark:border-gray-600 items-center',
+                  secondaryAction.disabled || secondaryAction.loading
+                    ? 'opacity-50'
+                    : '',
+                ]
+                  .filter(Boolean)
+                  .join(' ')}
+              >
+                {secondaryAction.loading ? (
+                  <ActivityIndicator size='small' />
+                ) : (
+                  <Text className='font-semibold text-gray-900 dark:text-gray-100'>
+                    {secondaryAction.label}
+                  </Text>
+                )}
+              </Pressable>
+            )}
+
+            <Pressable
+              onPress={handlePrimaryPress}
+              disabled={primaryAction.disabled || primaryAction.loading}
+              className={[
+                'py-3 rounded-lg bg-blue-600 items-center',
+                primaryAction.disabled || primaryAction.loading
+                  ? 'opacity-50'
+                  : '',
+              ]
+                .filter(Boolean)
+                .join(' ')}
+            >
+              {primaryAction.loading ? (
+                <ActivityIndicator size='small' color='white' />
+              ) : (
+                <Text className='font-semibold text-white'>
+                  {primaryAction.label}
+                </Text>
+              )}
+            </Pressable>
+          </View>
+        )}
+      </View>
+    </ScrollView>
+  );
+}
+
+/**
+ * Section divider for subscription layouts
+ */
+export interface SubscriptionDividerProps {
+  /** Optional label text */
+  label?: string;
+  /** Custom class */
+  className?: string;
+}
+
+export function SubscriptionDivider({
+  label,
+  className = '',
+}: SubscriptionDividerProps) {
+  if (label) {
+    return (
+      <View className={'flex-row items-center gap-4 my-4 ' + className}>
+        <View className='flex-1 h-px bg-gray-200 dark:bg-gray-700' />
+        <Text className='text-sm text-gray-500 dark:text-gray-400'>
+          {label}
+        </Text>
+        <View className='flex-1 h-px bg-gray-200 dark:bg-gray-700' />
+      </View>
+    );
+  }
+
+  return (
+    <View className={'h-px bg-gray-200 dark:bg-gray-700 my-4 ' + className} />
+  );
+}
+
+/**
+ * Footer with terms and restore button
+ */
+export interface SubscriptionFooterProps {
+  /** Terms text */
+  termsText?: string;
+  /** Privacy link text */
+  privacyText?: string;
+  /** Restore purchases text */
+  restoreText?: string;
+  /** Called when restore is pressed */
+  onRestore?: () => void;
+  /** Called when terms is pressed */
+  onTermsPress?: () => void;
+  /** Called when privacy is pressed */
+  onPrivacyPress?: () => void;
+  /** Custom class */
+  className?: string;
+}
+
+export function SubscriptionFooter({
+  termsText = 'Terms of Service',
+  privacyText = 'Privacy Policy',
+  restoreText = 'Restore Purchases',
+  onRestore,
+  onTermsPress,
+  onPrivacyPress,
+  className = '',
+}: SubscriptionFooterProps) {
+  return (
+    <View className={'items-center gap-3 ' + className}>
+      {/* Restore Button */}
+      {onRestore && (
+        <Text
+          className='text-sm text-blue-500 dark:text-blue-400 underline'
+          onPress={onRestore}
+          accessibilityRole='button'
+        >
+          {restoreText}
+        </Text>
+      )}
+
+      {/* Legal Links */}
+      <View className='flex-row items-center gap-4'>
+        {onTermsPress && (
+          <Text
+            className='text-xs text-gray-500 dark:text-gray-400 underline'
+            onPress={onTermsPress}
+            accessibilityRole='link'
+          >
+            {termsText}
+          </Text>
+        )}
+        {onPrivacyPress && (
+          <Text
+            className='text-xs text-gray-500 dark:text-gray-400 underline'
+            onPress={onPrivacyPress}
+            accessibilityRole='link'
+          >
+            {privacyText}
+          </Text>
+        )}
+      </View>
+
+      {/* Disclaimer */}
+      <Text className='text-xs text-gray-400 dark:text-gray-500 text-center px-4'>
+        Subscriptions will automatically renew unless canceled at least 24 hours
+        before the end of the current period.
+      </Text>
+    </View>
+  );
+}
+
+export default SubscriptionLayout;