@umituz/react-native-subscription 2.12.15 → 2.12.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-subscription",
-  "version": "2.12.15",
+  "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/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",
+  },
+});