@umituz/react-native-subscription 2.12.2 → 2.12.4

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

@@ -0,0 +1,102 @@
+/**
+ * Paywall Tab Bar
+ * Segmented control for hybrid mode
+ */
+
+import React from "react";
+import { View, TouchableOpacity, StyleSheet, Animated } from "react-native";
+import { AtomicText, useAppDesignTokens } from "@umituz/react-native-design-system";
+import type { PaywallTabType } from "../entities";
+
+interface PaywallTabBarProps {
+    activeTab: PaywallTabType;
+    onTabChange: (tab: PaywallTabType) => void;
+    creditsLabel: string;
+    subscriptionLabel: string;
+}
+
+export const PaywallTabBar: React.FC<PaywallTabBarProps> = React.memo(
+    ({ activeTab, onTabChange, creditsLabel, subscriptionLabel }) => {
+        const tokens = useAppDesignTokens();
+        const animatedValue = React.useRef(
+            new Animated.Value(activeTab === "credits" ? 0 : 1)
+        ).current;
+
+        React.useEffect(() => {
+            Animated.spring(animatedValue, {
+                toValue: activeTab === "credits" ? 0 : 1,
+                useNativeDriver: false,
+                tension: 68,
+                friction: 12,
+            }).start();
+        }, [activeTab, animatedValue]);
+
+        const renderTab = (tab: PaywallTabType, label: string) => {
+            const isActive = activeTab === tab;
+
+            return (
+                <TouchableOpacity
+                    key={tab}
+                    style={styles.tab}
+                    onPress={() => onTabChange(tab)}
+                    activeOpacity={0.7}
+                >
+                    <AtomicText
+                        type="labelLarge"
+                        style={[
+                            styles.tabText,
+                            { color: isActive ? tokens.colors.primary : tokens.colors.textSecondary },
+                        ]}
+                    >
+                        {label}
+                    </AtomicText>
+                </TouchableOpacity>
+            );
+        };
+
+        const indicatorLeft = animatedValue.interpolate({
+            inputRange: [0, 1],
+            outputRange: ["2%", "50%"],
+        });
+
+        return (
+            <View style={[styles.container, { backgroundColor: tokens.colors.surfaceSecondary }]}>
+                <Animated.View
+                    style={[styles.indicator, { backgroundColor: tokens.colors.surface, left: indicatorLeft }]}
+                />
+                {renderTab("credits", creditsLabel)}
+                {renderTab("subscription", subscriptionLabel)}
+            </View>
+        );
+    }
+);
+
+PaywallTabBar.displayName = "PaywallTabBar";
+
+const styles = StyleSheet.create({
+    container: {
+        flexDirection: "row",
+        borderRadius: 12,
+        padding: 4,
+        marginHorizontal: 24,
+        marginBottom: 16,
+        position: "relative",
+        height: 44,
+    },
+    indicator: {
+        position: "absolute",
+        top: 4,
+        bottom: 4,
+        width: "46%",
+        borderRadius: 8,
+    },
+    tab: {
+        flex: 1,
+        alignItems: "center",
+        justifyContent: "center",
+        zIndex: 1,
+    },
+    tabText: {
+        fontWeight: "600",
+    },
+});

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

@@ -0,0 +1,124 @@
+/**
+ * Plan Card
+ * Subscription plan selection card
+ */
+
+import React from "react";
+import { View, TouchableOpacity, StyleSheet } from "react-native";
+import { AtomicText, AtomicIcon, AtomicBadge, useAppDesignTokens } from "@umituz/react-native-design-system";
+import type { PurchasesPackage } from "react-native-purchases";
+
+interface PlanCardProps {
+    pkg: PurchasesPackage;
+    isSelected: boolean;
+    onSelect: () => void;
+    badge?: string;
+    creditAmount?: number;
+    creditsLabel?: string;
+}
+
+export const PlanCard: React.FC<PlanCardProps> = React.memo(
+    ({ pkg, isSelected, onSelect, badge, creditAmount, creditsLabel }) => {
+        const tokens = useAppDesignTokens();
+        const title = pkg.product.title;
+        const price = `${pkg.product.currencyCode} ${pkg.product.price.toFixed(2)}`;
+
+        return (
+            <TouchableOpacity onPress={onSelect} activeOpacity={0.7} style={styles.touchable}>
+                <View
+                    style={[
+                        styles.container,
+                        {
+                            backgroundColor: tokens.colors.surface,
+                            borderColor: isSelected ? tokens.colors.primary : tokens.colors.border,
+                            borderWidth: isSelected ? 2 : 1,
+                        },
+                    ]}
+                >
+                    {badge && (
+                        <View style={styles.badgeContainer}>
+                            <AtomicBadge text={badge} variant="primary" size="sm" />
+                        </View>
+                    )}
+
+                    <View style={styles.content}>
+                        <View style={styles.leftSection}>
+                            <View
+                                style={[
+                                    styles.radio,
+                                    {
+                                        borderColor: isSelected ? tokens.colors.primary : tokens.colors.border,
+                                        backgroundColor: isSelected ? tokens.colors.primary : "transparent",
+                                    },
+                                ]}
+                            >
+                                {isSelected && (
+                                    <AtomicIcon name="checkmark" customSize={12} customColor={tokens.colors.onPrimary} />
+                                )}
+                            </View>
+
+                            <View style={styles.textSection}>
+                                <AtomicText type="titleSmall" style={{ color: tokens.colors.textPrimary, fontWeight: "600" }}>
+                                    {title}
+                                </AtomicText>
+                                {creditAmount && creditsLabel && (
+                                    <AtomicText type="bodySmall" style={{ color: tokens.colors.textSecondary }}>
+                                        {creditAmount} {creditsLabel}
+                                    </AtomicText>
+                                )}
+                            </View>
+                        </View>
+
+                        <AtomicText
+                            type="titleMedium"
+                            style={{ color: isSelected ? tokens.colors.primary : tokens.colors.textPrimary, fontWeight: "700" }}
+                        >
+                            {price}
+                        </AtomicText>
+                    </View>
+                </View>
+            </TouchableOpacity>
+        );
+    }
+);
+
+PlanCard.displayName = "PlanCard";
+
+const styles = StyleSheet.create({
+    touchable: {
+        marginBottom: 10,
+        marginHorizontal: 24,
+    },
+    container: {
+        borderRadius: 16,
+        padding: 16,
+        position: "relative",
+    },
+    badgeContainer: {
+        position: "absolute",
+        top: -10,
+        right: 16,
+    },
+    content: {
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: "space-between",
+    },
+    leftSection: {
+        flexDirection: "row",
+        alignItems: "center",
+        flex: 1,
+    },
+    radio: {
+        width: 22,
+        height: 22,
+        borderRadius: 11,
+        borderWidth: 2,
+        alignItems: "center",
+        justifyContent: "center",
+        marginRight: 12,
+    },
+    textSection: {
+        flex: 1,
+    },
+});

package/src/domains/paywall/components/index.ts

@@ -0,0 +1,14 @@
+/**
+ * Paywall Components Index
+ */
+
+export { PaywallModal } from "./PaywallModal";
+export type { PaywallModalProps } from "./PaywallModal";
+
+export { PaywallHeader } from "./PaywallHeader";
+export { PaywallTabBar } from "./PaywallTabBar";
+export { PaywallFooter } from "./PaywallFooter";
+export { FeatureList } from "./FeatureList";
+export { FeatureItem } from "./FeatureItem";
+export { PlanCard } from "./PlanCard";
+export { CreditCard } from "./CreditCard";

package/src/domains/paywall/entities/index.ts

@@ -0,0 +1,5 @@
+/**
+ * Paywall Entities Index
+ */
+
+export * from "./types";

package/src/domains/paywall/entities/types.ts

@@ -0,0 +1,48 @@
+/**
+ * Paywall Types
+ * All paywall-related type definitions
+ */
+
+export type PaywallMode = "subscription" | "credits" | "hybrid";
+
+export type PaywallTabType = "credits" | "subscription";
+
+export interface PaywallTab {
+    id: PaywallTabType;
+    label: string;
+}
+
+export interface CreditsPackage {
+    id: string;
+    credits: number;
+    price: number;
+    currency: string;
+    bonus?: number;
+    badge?: string;
+    description?: string;
+}
+
+export interface SubscriptionFeature {
+    icon: string;
+    text: string;
+}
+
+export interface PaywallTranslations {
+    title: string;
+    subtitle?: string;
+    creditsTabLabel?: string;
+    subscriptionTabLabel?: string;
+    purchaseButtonText: string;
+    subscribeButtonText?: string;
+    restoreButtonText: string;
+    loadingText: string;
+    emptyText: string;
+    processingText: string;
+    privacyText?: string;
+    termsOfServiceText?: string;
+}
+
+export interface PaywallLegalUrls {
+    privacyUrl?: string;
+    termsUrl?: string;
+}

package/src/domains/paywall/hooks/index.ts

@@ -0,0 +1,6 @@
+/**
+ * Paywall Hooks Index
+ */
+
+export { usePaywall } from "./usePaywall";
+export { useSubscriptionModal } from "./useSubscriptionModal";

package/src/{presentation → domains/paywall}/hooks/usePaywall.ts

@@ -1,6 +1,6 @@
 import { useState, useCallback } from "react";
 import type { PurchasesPackage } from "react-native-purchases";
-import type { PaywallTabType } from "../../domain/entities/paywall/PaywallTab";
+import type { PaywallTabType } from "../entities";
 
 interface UsePaywallProps {
     initialTab?: PaywallTabType;

package/src/domains/paywall/index.ts

@@ -0,0 +1,13 @@
+/**
+ * Paywall Domain
+ * Complete paywall solution for subscription and credits
+ */
+
+// Entities
+export * from "./entities";
+
+// Components
+export * from "./components";
+
+// Hooks
+export * from "./hooks";

package/src/index.ts

@@ -60,35 +60,28 @@ export {
 } from "./presentation/hooks/useUserTierWithRepository";
 
 // =============================================================================
-// PRESENTATION LAYER - Paywall Components
+// PAYWALL DOMAIN
 // =============================================================================
 
-export {
-  SubscriptionModal,
-  type SubscriptionModalProps,
-} from "./presentation/components/paywall/SubscriptionModal";
-
-export { SubscriptionModalHeader } from "./presentation/components/paywall/SubscriptionModalHeader";
-
-export { SubscriptionPlanCard } from "./presentation/components/paywall/SubscriptionPlanCard";
-export {
-  AccordionPlanCard,
-  PlanCardHeader,
-  PlanCardDetails,
-  type AccordionPlanCardProps,
-  type PlanCardHeaderProps,
-  type PlanCardDetailsProps,
-} from "./presentation/components/paywall/accordion";
-export { PaywallFeaturesList } from "./presentation/components/paywall/PaywallFeaturesList";
-export { PaywallFeatureItem } from "./presentation/components/paywall/PaywallFeatureItem";
-export { PaywallLegalFooter } from "./presentation/components/paywall/PaywallLegalFooter";
 export {
   PaywallModal,
   type PaywallModalProps,
+  PaywallHeader,
+  PaywallTabBar,
+  PaywallFooter,
+  FeatureList,
+  FeatureItem,
+  PlanCard,
+  CreditCard,
+  usePaywall,
+  useSubscriptionModal,
+  type PaywallMode,
+  type PaywallTabType,
+  type CreditsPackage,
+  type SubscriptionFeature,
   type PaywallTranslations,
   type PaywallLegalUrls,
-} from "./presentation/components/paywall/PaywallModal";
-export type { PaywallMode } from "./domain/entities/paywall/PaywallMode";
+} from "./domains/paywall";
 
 // =============================================================================
 // PRESENTATION LAYER - Premium Details Components

package/src/presentation/components/details/PremiumDetailsCard.tsx

@@ -31,17 +31,30 @@ export const PremiumDetailsCard: React.FC<PremiumDetailsCardProps> = ({
 
   return (
     <View style={[styles.card, { backgroundColor: tokens.colors.surface }]}>
-      <View style={styles.header}>
-        <Text style={[styles.title, { color: tokens.colors.text }]}>
-          {translations.title}
-        </Text>
-        <PremiumStatusBadge
-          status={statusType}
-          activeLabel={translations.statusActive}
-          expiredLabel={translations.statusExpired}
-          noneLabel={translations.statusFree}
-        />
-      </View>
+      {(isPremium || showCredits) && (
+        <View style={styles.header}>
+          <Text style={[styles.title, { color: tokens.colors.text }]}>
+            {translations.title}
+          </Text>
+          <PremiumStatusBadge
+            status={statusType}
+            activeLabel={translations.statusActive}
+            expiredLabel={translations.statusExpired}
+            noneLabel={translations.statusFree}
+          />
+        </View>
+      )}
+
+      {!isPremium && !showCredits && (
+        <View style={styles.freeUserHeader}>
+          <Text style={[styles.freeUserTitle, { color: tokens.colors.text }]}>
+            {translations.title}
+          </Text>
+          <Text style={[styles.freeUserDescription, { color: tokens.colors.textSecondary }]}>
+            {translations.upgradeButton ? `${translations.upgradeButton}` : "Unlock premium features"}
+          </Text>
+        </View>
+      )}
 
       {isPremium && (
         <View style={styles.detailsSection}>
@@ -141,6 +154,17 @@ const styles = StyleSheet.create({
     fontSize: 18,
     fontWeight: "600",
   },
+  freeUserHeader: {
+    gap: 4,
+  },
+  freeUserTitle: {
+    fontSize: 18,
+    fontWeight: "600",
+  },
+  freeUserDescription: {
+    fontSize: 14,
+    fontWeight: "400",
+  },
   detailsSection: {
     gap: 8,
   },

package/src/domain/entities/paywall/CreditsPackage.ts

@@ -1,16 +0,0 @@
-/**
- * Credits Package Entity
- * Represents a credit package for purchase
- */
-
-export interface CreditsPackage {
-  id: string;
-  credits: number;
-  price: number;
-  priceString?: string;
-  currency: string;
-  bonus?: number;
-  popular?: boolean;
-  badge?: string;
-  description?: string;
-}

package/src/domain/entities/paywall/PaywallMode.ts

@@ -1,6 +0,0 @@
-/**
- * Paywall Mode Entity
- * Defines paywall display modes
- */
-
-export type PaywallMode = "subscription" | "credits" | "hybrid";

package/src/domain/entities/paywall/PaywallTab.ts

@@ -1,11 +0,0 @@
-/**
- * Paywall Tab Entity
- * Represents paywall tab types
- */
-
-export type PaywallTabType = "credits" | "subscription";
-
-export interface PaywallTab {
-  id: PaywallTabType;
-  label: string;
-}

package/src/domain/entities/paywall/SubscriptionPlan.ts

@@ -1,27 +0,0 @@
-/**
- * Subscription Plan Entity
- * Represents a subscription plan for purchase
- */
-
-export interface SubscriptionPlan {
-  /** Plan ID */
-  id: string;
-
-  /** Plan type */
-  type: "monthly" | "yearly";
-
-  /** Price */
-  price: number;
-
-  /** Currency code */
-  currency: string;
-
-  /** Whether this is the best value option */
-  isBestValue?: boolean;
-
-  /** Optional discount percentage */
-  discountPercentage?: number;
-
-  /** Optional features list */
-  features?: string[];
-}

package/src/presentation/components/paywall/BestValueBadge.tsx

@@ -1,59 +0,0 @@
-import React, { useMemo } from "react";
-import { View, StyleSheet } from "react-native";
-import { AtomicText, useAppDesignTokens, useResponsive } from "@umituz/react-native-design-system";
-import { LinearGradient } from "expo-linear-gradient";
-
-interface BestValueBadgeProps {
-  text: string;
-  visible?: boolean;
-}
-
-export const BestValueBadge: React.FC<BestValueBadgeProps> = React.memo(
-  ({ text, visible = true }) => {
-    const tokens = useAppDesignTokens();
-    const { spacingMultiplier, getFontSize } = useResponsive();
-
-    const styles = useMemo(() => createStyles(spacingMultiplier), [spacingMultiplier]);
-    const fontSize = getFontSize(10);
-
-    if (!visible) return null;
-
-    return (
-      <View style={styles.badgeContainer}>
-        <LinearGradient
-          colors={[tokens.colors.secondary, tokens.colors.primary]}
-          start={{ x: 0, y: 0 }}
-          end={{ x: 1, y: 1 }}
-          style={styles.badge}
-        >
-          <AtomicText
-            type="labelSmall"
-            style={{ color: tokens.colors.onPrimary, fontWeight: "800", textTransform: "uppercase", fontSize }}
-          >
-            {text}
-          </AtomicText>
-        </LinearGradient>
-      </View>
-    );
-  }
-);
-
-BestValueBadge.displayName = "BestValueBadge";
-
-const createStyles = (spacingMult: number) =>
-  StyleSheet.create({
-    badgeContainer: {
-      position: "absolute",
-      top: -12 * spacingMult,
-      right: 16 * spacingMult,
-      zIndex: 1,
-      alignSelf: "flex-end",
-    },
-    badge: {
-      paddingHorizontal: 16 * spacingMult,
-      paddingVertical: 6 * spacingMult,
-      borderRadius: 16 * spacingMult,
-      alignItems: "center",
-      justifyContent: "center",
-    },
-  });