@umituz/react-native-subscription 2.22.5 → 2.22.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-subscription",
-  "version": "2.22.5",
+  "version": "2.22.7",
   "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/presentation/hooks/useSubscriptionSettingsConfig.ts

@@ -129,6 +129,15 @@ export const useSubscriptionSettingsConfig = (
 
   const creditsArray = useCreditsArray(credits, dynamicCreditLimit, translations);
 
+  // Centralized display flags - single source of truth for UI visibility
+  const hasCredits = creditsArray.length > 0;
+  const display = useMemo(() => ({
+    showHeader: isPremium || hasCredits,
+    showCredits: hasCredits,
+    showUpgradePrompt: !isPremium && !hasCredits && !!upgradePrompt,
+    showExpirationDate: isPremium && !!expiresAtIso,
+  }), [isPremium, hasCredits, upgradePrompt, expiresAtIso]);
+
   // Build config
   const config = useMemo(
     (): SubscriptionSettingsConfig => ({
@@ -146,6 +155,7 @@ export const useSubscriptionSettingsConfig = (
       sectionConfig: {
         statusType,
         isPremium,
+        display,
         expirationDate: formattedExpirationDate,
         purchaseDate: formattedPurchaseDate,
         isLifetime: isPremium && !expiresAtIso,
@@ -175,6 +185,7 @@ export const useSubscriptionSettingsConfig = (
       translations,
       isPremium,
       statusType,
+      display,
       formattedExpirationDate,
       formattedPurchaseDate,
       expiresAtIso,

package/src/presentation/screens/SubscriptionDetailScreen.tsx

@@ -17,6 +17,7 @@ import { DevTestSection } from "./components/DevTestSection";
 import type { SubscriptionDetailScreenProps } from "../types/SubscriptionDetailTypes";
 
 export type {
+  SubscriptionDisplayFlags,
   SubscriptionDetailTranslations,
   SubscriptionDetailConfig,
   SubscriptionDetailScreenProps,
@@ -31,8 +32,7 @@ export const SubscriptionDetailScreen: React.FC<
   SubscriptionDetailScreenProps
 > = ({ config }) => {
   const tokens = useAppDesignTokens();
-  const showCredits = config.credits && config.credits.length > 0;
-  const showUpgradePrompt = !config.isPremium && config.upgradePrompt;
+  const { showHeader, showCredits, showUpgradePrompt, showExpirationDate } = config.display;
 
   const styles = useMemo(
     () =>
@@ -69,10 +69,10 @@ export const SubscriptionDetailScreen: React.FC<
       }
     >
       <View style={styles.cardsContainer}>
-        {config.isPremium && (
+        {showHeader && (
           <SubscriptionHeader
             statusType={config.statusType}
-            isPremium={config.isPremium}
+            showExpirationDate={showExpirationDate}
             isLifetime={config.isLifetime}
             expirationDate={config.expirationDate}
             purchaseDate={config.purchaseDate}

package/src/presentation/screens/components/SubscriptionHeader.tsx

@@ -12,7 +12,7 @@ import type { SubscriptionHeaderProps } from "../../types/SubscriptionDetailType
 
 export const SubscriptionHeader: React.FC<SubscriptionHeaderProps> = ({
   statusType,
-  isPremium,
+  showExpirationDate,
   isLifetime,
   expirationDate,
   purchaseDate,
@@ -85,41 +85,39 @@ export const SubscriptionHeader: React.FC<SubscriptionHeaderProps> = ({
         />
       </View>
 
-      {isPremium && (
-        <View style={styles.details}>
-          {isLifetime ? (
-            <DetailRow
-              label={translations.statusLabel}
-              value={translations.lifetimeLabel}
-              style={styles.row}
-              labelStyle={styles.label}
-              valueStyle={styles.value}
-            />
-          ) : (
-            <>
-              {expirationDate && (
-                <DetailRow
-                  label={translations.expiresLabel}
-                  value={expirationDate}
-                  highlight={showExpiring}
-                  style={styles.row}
-                  labelStyle={styles.label}
-                  valueStyle={styles.value}
-                />
-              )}
-              {purchaseDate && (
-                <DetailRow
-                  label={translations.purchasedLabel}
-                  value={purchaseDate}
-                  style={styles.row}
-                  labelStyle={styles.label}
-                  valueStyle={styles.value}
-                />
-              )}
-            </>
-          )}
-        </View>
-      )}
+      <View style={styles.details}>
+        {isLifetime ? (
+          <DetailRow
+            label={translations.statusLabel}
+            value={translations.lifetimeLabel}
+            style={styles.row}
+            labelStyle={styles.label}
+            valueStyle={styles.value}
+          />
+        ) : (
+          <>
+            {showExpirationDate && expirationDate && (
+              <DetailRow
+                label={translations.expiresLabel}
+                value={expirationDate}
+                highlight={showExpiring}
+                style={styles.row}
+                labelStyle={styles.label}
+                valueStyle={styles.value}
+              />
+            )}
+            {purchaseDate && (
+              <DetailRow
+                label={translations.purchasedLabel}
+                value={purchaseDate}
+                style={styles.row}
+                labelStyle={styles.label}
+                valueStyle={styles.value}
+              />
+            )}
+          </>
+        )}
+      </View>
     </View>
   );
 };

package/src/presentation/types/SubscriptionDetailTypes.ts

@@ -53,10 +53,19 @@ export interface UpgradePromptConfig {
   benefits?: UpgradeBenefit[];
 }
 
+/** Display flags - centralized UI visibility control */
+export interface SubscriptionDisplayFlags {
+  showHeader: boolean;
+  showCredits: boolean;
+  showUpgradePrompt: boolean;
+  showExpirationDate: boolean;
+}
+
 /** Configuration for subscription detail screen */
 export interface SubscriptionDetailConfig {
   statusType: SubscriptionStatusType;
   isPremium: boolean;
+  display: SubscriptionDisplayFlags;
   expirationDate?: string | null;
   purchaseDate?: string | null;
   isLifetime?: boolean;
@@ -78,7 +87,7 @@ export interface SubscriptionDetailScreenProps {
 /** Props for subscription header component */
 export interface SubscriptionHeaderProps {
   statusType: SubscriptionStatusType;
-  isPremium: boolean;
+  showExpirationDate: boolean;
   isLifetime?: boolean;
   expirationDate?: string | null;
   purchaseDate?: string | null;