@umituz/react-native-subscription 2.10.2 → 2.10.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-subscription",
-  "version": "2.10.2",
+  "version": "2.10.3",
   "description": "Complete subscription management with RevenueCat, paywall UI, and credits system for React Native apps",
   "main": "./src/index.ts",
   "types": "./src/index.ts",

package/src/index.ts

@@ -190,21 +190,15 @@ export {
 } from "./infrastructure/repositories/CreditsRepository";
 
 // =============================================================================
-// CREDITS SYSTEM - Context & Provider
+// CREDITS SYSTEM - Configuration (Module-Level Provider)
 // =============================================================================
 
 export {
-  CreditsContext,
-  useCreditsContext,
-  useCreditsConfig,
-  useCreditsRepository,
-  type CreditsContextValue,
-} from "./presentation/context/CreditsContext";
-
-export {
-  CreditsProvider,
-  type CreditsProviderProps,
-} from "./presentation/providers/CreditsProvider";
+  configureCreditsRepository,
+  getCreditsRepository,
+  getCreditsConfig,
+  resetCreditsRepository,
+} from "./infrastructure/repositories/CreditsRepositoryProvider";
 
 // =============================================================================
 // CREDITS SYSTEM - Hooks

package/src/infrastructure/repositories/CreditsRepositoryProvider.ts

@@ -0,0 +1,53 @@
+/**
+ * Credits Repository Provider
+ * Module-level singleton for credits repository configuration
+ * Replaces Context API with a simpler, testable approach
+ */
+
+import type { CreditsConfig } from "../../domain/entities/Credits";
+import { DEFAULT_CREDITS_CONFIG } from "../../domain/entities/Credits";
+import type { CreditsRepository } from "./CreditsRepository";
+import { createCreditsRepository } from "./CreditsRepository";
+
+let globalRepository: CreditsRepository | null = null;
+let globalConfig: CreditsConfig = DEFAULT_CREDITS_CONFIG;
+
+/**
+ * Configure credits repository for the application
+ * Must be called once during app initialization
+ */
+export function configureCreditsRepository(config: Partial<CreditsConfig>): void {
+  globalConfig = {
+    ...DEFAULT_CREDITS_CONFIG,
+    ...config,
+  };
+  globalRepository = createCreditsRepository(globalConfig);
+}
+
+/**
+ * Get the configured credits repository
+ * Throws if repository not configured
+ */
+export function getCreditsRepository(): CreditsRepository {
+  if (!globalRepository) {
+    throw new Error(
+      "CreditsRepository not configured. Call configureCreditsRepository() first."
+    );
+  }
+  return globalRepository;
+}
+
+/**
+ * Get the current credits configuration
+ */
+export function getCreditsConfig(): CreditsConfig {
+  return globalConfig;
+}
+
+/**
+ * Reset repository (for testing)
+ */
+export function resetCreditsRepository(): void {
+  globalRepository = null;
+  globalConfig = DEFAULT_CREDITS_CONFIG;
+}

package/src/presentation/components/feedback/paywallFeedbackStyles.ts

@@ -28,11 +28,8 @@ export const createPaywallFeedbackStyles = (
             backgroundColor: tokens.colors.surface,
             borderRadius: 24,
             padding: 24,
-            shadowColor: "#000",
-            shadowOffset: { width: 0, height: 8 },
-            shadowOpacity: 0.25,
-            shadowRadius: 16,
-            elevation: 8,
+            borderWidth: 1,
+            borderColor: tokens.colors.border,
         },
         header: {
             alignItems: "center",

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

@@ -5,8 +5,7 @@
 
 import React, { useEffect } from "react";
 import { View, StyleSheet } from "react-native";
-import { useAppDesignTokens, BaseModal, useResponsive } from "@umituz/react-native-design-system";
-import { useLocalization } from "@umituz/react-native-localization";
+import { BaseModal, useResponsive } from "@umituz/react-native-design-system";
 import type { PurchasesPackage } from "react-native-purchases";
 import { usePaywall } from "../../hooks/usePaywall";
 import { PaywallHeader } from "./PaywallHeader";
@@ -35,8 +34,12 @@ export interface PaywallModalProps {
   onRestore?: () => Promise<void>;
   subscriptionFeatures?: Array<{ icon: string; text: string }>;
   isLoading?: boolean;
-  title?: string;
-  subtitle?: string;
+  title: string;
+  subtitle: string;
+  creditsTabLabel: string;
+  subscriptionTabLabel: string;
+  purchaseButtonText: string;
+  subscribeButtonText: string;
   privacyUrl?: string;
   termsUrl?: string;
   privacyText?: string;
@@ -60,6 +63,10 @@ export const PaywallModal: React.FC<PaywallModalProps> = React.memo((props) => {
     isLoading = false,
     title,
     subtitle,
+    creditsTabLabel,
+    subscriptionTabLabel,
+    purchaseButtonText,
+    subscribeButtonText,
     privacyUrl,
     termsUrl,
     privacyText,
@@ -67,8 +74,6 @@ export const PaywallModal: React.FC<PaywallModalProps> = React.memo((props) => {
     restoreButtonText,
   } = props;
 
-  const tokens = useAppDesignTokens();
-  const { t } = useLocalization();
   const { modalLayout } = useResponsive();
 
   const {
@@ -86,9 +91,6 @@ export const PaywallModal: React.FC<PaywallModalProps> = React.memo((props) => {
     onSubscriptionPurchase,
   });
 
-  const displayTitle = title || t("paywall.title");
-  const displaySubtitle = subtitle || t("paywall.subtitle");
-
   useEffect(() => {
     if (__DEV__) {
       console.log("[PaywallModal] State:", {
@@ -105,8 +107,8 @@ export const PaywallModal: React.FC<PaywallModalProps> = React.memo((props) => {
     <BaseModal visible={visible} onClose={onClose}>
       <View style={styles.container}>
         <PaywallHeader
-          title={displayTitle}
-          subtitle={displaySubtitle}
+          title={title}
+          subtitle={subtitle}
           onClose={onClose}
           variant="fullscreen"
         />
@@ -114,8 +116,8 @@ export const PaywallModal: React.FC<PaywallModalProps> = React.memo((props) => {
         <PaywallTabBar
           activeTab={activeTab}
           onTabChange={handleTabChange}
-          creditsLabel={t("paywall.tabs.credits")}
-          subscriptionLabel={t("paywall.tabs.subscription")}
+          creditsLabel={creditsTabLabel}
+          subscriptionLabel={subscriptionTabLabel}
         />
 
         <View style={styles.tabContent}>
@@ -128,7 +130,7 @@ export const PaywallModal: React.FC<PaywallModalProps> = React.memo((props) => {
               currentCredits={currentCredits}
               requiredCredits={requiredCredits}
               isLoading={isLoading}
-              purchaseButtonText={t("paywall.purchase")}
+              purchaseButtonText={purchaseButtonText}
             />
           ) : (
             <SubscriptionTabContent
@@ -138,7 +140,7 @@ export const PaywallModal: React.FC<PaywallModalProps> = React.memo((props) => {
               onPurchase={handleSubscriptionPurchase}
               features={subscriptionFeatures}
               isLoading={isLoading}
-              purchaseButtonText={t("paywall.subscribe")}
+              purchaseButtonText={subscribeButtonText}
               onRestore={onRestore}
               privacyUrl={privacyUrl}
               termsUrl={termsUrl}

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

@@ -20,15 +20,15 @@ export interface SubscriptionModalProps {
   packages: PurchasesPackage[];
   onPurchase: (pkg: PurchasesPackage) => Promise<boolean>;
   onRestore: () => Promise<boolean>;
-  title?: string;
+  title: string;
   subtitle?: string;
   features?: Array<{ icon: string; text: string }>;
   isLoading?: boolean;
-  purchaseButtonText?: string;
-  restoreButtonText?: string;
-  loadingText?: string;
-  emptyText?: string;
-  processingText?: string;
+  purchaseButtonText: string;
+  restoreButtonText: string;
+  loadingText: string;
+  emptyText: string;
+  processingText: string;
   privacyUrl?: string;
   termsUrl?: string;
   privacyText?: string;
@@ -43,15 +43,15 @@ export const SubscriptionModal: React.FC<SubscriptionModalProps> = React.memo((p
     packages,
     onPurchase,
     onRestore,
-    title = "Go Premium",
+    title,
     subtitle,
     features = [],
     isLoading = false,
-    purchaseButtonText = "Subscribe",
-    restoreButtonText = "Restore Purchases",
-    loadingText = "Loading...",
-    emptyText = "No packages",
-    processingText = "Processing...",
+    purchaseButtonText,
+    restoreButtonText,
+    loadingText,
+    emptyText,
+    processingText,
     privacyUrl,
     termsUrl,
     privacyText,

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

@@ -6,7 +6,6 @@
 import React, { useMemo } from "react";
 import { View, StyleSheet, ScrollView } from "react-native";
 import { useAppDesignTokens } from "@umituz/react-native-design-system";
-import { useLocalization } from "@umituz/react-native-localization";
 import type { PurchasesPackage } from "react-native-purchases";
 import { PaywallFeaturesList } from "./PaywallFeaturesList";
 import { SubscriptionPackageList } from "./SubscriptionPackageList";
@@ -20,9 +19,11 @@ interface SubscriptionTabContentProps {
   onRestore?: () => void;
   features?: Array<{ icon: string; text: string }>;
   isLoading?: boolean;
-  purchaseButtonText?: string;
-  processingText?: string;
-  restoreButtonText?: string;
+  purchaseButtonText: string;
+  processingText: string;
+  restoreButtonText: string;
+  loadingText: string;
+  emptyText: string;
   privacyUrl?: string;
   termsUrl?: string;
   privacyText?: string;
@@ -57,20 +58,14 @@ export const SubscriptionTabContent: React.FC<SubscriptionTabContentProps> =
       purchaseButtonText,
       processingText,
       restoreButtonText,
+      loadingText,
+      emptyText,
       privacyUrl,
       termsUrl,
       privacyText,
       termsOfServiceText,
     }) => {
       const tokens = useAppDesignTokens();
-      const { t } = useLocalization();
-
-      const displayPurchaseButtonText =
-        purchaseButtonText || t("paywall.subscribe");
-      const displayProcessingText =
-        processingText || t("paywall.processing");
-      const displayRestoreButtonText =
-        restoreButtonText || t("paywall.restore");
 
       const sortedPackages = useMemo(() => sortPackages(packages), [packages]);
 
@@ -86,8 +81,8 @@ export const SubscriptionTabContent: React.FC<SubscriptionTabContentProps> =
               isLoading={isLoading}
               selectedPkg={selectedPackage}
               onSelect={onSelectPackage}
-              loadingText={t("paywall.loading")}
-              emptyText={t("paywall.empty")}
+              loadingText={loadingText}
+              emptyText={emptyText}
             />
 
             {features.length > 0 && (
@@ -103,13 +98,13 @@ export const SubscriptionTabContent: React.FC<SubscriptionTabContentProps> =
           </ScrollView>
 
           <SubscriptionFooter
-            isProcessing={false} // Tab content usually delegated processing to external state, currently no isProcessing prop passed. Assuming false or controlled by isLoading.
+            isProcessing={false}
             isLoading={isLoading}
-            processingText={displayProcessingText}
-            purchaseButtonText={displayPurchaseButtonText}
+            processingText={processingText}
+            purchaseButtonText={purchaseButtonText}
             hasPackages={packages.length > 0}
             selectedPkg={selectedPackage}
-            restoreButtonText={displayRestoreButtonText}
+            restoreButtonText={restoreButtonText}
             showRestoreButton={!!onRestore}
             onPurchase={onPurchase}
             onRestore={onRestore || (() => { })}

package/src/presentation/hooks/useCreditChecker.ts

@@ -1,12 +1,12 @@
 /**
  * useCreditChecker Hook
  *
- * Provides credit checking utilities using context repository.
+ * Provides credit checking utilities using module-level repository.
  */
 
 import { useMemo } from "react";
 import type { CreditType } from "../../domain/entities/Credits";
-import { useCreditsRepository } from "../context/CreditsContext";
+import { getCreditsRepository } from "../../infrastructure/repositories/CreditsRepositoryProvider";
 import {
   createCreditChecker,
   type CreditCheckResult,
@@ -30,11 +30,11 @@ export interface UseCreditCheckerResult {
 export const useCreditChecker = ({
   getCreditType,
 }: UseCreditCheckerParams): UseCreditCheckerResult => {
-  const repository = useCreditsRepository();
+  const repository = getCreditsRepository();
 
   const checker = useMemo(
     () => createCreditChecker({ repository, getCreditType }),
-    [repository, getCreditType]
+    [getCreditType]
   );
 
   return checker;

package/src/presentation/hooks/useCredits.ts

@@ -2,15 +2,15 @@
  * useCredits Hook
  *
  * TanStack Query hook for fetching user credits.
- * Generic and reusable - uses config from CreditsProvider.
+ * Generic and reusable - uses config from module-level provider.
  */
 
 import { useQuery } from "@tanstack/react-query";
 import type { UserCredits, CreditType } from "../../domain/entities/Credits";
 import {
-  useCreditsRepository,
-  useCreditsConfig,
-} from "../context/CreditsContext";
+  getCreditsRepository,
+  getCreditsConfig,
+} from "../../infrastructure/repositories/CreditsRepositoryProvider";
 
 const CACHE_CONFIG = {
   staleTime: 30 * 1000,
@@ -42,8 +42,8 @@ export const useCredits = ({
   userId,
   enabled = true,
 }: UseCreditsParams): UseCreditsResult => {
-  const repository = useCreditsRepository();
-  const config = useCreditsConfig();
+  const repository = getCreditsRepository();
+  const config = getCreditsConfig();
 
   const { data, isLoading, error, refetch } = useQuery({
     queryKey: creditsQueryKeys.user(userId ?? ""),

package/src/presentation/hooks/useDeductCredit.ts

@@ -2,12 +2,12 @@
  * useDeductCredit Hook
  *
  * TanStack Query mutation hook for deducting credits.
- * Generic and reusable - uses config from CreditsProvider.
+ * Generic and reusable - uses module-level repository.
  */
 
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import type { CreditType, UserCredits } from "../../domain/entities/Credits";
-import { useCreditsRepository } from "../context/CreditsContext";
+import { getCreditsRepository } from "../../infrastructure/repositories/CreditsRepositoryProvider";
 import { creditsQueryKeys } from "./useCredits";
 
 export interface UseDeductCreditParams {
@@ -24,7 +24,7 @@ export const useDeductCredit = ({
   userId,
   onCreditsExhausted,
 }: UseDeductCreditParams): UseDeductCreditResult => {
-  const repository = useCreditsRepository();
+  const repository = getCreditsRepository();
   const queryClient = useQueryClient();
 
   const mutation = useMutation({
@@ -113,7 +113,7 @@ export interface UseInitializeCreditsResult {
 export const useInitializeCredits = ({
   userId,
 }: UseInitializeCreditsParams): UseInitializeCreditsResult => {
-  const repository = useCreditsRepository();
+  const repository = getCreditsRepository();
   const queryClient = useQueryClient();
 
   const mutation = useMutation({

package/src/presentation/context/CreditsContext.ts

@@ -1,42 +0,0 @@
-/**
- * Credits Context
- *
- * React context for credits configuration.
- * Allows main app to provide credit limits and collection name.
- */
-
-import { createContext, useContext } from "react";
-import type { CreditsConfig } from "../../domain/entities/Credits";
-import { DEFAULT_CREDITS_CONFIG } from "../../domain/entities/Credits";
-import type { CreditsRepository } from "../../infrastructure/repositories/CreditsRepository";
-
-export interface CreditsContextValue {
-  config: CreditsConfig;
-  repository: CreditsRepository | null;
-}
-
-export const CreditsContext = createContext<CreditsContextValue>({
-  config: DEFAULT_CREDITS_CONFIG,
-  repository: null,
-});
-
-export const useCreditsContext = (): CreditsContextValue => {
-  const context = useContext(CreditsContext);
-  if (!context.repository) {
-    throw new Error("CreditsProvider must be used to provide credits config");
-  }
-  return context;
-};
-
-export const useCreditsConfig = (): CreditsConfig => {
-  const { config } = useContext(CreditsContext);
-  return config;
-};
-
-export const useCreditsRepository = (): CreditsRepository => {
-  const { repository } = useContext(CreditsContext);
-  if (!repository) {
-    throw new Error("CreditsProvider must be used to provide repository");
-  }
-  return repository;
-};

package/src/presentation/providers/CreditsProvider.tsx

@@ -1,38 +0,0 @@
-/**
- * Credits Provider
- *
- * React provider for credits configuration.
- * Main app uses this to configure credit limits.
- */
-
-import React, { useMemo } from "react";
-import type { CreditsConfig } from "../../domain/entities/Credits";
-import { DEFAULT_CREDITS_CONFIG } from "../../domain/entities/Credits";
-import {
-  CreditsContext,
-  type CreditsContextValue,
-} from "../context/CreditsContext";
-import { createCreditsRepository } from "../../infrastructure/repositories/CreditsRepository";
-
-export interface CreditsProviderProps {
-  children: React.ReactNode;
-  config?: Partial<CreditsConfig>;
-}
-
-export const CreditsProvider: React.FC<CreditsProviderProps> = ({
-  children,
-  config,
-}) => {
-  const value = useMemo<CreditsContextValue>(() => {
-    const mergedConfig: CreditsConfig = {
-      ...DEFAULT_CREDITS_CONFIG,
-      ...config,
-    };
-    const repository = createCreditsRepository(mergedConfig);
-    return { config: mergedConfig, repository };
-  }, [config]);
-
-  return (
-    <CreditsContext.Provider value={value}>{children}</CreditsContext.Provider>
-  );
-};