@umituz/react-native-subscription 2.12.2 → 2.12.3

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/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",
-    },
-  });

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

@@ -1,161 +0,0 @@
-/**
- * Credits Package Card Component
- * Selectable card for credit packages
- */
-
-import React from "react";
-import { View, StyleSheet, TouchableOpacity } from "react-native";
-import {
-  AtomicText,
-  AtomicIcon,
-  AtomicBadge,
-  useAppDesignTokens,
-} from "@umituz/react-native-design-system";
-import type { CreditsPackage } from "../../../domain/entities/paywall/CreditsPackage";
-
-interface CreditsPackageCardProps {
-  package: CreditsPackage;
-  isSelected: boolean;
-  onSelect: () => void;
-}
-
-export const CreditsPackageCard: React.FC<CreditsPackageCardProps> = React.memo(
-  ({ package: pkg, isSelected, onSelect }) => {
-    const tokens = useAppDesignTokens();
-    const totalCredits = pkg.credits + (pkg.bonus || 0);
-
-    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,
-            },
-          ]}
-        >
-          {pkg.badge && (
-            <View style={styles.badgeContainer}>
-              <AtomicBadge text={pkg.badge} variant="warning" size="sm" />
-            </View>
-          )}
-
-          <View style={styles.content}>
-            <View style={styles.leftSection}>
-              <View style={styles.creditsRow}>
-                <AtomicIcon
-                  name="flash"
-                  size="md"
-                  color={isSelected ? "primary" : "secondary"}
-                />
-                <AtomicText
-                  type="headlineSmall"
-                  style={[
-                    styles.credits,
-                    { color: isSelected ? tokens.colors.primary : tokens.colors.textPrimary },
-                  ]}
-                >
-                  {totalCredits.toLocaleString()}
-                </AtomicText>
-              </View>
-
-              {(pkg.bonus ?? 0) > 0 && (
-                <View style={styles.bonusContainer}>
-                  <AtomicIcon name="gift-outline" size="sm" color="success" />
-                  <AtomicText
-                    type="bodySmall"
-                    style={[styles.bonus, { color: tokens.colors.success }]}
-                  >
-                    +{pkg.bonus}
-                  </AtomicText>
-                </View>
-              )}
-
-              {pkg.description && (
-                <AtomicText
-                  type="bodySmall"
-                  style={{ color: tokens.colors.textSecondary }}
-                >
-                  {pkg.description}
-                </AtomicText>
-              )}
-            </View>
-
-            <View style={styles.rightSection}>
-              <AtomicText
-                type="titleLarge"
-                style={[
-                  styles.price,
-                  { color: isSelected ? tokens.colors.primary : tokens.colors.textPrimary },
-                ]}
-              >
-                {pkg.currency}{pkg.price.toFixed(2)}
-              </AtomicText>
-              {isSelected && (
-                <AtomicIcon name="checkmark-circle" size="md" color="primary" />
-              )}
-            </View>
-          </View>
-        </View>
-      </TouchableOpacity>
-    );
-  }
-);
-
-CreditsPackageCard.displayName = "CreditsPackageCard";
-
-const styles = StyleSheet.create({
-  touchable: {
-    marginBottom: 12,
-  },
-  container: {
-    borderRadius: 16,
-    padding: 16,
-    position: "relative",
-  },
-  badgeContainer: {
-    position: "absolute",
-    top: -10,
-    right: 16,
-  },
-  content: {
-    flexDirection: "row",
-    justifyContent: "space-between",
-    alignItems: "center",
-  },
-  leftSection: {
-    flex: 1,
-    marginRight: 16,
-  },
-  creditsRow: {
-    flexDirection: "row",
-    alignItems: "center",
-    marginBottom: 4,
-  },
-  credits: {
-    fontWeight: "700",
-    marginLeft: 8,
-  },
-  bonusContainer: {
-    flexDirection: "row",
-    alignItems: "center",
-    marginBottom: 4,
-  },
-  bonus: {
-    fontWeight: "600",
-    marginLeft: 4,
-  },
-  rightSection: {
-    alignItems: "flex-end",
-  },
-  price: {
-    fontWeight: "700",
-    marginBottom: 4,
-  },
-});