@umituz/react-native-subscription 2.43.19 → 2.43.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-subscription",
-  "version": "2.43.19",
+  "version": "2.43.21",
   "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/subscription/presentation/components/ManagedSubscriptionFlow.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useCallback } from "react";
 import type { NavigationProp } from "@react-navigation/native";
 import type { ImageSourcePropType } from "react-native";
 import { SplashScreen, useSplashFlow } from "@umituz/react-native-design-system/molecules";
@@ -99,9 +99,26 @@ const ManagedSubscriptionFlowInner = React.memo<ManagedSubscriptionFlowProps>(({
   // Hooks for paywall (called at component level, not inside conditional render)
   const { isPremium, isSyncing, credits } = usePremiumStatus();
   const { packages } = usePremiumPackages();
-  const { purchasePackage, restorePurchase } = usePremiumActions();
+  const { purchasePackage: originalPurchasePackage, restorePurchase } = usePremiumActions();
   const { closePostOnboardingPaywall } = useSubscriptionFlowStore();
 
+  // Track if purchase was successful to avoid showing feedback
+  const [purchaseSuccessful, setPurchaseSuccessful] = useState(false);
+
+  // Wrap purchasePackage to track success
+  const purchasePackage = useCallback(async (pkgId: string) => {
+    const result = await originalPurchasePackage(pkgId);
+    if (result?.success) {
+      setPurchaseSuccessful(true);
+    }
+    return result;
+  }, [originalPurchasePackage]);
+
+  // Wrap onClose to pass purchase status
+  const handleClose = useCallback(() => {
+    closePostOnboardingPaywall({ purchased: purchaseSuccessful });
+  }, [closePostOnboardingPaywall, purchaseSuccessful]);
+
   const [isNavReady, setIsNavReady] = useState(false);
 
   // Mark navigation tree as ready after splash and localization
@@ -208,7 +225,7 @@ const ManagedSubscriptionFlowInner = React.memo<ManagedSubscriptionFlowProps>(({
         isSyncing={isSyncing}
         onPurchase={purchasePackage}
         onRestore={restorePurchase}
-        onClose={closePostOnboardingPaywall}
+        onClose={handleClose}
       />
     );
   }

package/src/domains/subscription/presentation/components/feedback/FeedbackOption.styles.ts

@@ -11,24 +11,24 @@ export const feedbackOptionStyles = StyleSheet.create({
     marginRight: 12,
   },
   radioButton: {
-    width: 22,
-    height: 22,
-    borderRadius: 11,
-    borderWidth: 2,
+    width: 26,
+    height: 26,
+    borderRadius: 13,
+    borderWidth: 2.5,
     justifyContent: "center",
     alignItems: "center",
   },
   radioButtonInner: {
-    width: 12,
-    height: 12,
-    borderRadius: 6,
+    width: 14,
+    height: 14,
+    borderRadius: 7,
   },
   inputContainer: {
     padding: 12,
   },
   textInput: {
-    fontSize: 15,
-    borderWidth: 1,
-    borderColor: "#ccc",
+    fontSize: 16,
+    borderWidth: 1.5,
+    lineHeight: 22,
   },
 });

package/src/domains/subscription/presentation/components/feedback/FeedbackOption.tsx

@@ -20,10 +20,11 @@ export const FeedbackOption: React.FC<FeedbackOptionProps> = React.memo(({
   const tokens = useAppDesignTokens();
 
   const containerStyle = {
-    marginBottom: tokens.spacing.sm,
     backgroundColor: tokens.colors.surfaceSecondary,
     borderRadius: tokens.borderRadius.md,
     overflow: "hidden" as const,
+    borderWidth: 1,
+    borderColor: isSelected ? tokens.colors.primary : "transparent",
   };
 
   return (

package/src/domains/subscription/presentation/components/feedback/PaywallFeedbackScreen.tsx

@@ -141,21 +141,22 @@ PaywallFeedbackScreen.displayName = "PaywallFeedbackScreen";
 
 const createScreenStyles = (
     tokens: {
-        colors: { backgroundPrimary: string; border: string };
-        spacing: { xl: number; sm: number; md: number };
+        colors: { backgroundPrimary: string; border: string; onPrimary: string; textDisabled: string; surfaceSecondary: string; primary: string };
+        spacing: { xl: number; sm: number; md: number; lg: number };
     },
     _insets: { top: number; bottom: number }
 ) => ({
     container: {
         flex: 1,
+        opacity: 1,
     },
     closeBtn: {
         position: 'absolute' as const,
         top: 12,
         right: 12,
-        width: 36,
-        height: 36,
-        borderRadius: 18,
+        width: 40,
+        height: 40,
+        borderRadius: 20,
         zIndex: 1000,
         justifyContent: 'center' as const,
         alignItems: 'center' as const,
@@ -164,21 +165,22 @@ const createScreenStyles = (
         flex: 1,
     },
     scrollContent: {
-        paddingTop: 60,
-        paddingBottom: 100,
+        paddingTop: 80,
+        paddingBottom: 120,
     },
     header: {
         paddingHorizontal: tokens.spacing.xl,
-        marginBottom: tokens.spacing.xl,
+        marginBottom: tokens.spacing.xl + 8,
     },
     title: {
-        marginBottom: tokens.spacing.sm,
+        marginBottom: tokens.spacing.md + 4,
     },
     subtitle: {
-        lineHeight: 22,
+        lineHeight: 24,
     },
     optionsContainer: {
         paddingHorizontal: tokens.spacing.xl,
+        gap: tokens.spacing.md,
     },
     footer: {
         position: 'absolute' as const,
@@ -186,17 +188,26 @@ const createScreenStyles = (
         left: 0,
         right: 0,
         paddingHorizontal: tokens.spacing.xl,
-        paddingTop: tokens.spacing.md,
+        paddingTop: tokens.spacing.lg,
+        paddingBottom: tokens.spacing.lg,
         backgroundColor: tokens.colors.backgroundPrimary,
         borderTopWidth: 1,
         borderTopColor: tokens.colors.border,
+        opacity: 1,
     },
     submitButton: {
-        borderRadius: 14,
-        paddingVertical: 16,
+        borderRadius: 16,
+        paddingVertical: 18,
         alignItems: 'center' as const,
+        shadowColor: "#000",
+        shadowOffset: { width: 0, height: 2 },
+        shadowOpacity: 0.1,
+        shadowRadius: 4,
+        elevation: 3,
     },
     submitText: {
-        fontWeight: "600" as const,
+        fontWeight: "700" as const,
+        fontSize: 17,
+        letterSpacing: 0.3,
     },
 });

package/src/domains/subscription/presentation/useSubscriptionFlow.ts

@@ -36,7 +36,7 @@ export interface SubscriptionFlowState {
 
 export interface SubscriptionFlowActions {
   completeOnboarding: () => Promise<void>;
-  closePostOnboardingPaywall: () => Promise<void>;
+  closePostOnboardingPaywall: (params?: { purchased: boolean }) => Promise<void>;
   closeFeedback: () => void;
   setAuthModalOpen: (open: boolean) => void;
   markPaywallShown: () => Promise<void>;
@@ -79,14 +79,18 @@ export const useSubscriptionFlowStore = createStore<SubscriptionFlowState, Subsc
       });
       subscriptionEventBus.emit(FLOW_EVENTS.ONBOARDING_COMPLETED, { timestamp: Date.now() });
     },
-    closePostOnboardingPaywall: async () => {
+    closePostOnboardingPaywall: async (params?: { purchased: boolean }) => {
+      const purchased = params?.purchased ?? false;
       set({
         showPostOnboardingPaywall: false,
         paywallShown: true,
         status: SubscriptionFlowStatus.READY,
-        showFeedback: true, // Show feedback screen when paywall is closed
+        showFeedback: !purchased, // Only show feedback if NOT purchased
+      });
+      subscriptionEventBus.emit(FLOW_EVENTS.PAYWALL_CLOSED, {
+        timestamp: Date.now(),
+        purchased
       });
-      subscriptionEventBus.emit(FLOW_EVENTS.PAYWALL_CLOSED, { timestamp: Date.now() });
     },
     closeFeedback: () => set({ showFeedback: false }),
     setAuthModalOpen: (open: boolean) => set({ isAuthModalOpen: open }),