@umituz/react-native-subscription 3.1.9 → 3.1.11

package/src/shared/utils/logger.ts

@@ -0,0 +1,140 @@
+/**
+ * Centralized logging utilities for development-only logging.
+ *
+ * Benefits:
+ * - Removes 8+ duplicated __DEV__ check patterns
+ * - Single source for logging configuration
+ * - Easier to add log aggregation later
+ * - Consistent formatting across all logs
+ */
+
+/**
+ * Log level for categorizing log messages.
+ */
+export enum LogLevel {
+  DEBUG = "DEBUG",
+  INFO = "INFO",
+  WARN = "WARN",
+  ERROR = "ERROR",
+}
+
+/**
+ * Structured log context for better debugging.
+ */
+export interface LogContext {
+  /** Additional key-value pairs to include in the log */
+  [key: string]: unknown;
+}
+
+/**
+ * Internal logging function that only logs in __DEV__ mode.
+ */
+function log(
+  level: LogLevel,
+  tag: string,
+  message: string,
+  context?: LogContext
+): void {
+  if (typeof __DEV__ === "undefined" || !__DEV__) {
+    return;
+  }
+
+  const timestamp = new Date().toISOString();
+  const logData = {
+    timestamp,
+    level,
+    tag,
+    message,
+    ...context,
+  };
+
+  switch (level) {
+    case LogLevel.DEBUG:
+    case LogLevel.INFO:
+      console.log(`[${tag}]`, message, context ? logData : "");
+      break;
+    case LogLevel.WARN:
+      console.warn(`[${tag}]`, message, context ? logData : "");
+      break;
+    case LogLevel.ERROR:
+      console.error(`[${tag}]`, message, context ? logData : "");
+      break;
+  }
+}
+
+/**
+ * Log a debug message. Only shown in __DEV__ mode.
+ *
+ * @param tag - Component or feature name for filtering
+ * @param message - Log message
+ * @param context - Optional additional context data
+ */
+export function logDebug(tag: string, message: string, context?: LogContext): void {
+  log(LogLevel.DEBUG, tag, message, context);
+}
+
+/**
+ * Log an info message. Only shown in __DEV__ mode.
+ *
+ * @param tag - Component or feature name for filtering
+ * @param message - Log message
+ * @param context - Optional additional context data
+ */
+export function logInfo(tag: string, message: string, context?: LogContext): void {
+  log(LogLevel.INFO, tag, message, context);
+}
+
+/**
+ * Log a warning message. Only shown in __DEV__ mode.
+ *
+ * @param tag - Component or feature name for filtering
+ * @param message - Warning message
+ * @param context - Optional additional context data
+ */
+export function logWarn(tag: string, message: string, context?: LogContext): void {
+  log(LogLevel.WARN, tag, message, context);
+}
+
+/**
+ * Log an error message. Only shown in __DEV__ mode.
+ *
+ * @param tag - Component or feature name for filtering
+ * @param message - Error message
+ * @param error - Error object (will be serialized)
+ * @param context - Optional additional context data
+ */
+export function logError(
+  tag: string,
+  message: string,
+  error?: Error | unknown,
+  context?: LogContext
+): void {
+  const errorContext = {
+    ...context,
+    error: error instanceof Error ? {
+      name: error.name,
+      message: error.message,
+      stack: error.stack,
+    } : error,
+  };
+  log(LogLevel.ERROR, tag, message, errorContext);
+}
+
+/**
+ * Create a tagged logger for a specific component or feature.
+ * Returns functions that automatically include the tag.
+ *
+ * @example
+ * const logger = createLogger("useCredits");
+ * logger.info("Credits loaded", { credits: 100 });
+ * logger.error("Failed to load", error);
+ */
+export function createLogger(tag: string) {
+  return {
+    debug: (message: string, context?: LogContext) => logDebug(tag, message, context),
+    info: (message: string, context?: LogContext) => logInfo(tag, message, context),
+    warn: (message: string, context?: LogContext) => logWarn(tag, message, context),
+    error: (message: string, error?: Error | unknown, context?: LogContext) =>
+      logError(tag, message, error, context),
+  };
+}

package/src/domains/subscription/presentation/components/ManagedSubscriptionFlow.states.tsx

@@ -1,187 +0,0 @@
-/**
- * State Components for ManagedSubscriptionFlow
- * Separated for better maintainability
- */
-
-import React from "react";
-import type { PurchasesPackage } from "react-native-purchases";
-import type { UserCredits } from "../../../credits/core/Credits";
-import { SplashScreen } from "@umituz/react-native-design-system/molecules";
-import { OnboardingScreen } from "@umituz/react-native-design-system/onboarding";
-import type { ManagedSubscriptionFlowProps } from "./ManagedSubscriptionFlow";
-import { PaywallScreen } from "../../../paywall/components/PaywallScreen";
-import { PaywallFeedbackScreen } from "./feedback/PaywallFeedbackScreen";
-import { usePaywallFeedbackSubmit } from "../../../../presentation/hooks/feedback/useFeedbackSubmit";
-
-// ============================================================================
-// INITIALIZING STATE
-// ============================================================================
-
-interface InitializingStateProps {
-  tokens: any;
-  splash?: ManagedSubscriptionFlowProps["splash"];
-}
-
-export const InitializingState: React.FC<InitializingStateProps> = ({ tokens, splash }) => (
-  <SplashScreen
-    appName={splash?.appName || "Loading..."}
-    tagline={splash?.tagline || "Please wait while we set things up"}
-    colors={tokens.colors}
-  />
-);
-
-// ============================================================================
-// ONBOARDING STATE
-// ============================================================================
-
-interface OnboardingStateProps {
-  config: ManagedSubscriptionFlowProps["onboarding"];
-  onComplete: () => void;
-}
-
-export const OnboardingState: React.FC<OnboardingStateProps> = ({ config, onComplete }) => (
-  <OnboardingScreen
-    slides={config.slides}
-    onComplete={onComplete}
-    showSkipButton={config.showSkipButton ?? true}
-    showBackButton={config.showBackButton ?? true}
-    showProgressBar={config.showProgressBar ?? true}
-    themeColors={config.themeColors}
-    translations={config.translations}
-  />
-);
-
-// ============================================================================
-// PAYWALL STATE
-// ============================================================================
-
-interface PaywallStateProps {
-  config: ManagedSubscriptionFlowProps["paywall"];
-  packages: PurchasesPackage[];
-  isPremium: boolean;
-  credits: UserCredits | null;
-  isSyncing: boolean;
-  onPurchase: (pkg: PurchasesPackage) => Promise<boolean>;
-  onRestore: () => Promise<boolean>;
-  onClose: (purchased: boolean) => void;
-}
-
-export const PaywallState: React.FC<PaywallStateProps> = ({
-  config,
-  packages,
-  isPremium,
-  credits,
-  isSyncing,
-  onPurchase,
-  onRestore,
-  onClose,
-}) => {
-  const [purchaseSuccessful, setPurchaseSuccessful] = React.useState(false);
-
-  const handlePurchase = async (pkg: PurchasesPackage) => {
-    const result = await onPurchase(pkg);
-    if (result) {
-      setPurchaseSuccessful(true);
-    }
-    return result;
-  };
-
-  const handleClose = () => {
-    onClose(purchaseSuccessful);
-  };
-
-  return (
-    <PaywallScreen
-      translations={config.translations}
-      legalUrls={config.legalUrls}
-      features={config.features}
-      bestValueIdentifier={config.bestValueIdentifier}
-      creditsLabel={config.creditsLabel}
-      heroImage={config.heroImage}
-      source="onboarding"
-      packages={packages}
-      isPremium={isPremium}
-      credits={credits}
-      isSyncing={isSyncing}
-      onPurchase={handlePurchase}
-      onRestore={onRestore}
-      onClose={handleClose}
-    />
-  );
-};
-
-// ============================================================================
-// FEEDBACK STATE
-// ============================================================================
-
-interface FeedbackStateProps {
-  config: ManagedSubscriptionFlowProps["feedback"];
-  onClose: () => void;
-}
-
-export const FeedbackState: React.FC<FeedbackStateProps> = ({ config, onClose }) => {
-  const { submit: internalSubmit } = usePaywallFeedbackSubmit();
-
-  const handleSubmit = async (data: { reason: string; otherText?: string }) => {
-    if (config.onSubmit) {
-      await config.onSubmit(data);
-    } else {
-      const description = data.otherText ? `${data.reason}: ${data.otherText}` : data.reason;
-      await internalSubmit(description);
-    }
-  };
-
-  return (
-    <PaywallFeedbackScreen
-      onClose={onClose}
-      onSubmit={handleSubmit}
-      translations={config.translations}
-    />
-  );
-};
-
-// ============================================================================
-// READY STATE (APP CONTENT)
-// ============================================================================
-
-interface ReadyStateProps {
-  children: React.ReactNode;
-  offline?: ManagedSubscriptionFlowProps["offline"];
-  feedbackConfig: ManagedSubscriptionFlowProps["feedback"];
-  showFeedback: boolean;
-  tokens: any;
-  onFeedbackClose: () => void;
-}
-
-export const ReadyState: React.FC<ReadyStateProps> = ({
-  children,
-  offline,
-  feedbackConfig,
-  showFeedback,
-  tokens,
-  onFeedbackClose,
-}) => {
-  const { OfflineBanner } = require("@umituz/react-native-design-system/offline");
-
-  return (
-    <>
-      {children}
-
-      {offline && (
-        <OfflineBanner
-          visible={offline.isOffline}
-          message={offline.message}
-          backgroundColor={offline.backgroundColor || tokens.colors.error}
-          position={offline.position || "top"}
-        />
-      )}
-
-      {showFeedback && (
-        <FeedbackState
-          config={feedbackConfig}
-          onClose={onFeedbackClose}
-        />
-      )}
-    </>
-  );
-};