@umituz/react-native-subscription 2.27.146 → 2.27.147

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-subscription",
-  "version": "2.27.146",
+  "version": "2.27.147",
   "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/details/PremiumDetailsCard.constants.ts

@@ -0,0 +1 @@
+export const DAYS_REMAINING_WARNING_THRESHOLD = 7;

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

@@ -1,17 +1,13 @@
-/**
- * Premium Details Card
- * Generic component for displaying subscription details
- * Accepts credits via props for app-specific customization
- */
-
 import React from "react";
-import { View, TouchableOpacity } from "react-native";
+import { View } from "react-native";
 import { useAppDesignTokens, AtomicText } from "@umituz/react-native-design-system";
-import { PremiumStatusBadge } from "./PremiumStatusBadge";
 import { DetailRow } from "./DetailRow";
 import { CreditRow } from "./CreditRow";
 import { styles } from "./PremiumDetailsCard.styles";
 import type { PremiumDetailsCardProps } from "./PremiumDetailsCardTypes";
+import { PremiumDetailsCardHeader } from "./PremiumDetailsCardHeader";
+import { PremiumDetailsCardActions } from "./PremiumDetailsCardActions";
+import { shouldHighlightExpiration } from "./premiumDetailsHelpers";
 
 export type { CreditInfo, PremiumDetailsTranslations, PremiumDetailsCardProps } from "./PremiumDetailsCardTypes";
 
@@ -32,60 +28,26 @@ export const PremiumDetailsCard: React.FC<PremiumDetailsCardProps> = ({
 
   return (
     <View style={[styles.card, { backgroundColor: tokens.colors.surface }]}>
-      {(isPremium || showCredits) && (
-        <View style={styles.header}>
-          <View style={styles.headerTitleContainer}>
-            <AtomicText type="titleLarge" style={{ color: tokens.colors.textPrimary }}>
-              {translations.title}
-            </AtomicText>
-          </View>
-          <PremiumStatusBadge
-            status={statusType}
-            activeLabel={translations.statusActive}
-            expiredLabel={translations.statusExpired}
-            noneLabel={translations.statusInactive}
-            canceledLabel={translations.statusCanceled}
-          />
-        </View>
-      )}
+      {(isPremium || showCredits) && <PremiumDetailsCardHeader statusType={statusType} translations={translations} />}
 
 
       {isPremium && (
         <View style={styles.detailsSection}>
           {isLifetime && translations.lifetimeLabel ? (
-            <DetailRow
-              label={translations.statusLabel}
-              value={translations.lifetimeLabel}
-            />
+            <DetailRow label={translations.statusLabel} value={translations.lifetimeLabel} />
           ) : (
             <>
               {expirationDate && (
-                <DetailRow
-                  label={translations.expiresLabel}
-                  value={expirationDate}
-                  highlight={
-                    daysRemaining !== null &&
-                    daysRemaining !== undefined &&
-                    daysRemaining > 0 &&
-                    daysRemaining <= 7
-                  }
-                />
-              )}
-              {purchaseDate && (
-                <DetailRow
-                  label={translations.purchasedLabel}
-                  value={purchaseDate}
-                />
+                <DetailRow label={translations.expiresLabel} value={expirationDate} highlight={shouldHighlightExpiration(daysRemaining)} />
               )}
+              {purchaseDate && <DetailRow label={translations.purchasedLabel} value={purchaseDate} />}
             </>
           )}
         </View>
       )}
 
       {showCredits && (
-        <View
-          style={[styles.creditsSection, { borderTopColor: tokens.colors.border }]}
-        >
+        <View style={[styles.creditsSection, { borderTopColor: tokens.colors.border }]}>
           {translations.creditsTitle && (
             <AtomicText type="labelMedium" style={[styles.sectionTitle, { color: tokens.colors.textPrimary }]}>
               {translations.creditsTitle}
@@ -103,34 +65,12 @@ export const PremiumDetailsCard: React.FC<PremiumDetailsCardProps> = ({
         </View>
       )}
 
-      <View style={styles.actionsSection}>
-        {isPremium && onManageSubscription && translations.manageButton && (
-          <TouchableOpacity
-            style={[
-              styles.secondaryButton,
-              { backgroundColor: tokens.colors.surfaceSecondary },
-            ]}
-            onPress={onManageSubscription}
-          >
-            <AtomicText type="labelLarge" style={{ color: tokens.colors.textPrimary }}>
-              {translations.manageButton}
-            </AtomicText>
-          </TouchableOpacity>
-        )}
-        {!isPremium && onUpgrade && translations.upgradeButton && (
-          <TouchableOpacity
-            style={[styles.premiumButton, { backgroundColor: tokens.colors.primary }]}
-            onPress={onUpgrade}
-          >
-            <AtomicText
-              type="titleMedium"
-              style={{ color: tokens.colors.onPrimary, fontWeight: "700" }}
-            >
-              {translations.upgradeButton}
-            </AtomicText>
-          </TouchableOpacity>
-        )}
-      </View>
+      <PremiumDetailsCardActions
+        isPremium={isPremium}
+        onManageSubscription={onManageSubscription}
+        onUpgrade={onUpgrade}
+        translations={translations}
+      />
     </View>
   );
 };

package/src/domains/subscription/presentation/components/details/PremiumDetailsCardActions.tsx

@@ -0,0 +1,46 @@
+import React from "react";
+import { View, TouchableOpacity } from "react-native";
+import { useAppDesignTokens, AtomicText } from "@umituz/react-native-design-system";
+import { styles } from "./PremiumDetailsCard.styles";
+import type { PremiumDetailsTranslations } from "./PremiumDetailsCardTypes";
+
+interface PremiumDetailsCardActionsProps {
+  isPremium: boolean;
+  onManageSubscription?: () => void;
+  onUpgrade?: () => void;
+  translations: PremiumDetailsTranslations;
+}
+
+export const PremiumDetailsCardActions: React.FC<PremiumDetailsCardActionsProps> = ({
+  isPremium,
+  onManageSubscription,
+  onUpgrade,
+  translations,
+}) => {
+  const tokens = useAppDesignTokens();
+
+  return (
+    <View style={styles.actionsSection}>
+      {isPremium && onManageSubscription && translations.manageButton && (
+        <TouchableOpacity
+          style={[styles.secondaryButton, { backgroundColor: tokens.colors.surfaceSecondary }]}
+          onPress={onManageSubscription}
+        >
+          <AtomicText type="labelLarge" style={{ color: tokens.colors.textPrimary }}>
+            {translations.manageButton}
+          </AtomicText>
+        </TouchableOpacity>
+      )}
+      {!isPremium && onUpgrade && translations.upgradeButton && (
+        <TouchableOpacity
+          style={[styles.premiumButton, { backgroundColor: tokens.colors.primary }]}
+          onPress={onUpgrade}
+        >
+          <AtomicText type="titleMedium" style={{ color: tokens.colors.onPrimary, fontWeight: "700" }}>
+            {translations.upgradeButton}
+          </AtomicText>
+        </TouchableOpacity>
+      )}
+    </View>
+  );
+};

package/src/domains/subscription/presentation/components/details/PremiumDetailsCardHeader.tsx

@@ -0,0 +1,32 @@
+import React from "react";
+import { View } from "react-native";
+import { useAppDesignTokens, AtomicText } from "@umituz/react-native-design-system";
+import { PremiumStatusBadge } from "./PremiumStatusBadge";
+import { styles } from "./PremiumDetailsCard.styles";
+import type { PremiumDetailsTranslations } from "./PremiumDetailsCardTypes";
+
+interface PremiumDetailsCardHeaderProps {
+  statusType: "active" | "expired" | "none" | "canceled";
+  translations: PremiumDetailsTranslations;
+}
+
+export const PremiumDetailsCardHeader: React.FC<PremiumDetailsCardHeaderProps> = ({ statusType, translations }) => {
+  const tokens = useAppDesignTokens();
+
+  return (
+    <View style={styles.header}>
+      <View style={styles.headerTitleContainer}>
+        <AtomicText type="titleLarge" style={{ color: tokens.colors.textPrimary }}>
+          {translations.title}
+        </AtomicText>
+      </View>
+      <PremiumStatusBadge
+        status={statusType}
+        activeLabel={translations.statusActive}
+        expiredLabel={translations.statusExpired}
+        noneLabel={translations.statusInactive}
+        canceledLabel={translations.statusCanceled}
+      />
+    </View>
+  );
+};

package/src/domains/subscription/presentation/components/details/premiumDetailsHelpers.ts

@@ -0,0 +1,5 @@
+import { DAYS_REMAINING_WARNING_THRESHOLD } from "./PremiumDetailsCard.constants";
+
+export const shouldHighlightExpiration = (daysRemaining: number | null | undefined): boolean => {
+  return daysRemaining !== null && daysRemaining !== undefined && daysRemaining > 0 && daysRemaining <= DAYS_REMAINING_WARNING_THRESHOLD;
+};

package/src/domains/subscription/presentation/components/feedback/FeedbackOption.styles.ts

@@ -0,0 +1,34 @@
+import { StyleSheet } from "react-native";
+
+export const feedbackOptionStyles = StyleSheet.create({
+  optionRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+  },
+  optionText: {
+    flex: 1,
+    marginRight: 12,
+  },
+  radioButton: {
+    width: 22,
+    height: 22,
+    borderRadius: 11,
+    borderWidth: 2,
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  radioButtonInner: {
+    width: 12,
+    height: 12,
+    borderRadius: 6,
+  },
+  inputContainer: {
+    padding: 12,
+  },
+  textInput: {
+    fontSize: 15,
+    borderWidth: 1,
+    borderColor: "#ccc",
+  },
+});

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

@@ -1,21 +1,13 @@
-/**
- * Feedback Option Component
- * Single feedback option with radio button and optional text input
- */
-
 import React from "react";
-import { View, TouchableOpacity, TextInput, StyleSheet } from "react-native";
+import { View, TouchableOpacity } from "react-native";
 import { AtomicText, useAppDesignTokens } from "@umituz/react-native-design-system";
+import type { FeedbackOptionProps } from "./FeedbackOption.types";
+import { feedbackOptionStyles } from "./FeedbackOption.styles";
+import { FEEDBACK_OPTION_OPACITY } from "./feedbackOptionConstants";
+import { FeedbackRadioButton } from "./FeedbackRadioButton";
+import { FeedbackTextInput } from "./FeedbackTextInput";
 
-interface FeedbackOptionProps {
-  isSelected: boolean;
-  text: string;
-  showInput: boolean;
-  placeholder: string;
-  inputValue: string;
-  onSelect: () => void;
-  onChangeText: (text: string) => void;
-}
+export type { FeedbackOptionProps } from "./FeedbackOption.types";
 
 export const FeedbackOption: React.FC<FeedbackOptionProps> = React.memo(({
   isSelected,
@@ -39,7 +31,7 @@ export const FeedbackOption: React.FC<FeedbackOptionProps> = React.memo(({
     <View style={containerStyle}>
       <TouchableOpacity
         style={[
-          styles.optionRow,
+          feedbackOptionStyles.optionRow,
           {
             borderBottomWidth: showInput ? 1 : 0,
             borderBottomColor: tokens.colors.border,
@@ -48,92 +40,21 @@ export const FeedbackOption: React.FC<FeedbackOptionProps> = React.memo(({
           },
         ]}
         onPress={onSelect}
-        activeOpacity={0.7}
+        activeOpacity={FEEDBACK_OPTION_OPACITY}
       >
         <AtomicText
           type="bodyMedium"
-          style={[
-            styles.optionText,
-            isSelected && { color: tokens.colors.primary, fontWeight: "600" },
-          ]}
+          style={[feedbackOptionStyles.optionText, isSelected && { color: tokens.colors.primary, fontWeight: "600" }]}
         >
           {text}
         </AtomicText>
 
-        <View
-          style={[
-            styles.radioButton,
-            {
-              borderColor: isSelected ? tokens.colors.primary : tokens.colors.border,
-              backgroundColor: isSelected ? tokens.colors.primary : "transparent",
-            },
-          ]}
-        >
-          {isSelected && (
-            <View style={[styles.radioButtonInner, { backgroundColor: tokens.colors.primary }]} />
-          )}
-        </View>
+        <FeedbackRadioButton isSelected={isSelected} />
       </TouchableOpacity>
 
-      {showInput && (
-        <View style={styles.inputContainer}>
-          <TextInput
-            style={[
-              styles.textInput,
-              {
-                backgroundColor: tokens.colors.surface,
-                borderRadius: tokens.borderRadius.sm,
-                padding: tokens.spacing.sm,
-                color: tokens.colors.textPrimary,
-                minHeight: 80,
-                textAlignVertical: "top",
-              },
-            ]}
-            placeholder={placeholder}
-            placeholderTextColor={tokens.colors.textTertiary}
-            multiline
-            maxLength={200}
-            value={inputValue}
-            onChangeText={onChangeText}
-            autoFocus
-          />
-        </View>
-      )}
+      {showInput && <FeedbackTextInput placeholder={placeholder} value={inputValue} onChangeText={onChangeText} />}
     </View>
   );
 });
 
 FeedbackOption.displayName = "FeedbackOption";
-
-const styles = StyleSheet.create({
-  optionRow: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-between",
-  },
-  optionText: {
-    flex: 1,
-    marginRight: 12,
-  },
-  radioButton: {
-    width: 22,
-    height: 22,
-    borderRadius: 11,
-    borderWidth: 2,
-    justifyContent: "center",
-    alignItems: "center",
-  },
-  radioButtonInner: {
-    width: 12,
-    height: 12,
-    borderRadius: 6,
-  },
-  inputContainer: {
-    padding: 12,
-  },
-  textInput: {
-    fontSize: 15,
-    borderWidth: 1,
-    borderColor: "#ccc",
-  },
-});

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

@@ -0,0 +1,9 @@
+export interface FeedbackOptionProps {
+  isSelected: boolean;
+  text: string;
+  showInput: boolean;
+  placeholder: string;
+  inputValue: string;
+  onSelect: () => void;
+  onChangeText: (text: string) => void;
+}

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

@@ -0,0 +1,28 @@
+import React from "react";
+import { View } from "react-native";
+import { useAppDesignTokens } from "@umituz/react-native-design-system";
+import { feedbackOptionStyles } from "./FeedbackOption.styles";
+
+interface FeedbackRadioButtonProps {
+  isSelected: boolean;
+}
+
+export const FeedbackRadioButton: React.FC<FeedbackRadioButtonProps> = ({ isSelected }) => {
+  const tokens = useAppDesignTokens();
+
+  return (
+    <View
+      style={[
+        feedbackOptionStyles.radioButton,
+        {
+          borderColor: isSelected ? tokens.colors.primary : tokens.colors.border,
+          backgroundColor: isSelected ? tokens.colors.primary : "transparent",
+        },
+      ]}
+    >
+      {isSelected && (
+        <View style={[feedbackOptionStyles.radioButtonInner, { backgroundColor: tokens.colors.primary }]} />
+      )}
+    </View>
+  );
+};

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

@@ -0,0 +1,40 @@
+import React from "react";
+import { View, TextInput } from "react-native";
+import { useAppDesignTokens } from "@umituz/react-native-design-system";
+import { feedbackOptionStyles } from "./FeedbackOption.styles";
+import { FEEDBACK_INPUT_MAX_LENGTH, FEEDBACK_INPUT_MIN_HEIGHT } from "./feedbackOptionConstants";
+
+interface FeedbackTextInputProps {
+  placeholder: string;
+  value: string;
+  onChangeText: (text: string) => void;
+}
+
+export const FeedbackTextInput: React.FC<FeedbackTextInputProps> = ({ placeholder, value, onChangeText }) => {
+  const tokens = useAppDesignTokens();
+
+  return (
+    <View style={feedbackOptionStyles.inputContainer}>
+      <TextInput
+        style={[
+          feedbackOptionStyles.textInput,
+          {
+            backgroundColor: tokens.colors.surface,
+            borderRadius: tokens.borderRadius.sm,
+            padding: tokens.spacing.sm,
+            color: tokens.colors.textPrimary,
+            minHeight: FEEDBACK_INPUT_MIN_HEIGHT,
+            textAlignVertical: "top",
+          },
+        ]}
+        placeholder={placeholder}
+        placeholderTextColor={tokens.colors.textTertiary}
+        multiline
+        maxLength={FEEDBACK_INPUT_MAX_LENGTH}
+        value={value}
+        onChangeText={onChangeText}
+        autoFocus
+      />
+    </View>
+  );
+};

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

@@ -0,0 +1,3 @@
+export const FEEDBACK_INPUT_MAX_LENGTH = 200;
+export const FEEDBACK_INPUT_MIN_HEIGHT = 80;
+export const FEEDBACK_OPTION_OPACITY = 0.7;