@umituz/react-native-subscription 1.3.1 → 1.5.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@umituz/react-native-subscription",
-  "version": "1.3.1",
-  "description": "Subscription management system for React Native apps - Database-first approach with secure validation",
+  "version": "1.5.0",
+  "description": "Subscription management and paywall UI for React Native apps",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
   "scripts": {
@@ -12,16 +12,12 @@
     "react-native",
     "subscription",
     "premium",
+    "paywall",
     "in-app-purchase",
     "iap",
-    "security",
+    "revenuecat",
     "ddd",
-    "domain-driven-design",
-    "type-safe",
-    "solid",
-    "dry",
-    "kiss",
-    "database-first"
+    "domain-driven-design"
   ],
   "author": "Ümit UZ <umit@umituz.com>",
   "license": "MIT",
@@ -31,7 +27,12 @@
   },
   "peerDependencies": {
     "react": ">=18.2.0",
-    "react-native": ">=0.74.0"
+    "react-native": ">=0.74.0",
+    "react-native-purchases": ">=8.0.0",
+    "react-native-safe-area-context": ">=4.0.0",
+    "@umituz/react-native-design-system-atoms": "*",
+    "@umituz/react-native-design-system-theme": "*",
+    "@umituz/react-native-legal": "*"
   },
   "devDependencies": {
     "@types/react": "~19.1.0",

package/src/domain/entities/paywall/CreditsPackage.ts

@@ -0,0 +1,16 @@
+/**
+ * Credits Package Entity
+ * Represents a credit package for purchase
+ */
+
+export interface CreditsPackage {
+  id: string;
+  credits: number;
+  price: number;
+  priceString?: string;
+  currency: string;
+  bonus?: number;
+  popular?: boolean;
+  badge?: string;
+  description?: string;
+}

package/src/domain/entities/paywall/PaywallTab.ts

@@ -0,0 +1,11 @@
+/**
+ * Paywall Tab Entity
+ * Represents paywall tab types
+ */
+
+export type PaywallTabType = "credits" | "subscription";
+
+export interface PaywallTab {
+  id: PaywallTabType;
+  label: string;
+}

package/src/domain/entities/paywall/SubscriptionPlan.ts

@@ -0,0 +1,27 @@
+/**
+ * Subscription Plan Entity
+ * Represents a subscription plan for purchase
+ */
+
+export interface SubscriptionPlan {
+  /** Plan ID */
+  id: string;
+
+  /** Plan type */
+  type: "monthly" | "yearly";
+
+  /** Price */
+  price: number;
+
+  /** Currency code */
+  currency: string;
+
+  /** Whether this is the best value option */
+  isBestValue?: boolean;
+
+  /** Optional discount percentage */
+  discountPercentage?: number;
+
+  /** Optional features list */
+  features?: string[];
+}

package/src/index.ts

@@ -1,23 +1,12 @@
 /**
  * React Native Subscription - Public API
  *
+ * Subscription management and paywall UI for React Native apps
  * Domain-Driven Design (DDD) Architecture
- *
- * This is the SINGLE SOURCE OF TRUTH for all subscription operations.
- * ALL imports from the Subscription package MUST go through this file.
- *
- * Architecture:
- * - domain: Entities, value objects, errors (business logic)
- * - application: Ports (interfaces)
- * - infrastructure: Subscription service implementation
- * - presentation: Hooks (React integration)
- *
- * Usage:
- *   import { initializeSubscriptionService, useSubscription } from '@umituz/react-native-subscription';
  */
 
 // =============================================================================
-// DOMAIN LAYER - Business Logic
+// DOMAIN LAYER - Errors
 // =============================================================================
 
 export {
@@ -25,25 +14,29 @@ export {
   SubscriptionRepositoryError,
   SubscriptionValidationError,
   SubscriptionConfigurationError,
-} from './domain/errors/SubscriptionError';
+} from "./domain/errors/SubscriptionError";
+
+// =============================================================================
+// DOMAIN LAYER - Entities
+// =============================================================================
 
 export {
   createDefaultSubscriptionStatus,
   isSubscriptionValid,
-} from './domain/entities/SubscriptionStatus';
-export type { SubscriptionStatus } from './domain/entities/SubscriptionStatus';
+} from "./domain/entities/SubscriptionStatus";
+export type { SubscriptionStatus } from "./domain/entities/SubscriptionStatus";
 
-export type { SubscriptionConfig } from './domain/value-objects/SubscriptionConfig';
+export type { SubscriptionConfig } from "./domain/value-objects/SubscriptionConfig";
 
 // =============================================================================
 // APPLICATION LAYER - Ports
 // =============================================================================
 
-export type { ISubscriptionRepository } from './application/ports/ISubscriptionRepository';
-export type { ISubscriptionService } from './application/ports/ISubscriptionService';
+export type { ISubscriptionRepository } from "./application/ports/ISubscriptionRepository";
+export type { ISubscriptionService } from "./application/ports/ISubscriptionService";
 
 // =============================================================================
-// INFRASTRUCTURE LAYER - Implementation
+// INFRASTRUCTURE LAYER - Services
 // =============================================================================
 
 export {
@@ -51,71 +44,85 @@ export {
   initializeSubscriptionService,
   getSubscriptionService,
   resetSubscriptionService,
-} from './infrastructure/services/SubscriptionService';
+} from "./infrastructure/services/SubscriptionService";
 
 // =============================================================================
 // PRESENTATION LAYER - Hooks
 // =============================================================================
 
-export { useSubscription } from './presentation/hooks/useSubscription';
-export type { UseSubscriptionResult } from './presentation/hooks/useSubscription';
+export { useSubscription } from "./presentation/hooks/useSubscription";
+export type { UseSubscriptionResult } from "./presentation/hooks/useSubscription";
 
 export {
   usePremiumGate,
   type UsePremiumGateParams,
   type UsePremiumGateResult,
-} from './presentation/hooks/usePremiumGate';
+} from "./presentation/hooks/usePremiumGate";
 
 export {
   useUserTier,
   type UseUserTierParams,
   type UseUserTierResult,
-} from './presentation/hooks/useUserTier';
+} from "./presentation/hooks/useUserTier";
 
 export {
   useUserTierWithRepository,
   type UseUserTierWithRepositoryParams,
   type UseUserTierWithRepositoryResult,
   type AuthProvider,
-} from './presentation/hooks/useUserTierWithRepository';
+} from "./presentation/hooks/useUserTierWithRepository";
 
 // =============================================================================
-// UTILS
+// PRESENTATION LAYER - Paywall Components
+// =============================================================================
+
+export {
+  SubscriptionModal,
+  type SubscriptionModalProps,
+} from "./presentation/components/paywall/SubscriptionModal";
+
+export { SubscriptionPlanCard } from "./presentation/components/paywall/SubscriptionPlanCard";
+export { PaywallFeaturesList } from "./presentation/components/paywall/PaywallFeaturesList";
+export { PaywallFeatureItem } from "./presentation/components/paywall/PaywallFeatureItem";
+export { PaywallLegalFooter } from "./presentation/components/paywall/PaywallLegalFooter";
+
+// =============================================================================
+// UTILS - Date & Price
 // =============================================================================
 
-// Date utilities
 export {
   isSubscriptionExpired,
   getDaysUntilExpiration,
-} from './utils/dateValidationUtils';
+} from "./utils/dateValidationUtils";
 
+export { formatPrice } from "./utils/priceUtils";
 
 // =============================================================================
-// USER TIER - Types & Utilities
+// UTILS - User Tier
 // =============================================================================
 
 export type {
   UserTier,
   UserTierInfo,
   PremiumStatusFetcher,
-} from './utils/types';
+} from "./utils/types";
 
 export {
   getUserTierInfo,
   checkPremiumAccess,
-} from './utils/tierUtils';
+} from "./utils/tierUtils";
 
 export {
   hasTierAccess,
   isTierPremium,
   isTierFreemium,
   isTierGuest,
-} from './utils/userTierUtils';
+} from "./utils/userTierUtils";
 
 export {
   isAuthenticated,
   isGuest,
-} from './utils/authUtils';
+} from "./utils/authUtils";
 
 export {
   isValidUserTier,
@@ -124,5 +131,10 @@ export {
   validateIsGuest,
   validateIsPremium,
   validateFetcher,
-} from './utils/validation';
+} from "./utils/validation";
+
+// =============================================================================
+// TYPES - Re-export from peer dependencies
+// =============================================================================
 
+export type { PurchasesPackage } from "react-native-purchases";

package/src/presentation/components/paywall/CreditsPackageCard.tsx

@@ -0,0 +1,129 @@
+/**
+ * Credits Package Card Component
+ * Single Responsibility: Display a single credits package option
+ */
+
+import React from "react";
+import { View, StyleSheet, TouchableOpacity } from "react-native";
+import { AtomicText } from "@umituz/react-native-design-system-atoms";
+import { useAppDesignTokens } from "@umituz/react-native-design-system-theme";
+import type { CreditsPackage } from "../../domain/entities/CreditsPackage";
+
+interface CreditsPackageCardProps {
+  package: CreditsPackage;
+  isSelected: boolean;
+  onSelect: () => void;
+}
+
+export const CreditsPackageCard: React.FC<CreditsPackageCardProps> =
+  React.memo(({ package: pkg, isSelected, onSelect }) => {
+    const tokens = useAppDesignTokens();
+
+    const totalCredits = pkg.credits + (pkg.bonus || 0);
+
+    return (
+      <TouchableOpacity
+        style={[
+          styles.container,
+          {
+            backgroundColor: isSelected
+              ? tokens.colors.primaryLight
+              : tokens.colors.surface,
+            borderColor: isSelected
+              ? tokens.colors.primary
+              : tokens.colors.border,
+            borderWidth: isSelected ? 2 : 1,
+          },
+        ]}
+        onPress={onSelect}
+        activeOpacity={0.8}
+      >
+        {pkg.badge && (
+          <View
+            style={[styles.badge, { backgroundColor: tokens.colors.warning }]}
+          >
+            <AtomicText
+              type="labelSmall"
+              style={{ color: tokens.colors.onPrimary, fontWeight: "700" }}
+            >
+              {pkg.badge}
+            </AtomicText>
+          </View>
+        )}
+        <View style={styles.content}>
+          <View style={styles.leftSection}>
+            <AtomicText
+              type="headlineMedium"
+              style={[styles.credits, { color: tokens.colors.textPrimary }]}
+            >
+              {totalCredits.toLocaleString()} Credits
+            </AtomicText>
+            {(pkg.bonus ?? 0) > 0 && (
+              <AtomicText
+                type="bodySmall"
+                style={[styles.bonus, { color: tokens.colors.success }]}
+              >
+                +{pkg.bonus} bonus
+              </AtomicText>
+            )}
+            {pkg.description && (
+              <AtomicText
+                type="bodySmall"
+                style={{ color: tokens.colors.textSecondary }}
+              >
+                {pkg.description}
+              </AtomicText>
+            )}
+          </View>
+          <View style={styles.rightSection}>
+            <AtomicText
+              type="titleLarge"
+              style={[styles.price, { color: tokens.colors.primary }]}
+            >
+              {pkg.currency} {pkg.price.toFixed(2)}
+            </AtomicText>
+          </View>
+        </View>
+      </TouchableOpacity>
+    );
+  });
+
+CreditsPackageCard.displayName = "CreditsPackageCard";
+
+const styles = StyleSheet.create({
+  container: {
+    borderRadius: 16,
+    padding: 20,
+    position: "relative",
+  },
+  badge: {
+    position: "absolute",
+    top: -10,
+    right: 20,
+    paddingHorizontal: 10,
+    paddingVertical: 4,
+    borderRadius: 8,
+  },
+  content: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+  },
+  leftSection: {
+    flex: 1,
+  },
+  credits: {
+    fontWeight: "700",
+    marginBottom: 4,
+  },
+  bonus: {
+    fontWeight: "600",
+    marginBottom: 4,
+  },
+  rightSection: {
+    alignItems: "flex-end",
+  },
+  price: {
+    fontWeight: "700",
+  },
+});

package/src/presentation/components/paywall/CreditsTabContent.tsx

@@ -0,0 +1,130 @@
+/**
+ * Credits Tab Content Component
+ * Single Responsibility: Display credits packages list
+ */
+
+import React from "react";
+import { View, StyleSheet, ScrollView } from "react-native";
+import { AtomicText, AtomicButton } from "@umituz/react-native-design-system-atoms";
+import { useAppDesignTokens } from "@umituz/react-native-design-system-theme";
+import { useLocalization } from "@umituz/react-native-localization";
+import { CreditsPackageCard } from "./CreditsPackageCard";
+import { PaywallLegalFooter } from "./PaywallLegalFooter";
+import type { CreditsPackage } from "../../domain/entities/CreditsPackage";
+
+interface CreditsTabContentProps {
+  packages: CreditsPackage[];
+  selectedPackageId: string | null;
+  onSelectPackage: (packageId: string) => void;
+  onPurchase: () => void;
+  currentCredits: number;
+  requiredCredits?: number;
+  isLoading?: boolean;
+  purchaseButtonText?: string;
+  creditsInfoText?: string;
+  processingText?: string;
+}
+
+export const CreditsTabContent: React.FC<CreditsTabContentProps> = React.memo(
+  ({
+    packages,
+    selectedPackageId,
+    onSelectPackage,
+    onPurchase,
+    currentCredits,
+    requiredCredits,
+    isLoading = false,
+    purchaseButtonText,
+    creditsInfoText,
+    processingText,
+  }) => {
+    const tokens = useAppDesignTokens();
+    const { t } = useLocalization();
+
+    const needsCredits = requiredCredits && requiredCredits > currentCredits;
+    
+    const displayPurchaseButtonText = purchaseButtonText ||
+      t("paywall.purchase", { defaultValue: "Purchase" });
+    const displayProcessingText = processingText ||
+      t("paywall.processing", { defaultValue: "Processing..." });
+    const displayCreditsInfoText = creditsInfoText ||
+      t("paywall.creditsInfo", { defaultValue: "You need {required} credits. You have {current}." });
+
+    return (
+      <View style={styles.container}>
+        {needsCredits && (
+          <View
+            style={[
+              styles.infoCard,
+              { backgroundColor: tokens.colors.surfaceSecondary },
+            ]}
+          >
+            <AtomicText
+              type="bodyMedium"
+              style={{ color: tokens.colors.textSecondary }}
+            >
+              {displayCreditsInfoText
+                .replace("{required}", String(requiredCredits))
+                .replace("{current}", String(currentCredits))}
+            </AtomicText>
+          </View>
+        )}
+
+        <ScrollView
+          style={styles.scrollView}
+          contentContainerStyle={styles.scrollContent}
+          showsVerticalScrollIndicator={false}
+        >
+          <View style={styles.packagesContainer}>
+            {packages.map((pkg) => (
+              <CreditsPackageCard
+                key={pkg.id}
+                package={pkg}
+                isSelected={selectedPackageId === pkg.id}
+                onSelect={() => onSelectPackage(pkg.id)}
+              />
+            ))}
+          </View>
+        </ScrollView>
+
+        <View style={styles.footer}>
+          <AtomicButton
+            title={isLoading ? displayProcessingText : displayPurchaseButtonText}
+            onPress={onPurchase}
+            disabled={!selectedPackageId || isLoading}
+          />
+        </View>
+
+        <PaywallLegalFooter />
+      </View>
+    );
+  },
+);
+
+CreditsTabContent.displayName = "CreditsTabContent";
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  infoCard: {
+    marginHorizontal: 24,
+    marginBottom: 16,
+    padding: 12,
+    borderRadius: 12,
+  },
+  scrollView: {
+    flex: 1,
+  },
+  scrollContent: {
+    paddingHorizontal: 24,
+    paddingBottom: 16,
+  },
+  packagesContainer: {
+    gap: 12,
+  },
+  footer: {
+    padding: 24,
+    paddingTop: 16,
+  },
+});

package/src/presentation/components/paywall/PaywallFeatureItem.tsx

@@ -0,0 +1,66 @@
+/**
+ * Paywall Feature Item Component
+ * Single Responsibility: Display a single feature in the features list
+ */
+
+import React, { useMemo } from "react";
+import { View, StyleSheet } from "react-native";
+import { AtomicText, AtomicIcon } from "@umituz/react-native-design-system-atoms";
+import { useAppDesignTokens } from "@umituz/react-native-design-system-theme";
+
+interface PaywallFeatureItemProps {
+  icon: string;
+  text: string;
+}
+
+export const PaywallFeatureItem: React.FC<PaywallFeatureItemProps> = React.memo(
+  ({ icon, text }) => {
+    const tokens = useAppDesignTokens();
+
+    // Icon name should already be PascalCase (e.g., "Sparkles", "Image", "Wand")
+    // If not, convert first letter to uppercase
+    const iconName = useMemo(() => {
+      if (!icon) return "Circle";
+      // If already PascalCase, return as is
+      if (/^[A-Z]/.test(icon)) {
+        return icon;
+      }
+      // Convert first letter to uppercase
+      return icon.charAt(0).toUpperCase() + icon.slice(1);
+    }, [icon]);
+
+    return (
+      <View style={styles.featureItem}>
+        <AtomicIcon
+          name={iconName}
+          customSize={20}
+          customColor={tokens.colors.primary}
+          style={styles.featureIcon}
+        />
+        <AtomicText
+          type="bodyMedium"
+          style={[styles.featureText, { color: tokens.colors.text }]}
+        >
+          {text}
+        </AtomicText>
+      </View>
+    );
+  },
+);
+
+PaywallFeatureItem.displayName = "PaywallFeatureItem";
+
+const styles = StyleSheet.create({
+  featureItem: {
+    flexDirection: "row",
+    alignItems: "center",
+  },
+  featureIcon: {
+    marginRight: 12,
+  },
+  featureText: {
+    fontSize: 15,
+    flex: 1,
+    lineHeight: 22,
+  },
+});

package/src/presentation/components/paywall/PaywallFeaturesList.tsx

@@ -0,0 +1,43 @@
+/**
+ * Paywall Features List Component
+ * Displays premium features list
+ */
+
+import React from "react";
+import { View, StyleSheet } from "react-native";
+import { PaywallFeatureItem } from "./PaywallFeatureItem";
+
+interface PaywallFeaturesListProps {
+  /** Features list */
+  features: Array<{ icon: string; text: string }>;
+  /** Optional custom container style */
+  containerStyle?: object;
+  /** Optional gap between items (default: 12) */
+  gap?: number;
+}
+
+export const PaywallFeaturesList: React.FC<PaywallFeaturesListProps> = React.memo(
+  ({ features, containerStyle, gap = 12 }) => {
+    return (
+      <View style={[styles.container, containerStyle]}>
+        {features.map((feature, index) => (
+          <View
+            key={`${feature.icon}-${feature.text}-${index}`}
+            style={{ marginBottom: index < features.length - 1 ? gap : 0 }}
+          >
+            <PaywallFeatureItem icon={feature.icon} text={feature.text} />
+          </View>
+        ))}
+      </View>
+    );
+  },
+);
+
+PaywallFeaturesList.displayName = "PaywallFeaturesList";
+
+const styles = StyleSheet.create({
+  container: {
+    width: "100%",
+  },
+});
+