@umituz/react-native-subscription 2.12.14 → 2.12.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-subscription",
-  "version": "2.12.14",
+  "version": "2.12.16",
   "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/domains/paywall/components/PaywallModal.tsx

@@ -4,7 +4,7 @@
  */
 
 import React, { useState, useCallback } from "react";
-import { View, ScrollView, StyleSheet, TouchableOpacity, ActivityIndicator } from "react-native";
+import { View, ScrollView, StyleSheet, TouchableOpacity, ActivityIndicator, Linking } from "react-native";
 import { BaseModal, useAppDesignTokens, AtomicText, AtomicIcon } from "@umituz/react-native-design-system";
 import type { PurchasesPackage } from "react-native-purchases";
 import { PlanCard } from "./PlanCard";
@@ -80,6 +80,18 @@ export const PaywallModal: React.FC<PaywallModalProps> = React.memo((props) => {
         }
     }, [onRestore, isProcessing]);
 
+    const handleLegalUrl = useCallback(async (url: string | undefined) => {
+        if (!url) return;
+        try {
+            const supported = await Linking.canOpenURL(url);
+            if (supported) {
+                await Linking.openURL(url);
+            }
+        } catch (error) {
+            // Silent fail
+        }
+    }, []);
+
     const isPurchaseDisabled = showSubscription ? !selectedPlanId : !selectedCreditId;
 
     return (
@@ -161,22 +173,26 @@ export const PaywallModal: React.FC<PaywallModalProps> = React.memo((props) => {
 
                     <View style={styles.footer}>
                         {onRestore && (
-                            <TouchableOpacity onPress={handleRestore} style={styles.restoreButton}>
+                            <TouchableOpacity
+                                onPress={handleRestore}
+                                disabled={isProcessing}
+                                style={[styles.restoreButton, isProcessing && styles.restoreButtonDisabled]}
+                            >
                                 <AtomicText type="bodySmall" style={[styles.footerLink, { color: tokens.colors.textSecondary }]}>
-                                    {translations.restoreButtonText}
+                                    {isProcessing ? translations.processingText : translations.restoreButtonText}
                                 </AtomicText>
                             </TouchableOpacity>
                         )}
                         <View style={styles.legalRow}>
                             {legalUrls.termsUrl && (
-                                <TouchableOpacity onPress={() => {}}>
+                                <TouchableOpacity onPress={() => handleLegalUrl(legalUrls.termsUrl)}>
                                     <AtomicText type="bodySmall" style={[styles.footerLink, { color: tokens.colors.textSecondary }]}>
                                         {translations.termsOfServiceText}
                                     </AtomicText>
                                 </TouchableOpacity>
                             )}
                             {legalUrls.privacyUrl && (
-                                <TouchableOpacity onPress={() => {}}>
+                                <TouchableOpacity onPress={() => handleLegalUrl(legalUrls.privacyUrl)}>
                                     <AtomicText type="bodySmall" style={[styles.footerLink, { color: tokens.colors.textSecondary }]}>
                                         {translations.privacyText}
                                     </AtomicText>
@@ -212,6 +228,7 @@ const styles = StyleSheet.create({
     ctaText: { fontWeight: "700" },
     footer: { flexDirection: "column", alignItems: "center", gap: 8 },
     restoreButton: { marginBottom: 8 },
+    restoreButtonDisabled: { opacity: 0.5 },
     legalRow: { flexDirection: "row", justifyContent: "center", gap: 16 },
     footerLink: {},
 });

package/src/index.ts

@@ -120,6 +120,8 @@ export {
   type SubscriptionDetailTranslations,
 } from "./presentation/screens/SubscriptionDetailScreen";
 
+export { type DevTestActions } from "./presentation/screens/components/DevTestSection";
+
 
 // =============================================================================
 // UTILS - Date & Price

package/src/presentation/screens/SubscriptionDetailScreen.tsx

@@ -5,11 +5,12 @@
  */
 
 import React from "react";
-import { ScrollView, StyleSheet } from "react-native";
+import { View, ScrollView, StyleSheet } from "react-native";
 import { useAppDesignTokens } from "@umituz/react-native-design-system";
 import { SubscriptionHeader } from "./components/SubscriptionHeader";
 import { CreditsList } from "./components/CreditsList";
 import { SubscriptionActions } from "./components/SubscriptionActions";
+import { DevTestSection, type DevTestActions } from "./components/DevTestSection";
 import type { SubscriptionStatusType } from "../components/details/PremiumStatusBadge";
 import type { CreditInfo } from "../components/details/PremiumDetailsCard";
 
@@ -41,6 +42,10 @@ export interface SubscriptionDetailConfig {
     translations: SubscriptionDetailTranslations;
     onManageSubscription?: () => void;
     onUpgrade?: () => void;
+    devTools?: {
+        actions: DevTestActions;
+        title?: string;
+    };
 }
 
 export interface SubscriptionDetailScreenProps {
@@ -54,39 +59,48 @@ export const SubscriptionDetailScreen: React.FC<
     const showCredits = config.credits && config.credits.length > 0;
 
     return (
-        <ScrollView
-            style={[styles.container, { backgroundColor: tokens.colors.backgroundPrimary }]}
-            contentContainerStyle={styles.content}
-        >
-            <SubscriptionHeader
-                statusType={config.statusType}
-                isPremium={config.isPremium}
-                isLifetime={config.isLifetime}
-                expirationDate={config.expirationDate}
-                purchaseDate={config.purchaseDate}
-                daysRemaining={config.daysRemaining}
-                translations={config.translations}
-            />
+        <View style={{ flex: 1 }}>
+            <ScrollView
+                style={[styles.container, { backgroundColor: tokens.colors.backgroundPrimary }]}
+                contentContainerStyle={styles.content}
+            >
+                <SubscriptionHeader
+                    statusType={config.statusType}
+                    isPremium={config.isPremium}
+                    isLifetime={config.isLifetime}
+                    expirationDate={config.expirationDate}
+                    purchaseDate={config.purchaseDate}
+                    daysRemaining={config.daysRemaining}
+                    translations={config.translations}
+                />
+
+                {showCredits && (
+                    <CreditsList
+                        credits={config.credits!}
+                        title={
+                            config.translations.usageTitle || config.translations.creditsTitle
+                        }
+                        description={config.translations.creditsResetInfo}
+                        remainingLabel={config.translations.remainingLabel}
+                    />
+                )}
 
-            {showCredits && (
-                <CreditsList
-                    credits={config.credits!}
-                    title={
-                        config.translations.usageTitle || config.translations.creditsTitle
-                    }
-                    description={config.translations.creditsResetInfo}
-                    remainingLabel={config.translations.remainingLabel}
+                <SubscriptionActions
+                    isPremium={config.isPremium}
+                    manageButtonLabel={config.translations.manageButton}
+                    upgradeButtonLabel={config.translations.upgradeButton}
+                    onManage={config.onManageSubscription}
+                    onUpgrade={config.onUpgrade}
                 />
-            )}
+            </ScrollView>
 
-            <SubscriptionActions
-                isPremium={config.isPremium}
-                manageButtonLabel={config.translations.manageButton}
-                upgradeButtonLabel={config.translations.upgradeButton}
-                onManage={config.onManageSubscription}
-                onUpgrade={config.onUpgrade}
-            />
-        </ScrollView>
+            {config.devTools && (
+                <DevTestSection
+                    actions={config.devTools.actions}
+                    title={config.devTools.title}
+                />
+            )}
+        </View>
     );
 };
 

package/src/presentation/screens/components/DevTestSection.tsx

@@ -0,0 +1,121 @@
+/**
+ * Dev Test Section
+ * Developer testing tools for subscription renewals
+ * Only visible in __DEV__ mode
+ */
+
+import React from "react";
+import { View, TouchableOpacity, StyleSheet } from "react-native";
+import { AtomicText, useAppDesignTokens } from "@umituz/react-native-design-system";
+
+export interface DevTestActions {
+  onTestRenewal: () => Promise<void>;
+  onCheckCredits: () => void;
+  onTestDuplicate: () => Promise<void>;
+}
+
+export interface DevTestSectionProps {
+  actions: DevTestActions;
+  title?: string;
+}
+
+export const DevTestSection: React.FC<DevTestSectionProps> = ({
+  actions,
+  title = "🧪 Developer Testing",
+}) => {
+  const tokens = useAppDesignTokens();
+
+  if (!__DEV__) {
+    return null;
+  }
+
+  return (
+    <View
+      style={[
+        styles.container,
+        {
+          backgroundColor: tokens.colors.surfaceSecondary,
+          borderTopColor: tokens.colors.border,
+        },
+      ]}
+    >
+      <AtomicText
+        type="titleMedium"
+        style={[styles.title, { color: tokens.colors.textPrimary }]}
+      >
+        {title}
+      </AtomicText>
+
+      <TouchableOpacity
+        style={[styles.button, { backgroundColor: tokens.colors.primary }]}
+        onPress={actions.onTestRenewal}
+      >
+        <AtomicText
+          type="bodyMedium"
+          style={[styles.buttonText, { color: tokens.colors.onPrimary }]}
+        >
+          ⚡ Test Auto-Renewal (Add Credits)
+        </AtomicText>
+      </TouchableOpacity>
+
+      <TouchableOpacity
+        style={[
+          styles.button,
+          {
+            backgroundColor: tokens.colors.surfaceSecondary,
+            borderWidth: 1,
+            borderColor: tokens.colors.border,
+          },
+        ]}
+        onPress={actions.onCheckCredits}
+      >
+        <AtomicText
+          type="bodyMedium"
+          style={[styles.buttonText, { color: tokens.colors.textPrimary }]}
+        >
+          📊 Check Current Credits
+        </AtomicText>
+      </TouchableOpacity>
+
+      <TouchableOpacity
+        style={[
+          styles.button,
+          {
+            backgroundColor: tokens.colors.surfaceSecondary,
+            borderWidth: 1,
+            borderColor: tokens.colors.border,
+          },
+        ]}
+        onPress={actions.onTestDuplicate}
+      >
+        <AtomicText
+          type="bodyMedium"
+          style={[styles.buttonText, { color: tokens.colors.textPrimary }]}
+        >
+          🔒 Test Duplicate Protection
+        </AtomicText>
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    padding: 16,
+    gap: 12,
+    borderTopWidth: 1,
+  },
+  title: {
+    fontWeight: "600",
+    marginBottom: 4,
+  },
+  button: {
+    paddingVertical: 12,
+    paddingHorizontal: 16,
+    borderRadius: 8,
+    alignItems: "center",
+  },
+  buttonText: {
+    fontWeight: "500",
+  },
+});