@umituz/react-native-subscription 2.38.2 → 2.38.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-subscription",
-  "version": "2.38.2",
+  "version": "2.38.4",
   "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/feedback/FeedbackTextInput.tsx

@@ -23,6 +23,7 @@ export const FeedbackTextInput: React.FC<FeedbackTextInputProps> = ({ placeholde
             borderRadius: tokens.borderRadius.sm,
             padding: tokens.spacing.sm,
             color: tokens.colors.textPrimary,
+            borderColor: tokens.colors.border,
             minHeight: FEEDBACK_INPUT_MIN_HEIGHT,
             textAlignVertical: "top",
           },

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

@@ -7,8 +7,9 @@ import { usePaywallFeedback } from "../../../../../presentation/hooks/feedback/u
 import { createPaywallFeedbackStyles } from "./paywallFeedbackStyles";
 import { FeedbackOption } from "./FeedbackOption";
 import type { PaywallFeedbackTranslations, PaywallFeedbackModalProps } from "./PaywallFeedbackModal.types";
+import type { PaywallFeedbackScreenProps } from "./PaywallFeedbackScreen.types";
 
-export type { PaywallFeedbackTranslations, PaywallFeedbackModalProps };
+export type { PaywallFeedbackTranslations, PaywallFeedbackModalProps, PaywallFeedbackScreenProps };
 
 const FEEDBACK_OPTION_IDS = [
     "too_expensive",

package/src/domains/subscription/presentation/components/feedback/PaywallFeedbackModal.types.ts

@@ -16,5 +16,6 @@ export interface PaywallFeedbackModalProps {
     translations: PaywallFeedbackTranslations;
     visible: boolean;
     onClose: () => void;
-    onSubmit: (reason: string) => void;
+    onSubmit: (data: { reason: string; otherText?: string }) => void;
 }
+

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

@@ -0,0 +1,193 @@
+/**
+ * Paywall Feedback Screen Component
+ *
+ * Full-screen feedback form (not modal). Use when you want the feedback
+ * form to be a standalone screen instead of a modal overlay.
+ * Collects user feedback after they decline the paywall.
+ */
+
+import React, { useMemo, useCallback } from "react";
+import { View, ScrollView, TouchableOpacity, StyleSheet, Linking } from "react-native";
+import { AtomicText, AtomicIcon } from "@umituz/react-native-design-system/atoms";
+import { useSafeAreaInsets } from "@umituz/react-native-design-system/safe-area";
+import { useAppDesignTokens } from "@umituz/react-native-design-system/theme";
+import { usePaywallFeedback } from "../../../../../presentation/hooks/feedback/usePaywallFeedback";
+import { FeedbackOption } from "./FeedbackOption";
+import type { PaywallFeedbackScreenProps } from "./PaywallFeedbackScreen.types";
+
+const FEEDBACK_OPTION_IDS = [
+    "too_expensive",
+    "no_need",
+    "trying_out",
+    "technical_issues",
+    "other",
+] as const;
+
+export const PaywallFeedbackScreen: React.FC<PaywallFeedbackScreenProps> = React.memo(({
+    translations,
+    onClose,
+    onSubmit,
+}) => {
+    const tokens = useAppDesignTokens();
+    const insets = useSafeAreaInsets();
+
+    const {
+        selectedReason,
+        otherText,
+        setOtherText,
+        selectReason,
+        handleSubmit,
+        handleSkip,
+        canSubmit,
+    } = usePaywallFeedback({ onSubmit, onClose });
+
+    const screenStyles = useMemo(() => createScreenStyles(tokens, insets), [tokens, insets]);
+
+    const handleSkipPress = useCallback(() => {
+        handleSkip();
+    }, [handleSkip]);
+
+    return (
+        <View style={[screenStyles.container, { backgroundColor: tokens.colors.backgroundPrimary }]}>
+            {/* Close button */}
+            <TouchableOpacity
+                onPress={handleSkipPress}
+                style={[screenStyles.closeBtn, { backgroundColor: tokens.colors.surfaceSecondary, top: Math.max(insets.top, 12) }]}
+                hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
+            >
+                <AtomicIcon name="close-outline" size="md" customColor={tokens.colors.textPrimary} />
+            </TouchableOpacity>
+
+            {/* Scrollable content */}
+            <ScrollView
+                style={screenStyles.scrollContainer}
+                contentContainerStyle={screenStyles.scrollContent}
+                showsVerticalScrollIndicator={false}
+            >
+                {/* Header */}
+                <View style={screenStyles.header}>
+                    <AtomicText
+                        type="headlineMedium"
+                        style={[screenStyles.title, { color: tokens.colors.textPrimary }]}
+                    >
+                        {translations.title}
+                    </AtomicText>
+                    {translations.subtitle && (
+                        <AtomicText
+                            type="bodyMedium"
+                            style={[screenStyles.subtitle, { color: tokens.colors.textSecondary }]}
+                        >
+                            {translations.subtitle}
+                        </AtomicText>
+                    )}
+                </View>
+
+                {/* Feedback options */}
+                <View style={screenStyles.optionsContainer}>
+                    {FEEDBACK_OPTION_IDS.map((optionId) => {
+                        const isSelected = selectedReason === optionId;
+                        const isOther = optionId === "other";
+                        const showInput = isSelected && isOther;
+
+                        return (
+                            <FeedbackOption
+                                key={optionId}
+                                isSelected={isSelected}
+                                text={translations.reasons[optionId]}
+                                showInput={showInput}
+                                placeholder={translations.otherPlaceholder}
+                                inputValue={otherText}
+                                onSelect={() => selectReason(optionId)}
+                                onChangeText={setOtherText}
+                            />
+                        );
+                    })}
+                </View>
+            </ScrollView>
+
+            {/* Sticky footer - Submit button */}
+            <View style={[screenStyles.footer, { paddingBottom: Math.max(insets.bottom, 16) }]}>
+                <TouchableOpacity
+                    style={[
+                        screenStyles.submitButton,
+                        {
+                            backgroundColor: canSubmit ? tokens.colors.primary : tokens.colors.surfaceVariant,
+                            opacity: canSubmit ? 1 : 0.6,
+                        }
+                    ]}
+                    onPress={handleSubmit}
+                    disabled={!canSubmit}
+                    activeOpacity={0.8}
+                >
+                    <AtomicText
+                        type="titleLarge"
+                        style={[
+                            screenStyles.submitText,
+                            { color: canSubmit ? tokens.colors.onPrimary : tokens.colors.textDisabled }
+                        ]}
+                    >
+                        {translations.submit}
+                    </AtomicText>
+                </TouchableOpacity>
+            </View>
+        </View>
+    );
+});
+
+PaywallFeedbackScreen.displayName = "PaywallFeedbackScreen";
+
+const createScreenStyles = (tokens: any, insets: any) => ({
+    container: {
+        flex: 1,
+    },
+    closeBtn: {
+        position: 'absolute' as const,
+        top: 12,
+        right: 12,
+        width: 36,
+        height: 36,
+        borderRadius: 18,
+        zIndex: 1000,
+        justifyContent: 'center' as const,
+        alignItems: 'center' as const,
+    },
+    scrollContainer: {
+        flex: 1,
+    },
+    scrollContent: {
+        paddingTop: 60,
+        paddingBottom: 100,
+    },
+    header: {
+        paddingHorizontal: tokens.spacing.xl,
+        marginBottom: tokens.spacing.xl,
+    },
+    title: {
+        marginBottom: tokens.spacing.sm,
+    },
+    subtitle: {
+        lineHeight: 22,
+    },
+    optionsContainer: {
+        paddingHorizontal: tokens.spacing.xl,
+    },
+    footer: {
+        position: 'absolute' as const,
+        bottom: 0,
+        left: 0,
+        right: 0,
+        paddingHorizontal: tokens.spacing.xl,
+        paddingTop: tokens.spacing.md,
+        backgroundColor: tokens.colors.backgroundPrimary,
+        borderTopWidth: 1,
+        borderTopColor: tokens.colors.border,
+    },
+    submitButton: {
+        borderRadius: 14,
+        paddingVertical: 16,
+        alignItems: 'center' as const,
+    },
+    submitText: {
+        fontWeight: 600,
+    },
+});

package/src/domains/subscription/presentation/components/feedback/PaywallFeedbackScreen.types.ts

@@ -0,0 +1,7 @@
+import type { PaywallFeedbackTranslations } from "./PaywallFeedbackModal.types";
+
+export interface PaywallFeedbackScreenProps {
+  onClose: () => void;
+  onSubmit: (data: { reason: string; otherText?: string }) => void | Promise<void>;
+  translations: PaywallFeedbackTranslations;
+}

package/src/index.ts

@@ -53,6 +53,7 @@ export { PremiumStatusBadge } from "./domains/subscription/presentation/componen
 export type { PremiumStatusBadgeProps } from "./domains/subscription/presentation/components/details/PremiumStatusBadge.types";
 export * from "./domains/subscription/presentation/components/sections/SubscriptionSection";
 export * from "./domains/subscription/presentation/components/feedback/PaywallFeedbackModal";
+export * from "./domains/subscription/presentation/components/feedback/PaywallFeedbackScreen";
 export * from "./domains/subscription/presentation/screens/SubscriptionDetailScreen";
 export type {
   SubscriptionDetailConfig,

package/src/presentation/hooks/feedback/usePaywallFeedback.ts

@@ -1,7 +1,7 @@
 import { useState, useCallback } from "react";
 
 interface UsePaywallFeedbackProps {
-    onSubmit: (reason: string) => void;
+    onSubmit: (data: { reason: string; otherText?: string }) => void;
     onClose: () => void;
 }
 
@@ -15,12 +15,10 @@ export const usePaywallFeedback = ({
     const handleSubmit = useCallback(() => {
         if (!selectedReason) return;
 
-        const finalReason =
-            selectedReason === "other" && otherText.trim().length > 0
-                ? `other: ${otherText.trim()}`
-                : selectedReason;
-
-        onSubmit(finalReason);
+        onSubmit({
+            reason: selectedReason,
+            otherText: selectedReason === "other" ? otherText.trim() : undefined,
+        });
         setSelectedReason(null);
         setOtherText("");
         onClose();