@umituz/react-native-subscription 2.38.4 → 2.39.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-subscription",
-  "version": "2.38.4",
+  "version": "2.39.1",
   "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.styles.ts

@@ -0,0 +1,57 @@
+import { StyleSheet } from "react-native";
+
+export const paywallScreenStyles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  heroContainer: {
+    alignItems: "center",
+    marginBottom: 24,
+  },
+  heroImage: {
+    width: 120,
+    height: 120,
+    borderRadius: 60,
+  },
+  header: {
+    paddingHorizontal: 24,
+    marginBottom: 24,
+  },
+  title: {
+    marginBottom: 8,
+  },
+  subtitle: {
+    lineHeight: 22,
+  },
+  plans: {
+    paddingHorizontal: 16,
+    marginBottom: 16,
+  },
+  loading: {
+    alignItems: "center",
+    paddingVertical: 32,
+  },
+  loadingText: {
+    marginTop: 12,
+  },
+  stickyFooter: {
+    position: "absolute",
+    bottom: 0,
+    left: 0,
+    right: 0,
+    paddingHorizontal: 16,
+    paddingTop: 12,
+    backgroundColor: "#000",
+  },
+  cta: {
+    borderRadius: 14,
+    paddingVertical: 16,
+    alignItems: "center",
+  },
+  ctaDisabled: {
+    opacity: 0.6,
+  },
+  ctaText: {
+    fontWeight: "600",
+  },
+});

package/src/domains/paywall/components/PaywallScreen.tsx

@@ -12,7 +12,7 @@ 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 { paywallScreenStyles as styles } from "./PaywallScreen.styles";
 import { PaywallFeatures } from "./PaywallFeatures";
 import { PaywallFooter } from "./PaywallFooter";
 import { usePaywallActions } from "../hooks/usePaywallActions";

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

@@ -7,13 +7,16 @@
  */
 
 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 { PaywallFeedbackScreenProps, PaywallFeedbackTranslations } from "./PaywallFeedbackScreen.types";
+
+// Re-export types for convenience
+export type { PaywallFeedbackTranslations, PaywallFeedbackScreenProps };
 
 const FEEDBACK_OPTION_IDS = [
     "too_expensive",
@@ -188,6 +191,6 @@ const createScreenStyles = (tokens: any, insets: any) => ({
         alignItems: 'center' as const,
     },
     submitText: {
-        fontWeight: 600,
+        fontWeight: "600",
     },
 });

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

@@ -1,4 +1,16 @@
-import type { PaywallFeedbackTranslations } from "./PaywallFeedbackModal.types";
+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 PaywallFeedbackScreenProps {
   onClose: () => void;

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/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,92 +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";
-import type { PaywallFeedbackScreenProps } from "./PaywallFeedbackScreen.types";
-
-export type { PaywallFeedbackTranslations, PaywallFeedbackModalProps, PaywallFeedbackScreenProps };
-
-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,21 +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: (data: { reason: string; otherText?: 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",
-        },
-    });
-};