@umituz/react-native-subscription 1.5.1 → 1.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-subscription",
-  "version": "1.5.1",
+  "version": "1.6.0",
   "description": "Subscription management and paywall UI for React Native apps",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
@@ -36,7 +36,9 @@
   },
   "devDependencies": {
     "@types/react": "~19.1.0",
-    "typescript": "~5.9.2"
+    "typescript": "~5.9.2",
+    "react-native": "~0.76.0",
+    "@umituz/react-native-design-system-theme": "latest"
   },
   "publishConfig": {
     "access": "public"

package/src/index.ts

@@ -53,6 +53,11 @@ export {
 export { useSubscription } from "./presentation/hooks/useSubscription";
 export type { UseSubscriptionResult } from "./presentation/hooks/useSubscription";
 
+export {
+  useSubscriptionDetails,
+  type SubscriptionDetails,
+} from "./presentation/hooks/useSubscriptionDetails";
+
 export {
   usePremiumGate,
   type UsePremiumGateParams,
@@ -86,6 +91,23 @@ export { PaywallFeaturesList } from "./presentation/components/paywall/PaywallFe
 export { PaywallFeatureItem } from "./presentation/components/paywall/PaywallFeatureItem";
 export { PaywallLegalFooter } from "./presentation/components/paywall/PaywallLegalFooter";
 
+// =============================================================================
+// PRESENTATION LAYER - Premium Details Components
+// =============================================================================
+
+export {
+  PremiumDetailsCard,
+  type PremiumDetailsCardProps,
+  type PremiumDetailsTranslations,
+  type CreditInfo,
+} from "./presentation/components/details/PremiumDetailsCard";
+
+export {
+  PremiumStatusBadge,
+  type PremiumStatusBadgeProps,
+  type SubscriptionStatusType,
+} from "./presentation/components/details/PremiumStatusBadge";
+
 // =============================================================================
 // UTILS - Date & Price
 // =============================================================================

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

@@ -0,0 +1,328 @@
+/**
+ * Premium Details Card
+ * Generic component for displaying subscription details
+ * Accepts credits via props for app-specific customization
+ */
+
+import React from "react";
+import { View, Text, StyleSheet, TouchableOpacity } from "react-native";
+import { useAppDesignTokens } from "@umituz/react-native-design-system-theme";
+import {
+  PremiumStatusBadge,
+  type SubscriptionStatusType,
+} from "./PremiumStatusBadge";
+
+export interface CreditInfo {
+  id: string;
+  label: string;
+  current: number;
+  total: number;
+}
+
+export interface PremiumDetailsTranslations {
+  title: string;
+  statusLabel: string;
+  expiresLabel: string;
+  purchasedLabel: string;
+  creditsTitle?: string;
+  remainingLabel?: string;
+  manageButton?: string;
+  upgradeButton?: string;
+  lifetimeLabel?: string;
+  statusActive?: string;
+  statusExpired?: string;
+  statusFree?: string;
+}
+
+export interface PremiumDetailsCardProps {
+  statusType: SubscriptionStatusType;
+  isPremium: boolean;
+  expirationDate?: string | null;
+  purchaseDate?: string | null;
+  isLifetime?: boolean;
+  daysRemaining?: number | null;
+  credits?: CreditInfo[];
+  translations: PremiumDetailsTranslations;
+  onManageSubscription?: () => void;
+  onUpgrade?: () => void;
+}
+
+export const PremiumDetailsCard: React.FC<PremiumDetailsCardProps> = ({
+  statusType,
+  isPremium,
+  expirationDate,
+  purchaseDate,
+  isLifetime = false,
+  daysRemaining,
+  credits,
+  translations,
+  onManageSubscription,
+  onUpgrade,
+}) => {
+  const tokens = useAppDesignTokens();
+  const showCredits = credits && credits.length > 0;
+
+  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 && (
+        <View style={styles.detailsSection}>
+          {isLifetime ? (
+            <DetailRow
+              label={translations.statusLabel}
+              value={translations.lifetimeLabel || "Lifetime"}
+              tokens={tokens}
+            />
+          ) : (
+            <>
+              {expirationDate && (
+                <DetailRow
+                  label={translations.expiresLabel}
+                  value={expirationDate}
+                  highlight={
+                    daysRemaining !== null &&
+                    daysRemaining !== undefined &&
+                    daysRemaining <= 7
+                  }
+                  tokens={tokens}
+                />
+              )}
+              {purchaseDate && (
+                <DetailRow
+                  label={translations.purchasedLabel}
+                  value={purchaseDate}
+                  tokens={tokens}
+                />
+              )}
+            </>
+          )}
+        </View>
+      )}
+
+      {showCredits && (
+        <View
+          style={[styles.creditsSection, { borderTopColor: tokens.colors.border }]}
+        >
+          {translations.creditsTitle && (
+            <Text style={[styles.sectionTitle, { color: tokens.colors.text }]}>
+              {translations.creditsTitle}
+            </Text>
+          )}
+          {credits.map((credit) => (
+            <CreditRow
+              key={credit.id}
+              label={credit.label}
+              current={credit.current}
+              total={credit.total}
+              remainingLabel={translations.remainingLabel}
+              tokens={tokens}
+            />
+          ))}
+        </View>
+      )}
+
+      <View style={styles.actionsSection}>
+        {isPremium && onManageSubscription && translations.manageButton && (
+          <TouchableOpacity
+            style={[
+              styles.secondaryButton,
+              { backgroundColor: tokens.colors.surfaceSecondary },
+            ]}
+            onPress={onManageSubscription}
+          >
+            <Text style={[styles.secondaryButtonText, { color: tokens.colors.text }]}>
+              {translations.manageButton}
+            </Text>
+          </TouchableOpacity>
+        )}
+        {!isPremium && onUpgrade && translations.upgradeButton && (
+          <TouchableOpacity
+            style={[styles.primaryButton, { backgroundColor: tokens.colors.primary }]}
+            onPress={onUpgrade}
+          >
+            <Text
+              style={[styles.primaryButtonText, { color: tokens.colors.onPrimary }]}
+            >
+              {translations.upgradeButton}
+            </Text>
+          </TouchableOpacity>
+        )}
+      </View>
+    </View>
+  );
+};
+
+interface DetailRowProps {
+  label: string;
+  value: string;
+  highlight?: boolean;
+  tokens: ReturnType<typeof useAppDesignTokens>;
+}
+
+const DetailRow: React.FC<DetailRowProps> = ({
+  label,
+  value,
+  highlight = false,
+  tokens,
+}) => (
+  <View style={styles.detailRow}>
+    <Text style={[styles.detailLabel, { color: tokens.colors.textSecondary }]}>
+      {label}
+    </Text>
+    <Text
+      style={[
+        styles.detailValue,
+        { color: highlight ? tokens.colors.warning : tokens.colors.text },
+      ]}
+    >
+      {value}
+    </Text>
+  </View>
+);
+
+interface CreditRowProps {
+  label: string;
+  current: number;
+  total: number;
+  remainingLabel?: string;
+  tokens: ReturnType<typeof useAppDesignTokens>;
+}
+
+const CreditRow: React.FC<CreditRowProps> = ({
+  label,
+  current,
+  total,
+  remainingLabel = "remaining",
+  tokens,
+}) => {
+  const percentage = total > 0 ? (current / total) * 100 : 0;
+  const isLow = percentage <= 20;
+
+  return (
+    <View style={styles.creditRow}>
+      <View style={styles.creditHeader}>
+        <Text style={[styles.creditLabel, { color: tokens.colors.text }]}>
+          {label}
+        </Text>
+        <Text
+          style={[
+            styles.creditCount,
+            { color: isLow ? tokens.colors.warning : tokens.colors.textSecondary },
+          ]}
+        >
+          {current} / {total} {remainingLabel}
+        </Text>
+      </View>
+      <View
+        style={[styles.progressBar, { backgroundColor: tokens.colors.surfaceSecondary }]}
+      >
+        <View
+          style={[
+            styles.progressFill,
+            {
+              width: `${percentage}%`,
+              backgroundColor: isLow ? tokens.colors.warning : tokens.colors.primary,
+            },
+          ]}
+        />
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  card: {
+    borderRadius: 12,
+    padding: 16,
+    gap: 12,
+  },
+  header: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+  },
+  title: {
+    fontSize: 18,
+    fontWeight: "600",
+  },
+  detailsSection: {
+    gap: 8,
+  },
+  sectionTitle: {
+    fontSize: 14,
+    fontWeight: "600",
+    marginBottom: 4,
+  },
+  detailRow: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+  },
+  detailLabel: {
+    fontSize: 14,
+  },
+  detailValue: {
+    fontSize: 14,
+    fontWeight: "500",
+  },
+  creditsSection: {
+    gap: 8,
+    paddingTop: 12,
+    borderTopWidth: 1,
+  },
+  creditRow: {
+    gap: 4,
+  },
+  creditHeader: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+  },
+  creditLabel: {
+    fontSize: 13,
+  },
+  creditCount: {
+    fontSize: 12,
+  },
+  progressBar: {
+    height: 6,
+    borderRadius: 3,
+    overflow: "hidden",
+  },
+  progressFill: {
+    height: "100%",
+    borderRadius: 3,
+  },
+  actionsSection: {
+    gap: 8,
+  },
+  primaryButton: {
+    paddingVertical: 12,
+    borderRadius: 8,
+    alignItems: "center",
+  },
+  primaryButtonText: {
+    fontSize: 14,
+    fontWeight: "600",
+  },
+  secondaryButton: {
+    paddingVertical: 12,
+    borderRadius: 8,
+    alignItems: "center",
+  },
+  secondaryButtonText: {
+    fontSize: 14,
+    fontWeight: "500",
+  },
+});

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

@@ -0,0 +1,64 @@
+/**
+ * Premium Status Badge
+ * Displays subscription status as a colored badge
+ */
+
+import React from "react";
+import { View, Text, StyleSheet } from "react-native";
+import { useAppDesignTokens } from "@umituz/react-native-design-system-theme";
+
+export type SubscriptionStatusType = "active" | "expired" | "none";
+
+export interface PremiumStatusBadgeProps {
+  status: SubscriptionStatusType;
+  activeLabel?: string;
+  expiredLabel?: string;
+  noneLabel?: string;
+}
+
+/**
+ * Badge component showing subscription status
+ */
+export const PremiumStatusBadge: React.FC<PremiumStatusBadgeProps> = ({
+  status,
+  activeLabel = "Active",
+  expiredLabel = "Expired",
+  noneLabel = "Free",
+}) => {
+  const tokens = useAppDesignTokens();
+
+  const labels: Record<SubscriptionStatusType, string> = {
+    active: activeLabel,
+    expired: expiredLabel,
+    none: noneLabel,
+  };
+
+  const colors: Record<SubscriptionStatusType, string> = {
+    active: tokens.colors.success,
+    expired: tokens.colors.error,
+    none: tokens.colors.textTertiary,
+  };
+
+  const backgroundColor = colors[status];
+  const label = labels[status];
+
+  return (
+    <View style={[styles.badge, { backgroundColor }]}>
+      <Text style={[styles.badgeText, { color: tokens.colors.onPrimary }]}>
+        {label}
+      </Text>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  badge: {
+    paddingHorizontal: 8,
+    paddingVertical: 4,
+    borderRadius: 4,
+  },
+  badgeText: {
+    fontSize: 12,
+    fontWeight: "600",
+  },
+});

package/src/presentation/hooks/useSubscriptionDetails.ts

@@ -0,0 +1,98 @@
+/**
+ * useSubscriptionDetails Hook
+ * Provides formatted subscription details for display
+ */
+
+import { useMemo } from "react";
+import type { SubscriptionStatus } from "../../domain/entities/SubscriptionStatus";
+import {
+  getDaysUntilExpiration,
+  isSubscriptionExpired,
+} from "../../utils/dateValidationUtils";
+
+export interface SubscriptionDetails {
+  /** Raw subscription status */
+  status: SubscriptionStatus | null;
+  /** Whether user has active premium */
+  isPremium: boolean;
+  /** Whether subscription is expired */
+  isExpired: boolean;
+  /** Whether this is a lifetime subscription */
+  isLifetime: boolean;
+  /** Days remaining until expiration (null for lifetime) */
+  daysRemaining: number | null;
+  /** Formatted expiration date (null if lifetime) */
+  formattedExpirationDate: string | null;
+  /** Formatted purchase date */
+  formattedPurchaseDate: string | null;
+  /** Status text key for localization */
+  statusKey: "active" | "expired" | "none";
+}
+
+interface UseSubscriptionDetailsParams {
+  status: SubscriptionStatus | null;
+  locale?: string;
+}
+
+/**
+ * Format date to localized string
+ */
+function formatDate(dateString: string | null, locale: string): string | null {
+  if (!dateString) return null;
+
+  try {
+    const date = new Date(dateString);
+    return date.toLocaleDateString(locale, {
+      year: "numeric",
+      month: "long",
+      day: "numeric",
+    });
+  } catch {
+    return null;
+  }
+}
+
+/**
+ * Hook for formatted subscription details
+ */
+export function useSubscriptionDetails(
+  params: UseSubscriptionDetailsParams,
+): SubscriptionDetails {
+  const { status, locale = "en-US" } = params;
+
+  return useMemo(() => {
+    if (!status) {
+      return {
+        status: null,
+        isPremium: false,
+        isExpired: false,
+        isLifetime: false,
+        daysRemaining: null,
+        formattedExpirationDate: null,
+        formattedPurchaseDate: null,
+        statusKey: "none",
+      };
+    }
+
+    const isExpired = isSubscriptionExpired(status);
+    const isLifetime = status.isPremium && !status.expiresAt;
+    const daysRemaining = getDaysUntilExpiration(status);
+    const isPremium = status.isPremium && !isExpired;
+
+    let statusKey: "active" | "expired" | "none" = "none";
+    if (status.isPremium) {
+      statusKey = isExpired ? "expired" : "active";
+    }
+
+    return {
+      status,
+      isPremium,
+      isExpired,
+      isLifetime,
+      daysRemaining,
+      formattedExpirationDate: formatDate(status.expiresAt, locale),
+      formattedPurchaseDate: formatDate(status.purchasedAt, locale),
+      statusKey,
+    };
+  }, [status, locale]);
+}