@umituz/react-native-subscription 2.38.3 → 2.39.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-subscription",
-  "version": "2.38.3",
+  "version": "2.39.0",
   "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/PaywallFeedbackScreen.tsx

@@ -7,13 +7,17 @@
  */
 
 import React, { useMemo, useCallback } from "react";
-import { View, ScrollView, TouchableOpacity, StyleSheet, Linking } from "react-native";
+import { View, ScrollView, TouchableOpacity, StyleSheet } 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";
+import type { PaywallFeedbackTranslations } from "./PaywallFeedbackModal.types";
+
+// Re-export translations type for convenience
+export type { PaywallFeedbackTranslations, PaywallFeedbackScreenProps };
 
 const FEEDBACK_OPTION_IDS = [
     "too_expensive",
@@ -188,6 +192,6 @@ const createScreenStyles = (tokens: any, insets: any) => ({
         alignItems: 'center' as const,
     },
     submitText: {
-        fontWeight: "600",
+        fontWeight: 600,
     },
 });

package/src/index.ts

@@ -52,7 +52,6 @@ export * from "./domains/subscription/presentation/components/details/PremiumDet
 export { PremiumStatusBadge } from "./domains/subscription/presentation/components/details/PremiumStatusBadge";
 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 {

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();

package/src/domains/paywall/components/PaywallModal.styles.ts

@@ -1,48 +0,0 @@
-import { StyleSheet } from "react-native";
-
-
-export const paywallModalStyles = StyleSheet.create({
-    modalContent: { padding: 0, borderWidth: 0, overflow: "hidden" },
-    container: { flex: 1, flexDirection: "column" as const },
-    scrollContainer: { flex: 1, flexShrink: 1 },
-    closeBtn: {
-        position: "absolute",
-        top: 12,
-        right: 12,
-        width: 32,
-        height: 32,
-        borderRadius: 16,
-        justifyContent: "center",
-        alignItems: "center",
-        zIndex: 10,
-    },
-    scroll: { flexGrow: 1, padding: 16, paddingTop: 16, paddingBottom: 32 },
-    heroContainer: { alignItems: "center", marginBottom: 20, marginTop: 32 },
-    heroImage: { width: 180, height: 180, borderRadius: 90 },
-    header: { alignItems: "center", marginBottom: 12 },
-    title: { fontWeight: "700", textAlign: "center", marginBottom: 4 },
-    subtitle: { textAlign: "center" },
-    features: { borderRadius: 12, padding: 12, marginBottom: 12, gap: 8 },
-    featureRow: { flexDirection: "row", alignItems: "center" },
-    featureIcon: {
-        width: 32,
-        height: 32,
-        borderRadius: 16,
-        justifyContent: "center",
-        alignItems: "center",
-        marginRight: 8,
-    },
-    featureText: { flex: 1, fontWeight: "500" },
-    loading: { alignItems: "center", paddingVertical: 24 },
-    loadingText: { marginTop: 8 },
-    plans: { marginBottom: 12 },
-    stickyFooter: { flexShrink: 0, paddingHorizontal: 16, paddingTop: 12, borderTopWidth: StyleSheet.hairlineWidth, borderTopColor: "rgba(128,128,128,0.2)" },
-    cta: { borderRadius: 12, paddingVertical: 14, alignItems: "center", marginBottom: 12 },
-    ctaDisabled: { opacity: 0.5 },
-    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/domains/paywall/components/PaywallModal.tsx

@@ -1,111 +0,0 @@
-import React, { useCallback, useEffect } from "react";
-import { View, ScrollView, TouchableOpacity, Linking } from "react-native";
-import { AtomicText, AtomicIcon, AtomicSpinner } from "@umituz/react-native-design-system/atoms";
-import { BaseModal } from "@umituz/react-native-design-system/molecules";
-import { useSafeAreaInsets } from "@umituz/react-native-design-system/safe-area";
-import { useAppDesignTokens } from "@umituz/react-native-design-system/theme";
-import { Image } from "expo-image";
-import { PlanCard } from "./PlanCard";
-import { paywallModalStyles as styles } from "./PaywallModal.styles";
-import { PaywallFeatures } from "./PaywallFeatures";
-import { PaywallFooter } from "./PaywallFooter";
-import { usePaywallActions } from "../hooks/usePaywallActions";
-import { PaywallModalProps } from "./PaywallModal.types";
-
-export const PaywallModal: React.FC<PaywallModalProps> = React.memo((props) => {
-  const { visible, onClose, translations, packages = [], features = [], legalUrls = {}, bestValueIdentifier, creditAmounts, creditsLabel, heroImage, onPurchase, onRestore, onPurchaseSuccess, onPurchaseError, onAuthRequired, source, isLoadingPackages } = props;
-  const tokens = useAppDesignTokens();
-  const insets = useSafeAreaInsets();
-
-  if (__DEV__) {
-    console.log("[PaywallModal] Render:", {
-      visible,
-      packagesCount: packages.length,
-      isLoadingPackages,
-      source,
-    });
-  }
-
-  const { selectedPlanId, setSelectedPlanId, isProcessing, handlePurchase, handleRestore, resetState } = usePaywallActions({
-    packages,
-    onPurchase,
-    onRestore,
-    source,
-    onPurchaseSuccess,
-    onPurchaseError,
-    onAuthRequired,
-    onClose
-  });
-
-  useEffect(() => {
-    if (!visible) resetState();
-  }, [visible, resetState]);
-
-  // Auto-select first package when packages load and none is selected
-  useEffect(() => {
-    if (packages.length > 0 && !selectedPlanId) {
-      setSelectedPlanId(packages[0].product.identifier);
-    }
-  }, [packages, selectedPlanId, setSelectedPlanId]);
-
-  const handleLegalUrl = useCallback(async (url: string | undefined) => {
-    if (!url) return;
-    try {
-      if (await Linking.canOpenURL(url)) await Linking.openURL(url);
-    } catch (error) {
-      console.error('[PaywallModal] Failed to open URL:', error instanceof Error ? error.message : String(error));
-    }
-  }, []);
-
-
-  return (
-    <BaseModal visible={visible} onClose={onClose} contentStyle={styles.modalContent}>
-      <View style={[styles.container, { backgroundColor: tokens.colors.surface }]}>
-        <TouchableOpacity onPress={onClose} style={[styles.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 — plan cards scroll, CTA is always pinned below */}
-        <ScrollView style={styles.scrollContainer} contentContainerStyle={styles.scroll} showsVerticalScrollIndicator={false}>
-          {heroImage && <View style={styles.heroContainer}><Image source={heroImage} style={styles.heroImage} contentFit="cover" transition={0} /></View>}
-          <View style={styles.header}>
-            <AtomicText type="headlineMedium" adjustsFontSizeToFit numberOfLines={2} minimumFontScale={0.75} style={[styles.title, { color: tokens.colors.textPrimary }]}>{translations.title}</AtomicText>
-            {translations.subtitle && <AtomicText type="bodyMedium" adjustsFontSizeToFit numberOfLines={3} minimumFontScale={0.8} style={[styles.subtitle, { color: tokens.colors.textSecondary }]}>{translations.subtitle}</AtomicText>}
-          </View>
-          <PaywallFeatures features={features} />
-          <View style={styles.plans}>
-            {isLoadingPackages ? (
-              <View style={styles.loading}>
-                <AtomicSpinner size="md" />
-                {translations.processingText && (
-                  <AtomicText type="bodySmall" style={[styles.loadingText, { color: tokens.colors.textSecondary }]}>{translations.processingText}</AtomicText>
-                )}
-              </View>
-            ) : packages.length === 0 ? (
-              <View style={styles.loading}>
-                <AtomicText type="bodyMedium" style={{ color: tokens.colors.textSecondary, textAlign: "center" }}>{translations.emptyText ?? "No packages available"}</AtomicText>
-              </View>
-            ) : (
-              packages.map((pkg) => {
-                const pid = pkg.product.identifier;
-                return (
-                  <PlanCard key={pid} pkg={pkg} isSelected={selectedPlanId === pid} onSelect={() => setSelectedPlanId(pid)} badge={pid === bestValueIdentifier ? translations.bestValueBadgeText : undefined} creditAmount={creditAmounts?.[pid]} creditsLabel={creditsLabel} />
-                );
-              })
-            )}
-          </View>
-        </ScrollView>
-
-        {/* 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>
-      </View>
-    </BaseModal>
-  );
-});
-
-PaywallModal.displayName = "PaywallModal";

package/src/domains/paywall/components/PaywallModal.types.ts

@@ -1,24 +0,0 @@
-import type { ImageSourcePropType } from "react-native";
-import type { PurchasesPackage } from "react-native-purchases";
-import type { SubscriptionFeature, PaywallTranslations, PaywallLegalUrls } from "../entities/types";
-import type { PurchaseSource } from "../../subscription/core/SubscriptionConstants";
-
-export interface PaywallModalProps {
-  visible: boolean;
-  onClose: () => void;
-  translations: PaywallTranslations;
-  packages?: PurchasesPackage[];
-  features?: SubscriptionFeature[];
-  legalUrls?: PaywallLegalUrls;
-  bestValueIdentifier?: string;
-  creditAmounts?: Record<string, number>;
-  creditsLabel?: string;
-  heroImage?: ImageSourcePropType;
-  onPurchase?: (pkg: PurchasesPackage) => Promise<void | boolean>;
-  onRestore?: () => Promise<void | boolean>;
-  onPurchaseSuccess?: () => void;
-  onPurchaseError?: (error: Error | string) => void;
-  onAuthRequired?: () => void;
-  source?: PurchaseSource;
-  isLoadingPackages?: boolean;
-}

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

@@ -1,91 +0,0 @@
-import React, { useMemo } from "react";
-import { View, TouchableOpacity } from "react-native";
-import { AtomicText } from "@umituz/react-native-design-system/atoms";
-import { BaseModal } from "@umituz/react-native-design-system/molecules";
-import { useAppDesignTokens } from "@umituz/react-native-design-system/theme";
-import { usePaywallFeedback } from "../../../../../presentation/hooks/feedback/usePaywallFeedback";
-import { createPaywallFeedbackStyles } from "./paywallFeedbackStyles";
-import { FeedbackOption } from "./FeedbackOption";
-import type { PaywallFeedbackTranslations, PaywallFeedbackModalProps } from "./PaywallFeedbackModal.types";
-
-export type { PaywallFeedbackTranslations, PaywallFeedbackModalProps };
-
-const FEEDBACK_OPTION_IDS = [
-    "too_expensive",
-    "no_need",
-    "trying_out",
-    "technical_issues",
-    "other",
-] as const;
-
-export const PaywallFeedbackModal: React.FC<PaywallFeedbackModalProps> = React.memo(({
-    translations,
-    visible,
-    onClose,
-    onSubmit,
-}) => {
-    const tokens = useAppDesignTokens();
-
-    const {
-        selectedReason,
-        otherText,
-        setOtherText,
-        selectReason,
-        handleSubmit,
-        handleSkip,
-        canSubmit,
-    } = usePaywallFeedback({ onSubmit, onClose });
-
-    const styles = useMemo(
-        () => createPaywallFeedbackStyles(tokens, canSubmit),
-        [tokens, canSubmit],
-    );
-
-    return (
-        <BaseModal
-            visible={visible}
-            onClose={handleSkip}
-            title={translations.title}
-            subtitle={translations.subtitle}
-        >
-            <View style={{ paddingHorizontal: tokens.spacing.md, paddingBottom: tokens.spacing.lg }}>
-                <View style={[styles.optionsContainer, { backgroundColor: 'transparent', padding: 0 }]}>
-                    {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>
-
-                <TouchableOpacity
-                    style={[styles.submitButton, { marginTop: tokens.spacing.lg }]}
-                    onPress={handleSubmit}
-                    disabled={!canSubmit}
-                    activeOpacity={0.8}
-                >
-                    <AtomicText type="labelLarge" style={styles.submitText}>
-                        {translations.submit}
-                    </AtomicText>
-                </TouchableOpacity>
-            </View>
-        </BaseModal>
-    );
-});
-
-PaywallFeedbackModal.displayName = "PaywallFeedbackModal";
-
-
-

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

@@ -1,20 +0,0 @@
-export interface PaywallFeedbackTranslations {
-    title: string;
-    subtitle: string;
-    submit: string;
-    otherPlaceholder: string;
-    reasons: {
-        too_expensive: string;
-        no_need: string;
-        trying_out: string;
-        technical_issues: string;
-        other: string;
-    };
-}
-
-export interface PaywallFeedbackModalProps {
-    translations: PaywallFeedbackTranslations;
-    visible: boolean;
-    onClose: () => void;
-    onSubmit: (reason: string) => void;
-}

package/src/domains/subscription/presentation/components/feedback/paywallFeedbackStyles.ts

@@ -1,27 +0,0 @@
-import { StyleSheet } from "react-native";
-import type { DesignTokens } from "@umituz/react-native-design-system/theme";
-
-export const createPaywallFeedbackStyles = (
-    tokens: DesignTokens,
-    canSubmit: boolean
-) => {
-    return StyleSheet.create({
-        optionsContainer: {
-            backgroundColor: tokens.colors.surfaceSecondary,
-            borderRadius: 16,
-            overflow: "hidden",
-            marginBottom: 20,
-        },
-        submitButton: {
-            backgroundColor: canSubmit ? tokens.colors.primary : tokens.colors.surfaceSecondary,
-            borderRadius: 14,
-            paddingVertical: 16,
-            alignItems: "center",
-            opacity: canSubmit ? 1 : 0.6,
-        },
-        submitText: {
-            color: canSubmit ? tokens.colors.onPrimary : tokens.colors.textDisabled,
-            fontWeight: "600",
-        },
-    });
-};