@umituz/react-native-subscription 2.38.1 → 2.38.3

package/package.json

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

@@ -160,29 +160,38 @@ export const PaywallScreen: React.FC<PaywallScreenProps> = React.memo((props) =>
               return (
                 <PlanCard
                   key={pid}
-                  package={pkg}
-                  selected={isSelected}
-                  isBestValue={isBestValue}
-                  credits={credits}
+                  pkg={pkg}
+                  isSelected={isSelected}
+                  badge={isBestValue ? translations.bestValueBadgeText : undefined}
+                  creditAmount={credits}
                   creditsLabel={creditsLabel}
-                  onPress={() => setSelectedPlanId(pid)}
+                  onSelect={() => setSelectedPlanId(pid)}
                 />
               );
             })
           )}
         </View>
 
-        {/* Footer - CTA and Legal */}
-        <PaywallFooter
-          selectedPlanId={selectedPlanId}
-          packages={packages}
-          isProcessing={isProcessing}
-          onPurchase={handlePurchase}
-          onRestore={handleRestore}
-          legalUrls={legalUrls}
-          translations={translations}
-          onLegalUrl={handleLegalUrl}
-        />
+        {/* Sticky footer — always visible, never hidden behind scroll content */}
+        <View style={[styles.stickyFooter, { paddingBottom: Math.max(insets.bottom, 16) }]}>
+          <TouchableOpacity
+            onPress={handlePurchase}
+            disabled={isProcessing || isLoadingPackages || !selectedPlanId}
+            style={[styles.cta, { backgroundColor: tokens.colors.primary }, (isProcessing || isLoadingPackages || !selectedPlanId) && styles.ctaDisabled]}
+            activeOpacity={0.75}
+          >
+            <AtomicText type="titleLarge" style={[styles.ctaText, { color: tokens.colors.onPrimary }]}>
+              {isProcessing ? translations.processingText : translations.purchaseButtonText}
+            </AtomicText>
+          </TouchableOpacity>
+          <PaywallFooter
+            translations={translations}
+            legalUrls={legalUrls}
+            isProcessing={isProcessing}
+            onRestore={onRestore ? handleRestore : undefined}
+            onLegalClick={handleLegalUrl}
+          />
+        </View>
       </ScrollView>
     </View>
   );

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/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,