@umituz/react-native-ai-generation-content 1.26.47 → 1.26.49

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-ai-generation-content",
-  "version": "1.26.47",
+  "version": "1.26.49",
   "description": "Provider-agnostic AI generation orchestration for React Native with result preview components",
   "main": "src/index.ts",
   "types": "src/index.ts",

package/src/domains/generation/wizard/presentation/components/GenericWizardFlow.tsx

@@ -12,17 +12,20 @@
  * NO feature-specific code here - everything driven by configuration!
  */
 
-import React, { useMemo, useCallback, useEffect, useRef } from "react";
+import React, { useMemo, useCallback, useEffect, useRef, useState } from "react";
 import { View, StyleSheet } from "react-native";
 import { useAppDesignTokens } from "@umituz/react-native-design-system";
 import { useFlow } from "../../../infrastructure/flow/useFlow";
 import { StepType, type StepDefinition } from "../../../../../domain/entities/flow-config.types";
-import type { WizardFeatureConfig, WizardStepConfig } from "../../domain/entities/wizard-config.types";
+import type { WizardFeatureConfig } from "../../domain/entities/wizard-config.types";
 import { buildFlowStepsFromWizard } from "../../infrastructure/builders/dynamic-step-builder";
 import { useWizardGeneration, type WizardScenarioData } from "../hooks/useWizardGeneration";
 import type { AlertMessages } from "../../../../../presentation/hooks/generation/types";
 import type { UploadedImage } from "../../../../../presentation/hooks/generation/useAIGenerateState";
-import { GenericPhotoUploadScreen } from "../screens/GenericPhotoUploadScreen";
+import type { Creation } from "../../../../creations/domain/entities/Creation";
+import { useResultActions } from "../../../../result-preview/presentation/hooks/useResultActions";
+import { validateScenario } from "../utilities/validateScenario";
+import { WizardStepRenderer } from "./WizardStepRenderer";
 
 export interface GenericWizardFlowProps {
   readonly featureConfig: WizardFeatureConfig;
@@ -35,6 +38,7 @@ export interface GenericWizardFlowProps {
   readonly onGenerationError?: (error: string) => void;
   readonly onCreditsExhausted?: () => void;
   readonly onBack?: () => void;
+  readonly onTryAgain?: () => void;
   readonly t: (key: string) => string;
   readonly translations?: Record<string, string>;
   readonly renderPreview?: (onContinue: () => void) => React.ReactElement | null;
@@ -53,6 +57,7 @@ export const GenericWizardFlow: React.FC<GenericWizardFlowProps> = ({
   onGenerationError,
   onCreditsExhausted,
   onBack,
+  onTryAgain,
   t,
   translations: _translations,
   renderPreview,
@@ -60,22 +65,17 @@ export const GenericWizardFlow: React.FC<GenericWizardFlowProps> = ({
   renderResult,
 }) => {
   const tokens = useAppDesignTokens();
+  const [currentCreation, setCurrentCreation] = useState<Creation | null>(null);
+  const prevStepIdRef = useRef<string | undefined>(undefined);
 
-  // Build flow steps from wizard config
   const flowSteps = useMemo<StepDefinition[]>(() => {
     return buildFlowStepsFromWizard(featureConfig, {
-      includePreview: !!renderPreview,
-      includeGenerating: !!renderGenerating,
+      includePreview: true,
+      includeGenerating: true,
     });
-  }, [featureConfig, renderPreview, renderGenerating]);
-
-  // Initialize flow and destructure to prevent infinite loops
-  const flow = useFlow({
-    steps: flowSteps,
-    initialStepIndex: 0,
-  });
+  }, [featureConfig]);
 
-  // Destructure flow to get stable references for useCallback dependencies
+  const flow = useFlow({ steps: flowSteps, initialStepIndex: 0 });
   const {
     currentStep,
     currentStepIndex,
@@ -89,76 +89,27 @@ export const GenericWizardFlow: React.FC<GenericWizardFlowProps> = ({
     setResult,
   } = flow;
 
-  // Handle progress change - memoized to prevent infinite loops
-  const handleProgressChange = useCallback(
-    (progress: number) => {
-      updateProgress(progress);
-    },
-    [updateProgress],
-  );
-
-  // Handle generation complete - saves result and advances to result preview
-  const handleGenerationComplete = useCallback(
-    (result: unknown) => {
-      if (typeof __DEV__ !== "undefined" && __DEV__) {
-        console.log("[GenericWizardFlow] Generation completed, saving result and advancing to result preview");
-      }
-      // Save result in flow state
-      setResult(result);
-      // Advance to result preview step
-      nextStep();
-      // Notify parent
-      onGenerationComplete?.(result);
-    },
-    [setResult, nextStep, onGenerationComplete],
-  );
-
-  // Validate scenario - NO FALLBACK, aiPrompt is REQUIRED
-  const validatedScenario = useMemo(() => {
-    if (typeof __DEV__ !== "undefined" && __DEV__) {
-      console.log("[GenericWizardFlow] Validating scenario", {
-        hasScenario: !!scenario,
-        scenarioId: scenario?.id,
-        hasAiPrompt: !!scenario?.aiPrompt,
-        aiPromptValue: scenario?.aiPrompt,
-        aiPromptLength: scenario?.aiPrompt?.length,
-        hasModel: !!scenario?.model,
-        scenarioModel: scenario?.model,
-        outputType: scenario?.outputType,
-        fullScenario: JSON.stringify(scenario, null, 2),
-      });
-    }
+  const resultImageUrl = currentCreation?.output?.imageUrl || currentCreation?.uri || "";
+  const { isSaving, isSharing, handleDownload, handleShare } = useResultActions({
+    imageUrl: resultImageUrl,
+  });
 
-    if (!scenario || !scenario.id) {
-      throw new Error("[GenericWizardFlow] Scenario is required");
-    }
+  const validatedScenario = useMemo(() => validateScenario(scenario), [scenario]);
 
-    if (!scenario.aiPrompt || scenario.aiPrompt.trim() === "") {
-      if (typeof __DEV__ !== "undefined" && __DEV__) {
-        console.error("[GenericWizardFlow] CRITICAL: Scenario missing aiPrompt!", {
-          scenarioId: scenario.id,
-          aiPrompt: scenario.aiPrompt,
-          fullScenario: scenario,
-        });
-      }
-      throw new Error(`[GenericWizardFlow] Scenario "${scenario.id}" must have aiPrompt field`);
-    }
+  const handleProgressChange = useCallback((progress: number) => {
+    updateProgress(progress);
+  }, [updateProgress]);
 
+  const handleGenerationComplete = useCallback((result: unknown) => {
     if (typeof __DEV__ !== "undefined" && __DEV__) {
-      console.log("[GenericWizardFlow] ✅ Scenario validation passed", {
-        scenarioId: scenario.id,
-        model: scenario.model,
-        outputType: scenario.outputType,
-        promptLength: scenario.aiPrompt.length,
-        promptPreview: scenario.aiPrompt.substring(0, 100),
-      });
+      console.log("[GenericWizardFlow] Generation completed");
     }
+    setResult(result);
+    setCurrentCreation(result as Creation);
+    nextStep();
+    onGenerationComplete?.(result);
+  }, [setResult, nextStep, onGenerationComplete]);
 
-    return scenario;
-  }, [scenario]);
-
-  // Generation hook - handles AI generation automatically
-  // Note: Hook is used for its side effects (automatic generation)
   useWizardGeneration({
     scenario: validatedScenario,
     wizardData: customData,
@@ -171,40 +122,16 @@ export const GenericWizardFlow: React.FC<GenericWizardFlowProps> = ({
     onCreditsExhausted,
   });
 
-  // Track previous step ID to prevent infinite loops
-  const prevStepIdRef = useRef<string | undefined>(undefined);
-
-  // DEBUG logging
-  if (typeof __DEV__ !== "undefined" && __DEV__) {
-    console.log("[GenericWizardFlow] Render", {
-      featureId: featureConfig.id,
-      currentStepId: currentStep?.id,
-      currentStepType: currentStep?.type,
-      stepIndex: currentStepIndex,
-      totalSteps: flowSteps.length,
-    });
-  }
-
-  // Notify parent when step changes
-  // Only call onStepChange when step ID actually changes (not on every object reference change)
   useEffect(() => {
     if (currentStep && onStepChange) {
       const currentStepId = currentStep.id;
-      // Only notify if step ID changed
       if (prevStepIdRef.current !== currentStepId) {
         prevStepIdRef.current = currentStepId;
-        if (typeof __DEV__ !== "undefined" && __DEV__) {
-          console.log("[GenericWizardFlow] Step changed", {
-            stepId: currentStep.id,
-            stepType: currentStep.type,
-          });
-        }
         onStepChange(currentStep.id, currentStep.type);
       }
     }
   }, [currentStep, currentStepIndex, onStepChange]);
 
-  // Handle back
   const handleBack = useCallback(() => {
     if (currentStepIndex === 0) {
       onBack?.();
@@ -213,18 +140,12 @@ export const GenericWizardFlow: React.FC<GenericWizardFlowProps> = ({
     }
   }, [currentStepIndex, previousStep, onBack]);
 
-  // Handle photo continue - saves photo and moves to next step
   const handlePhotoContinue = useCallback((stepId: string, image: UploadedImage) => {
     setCustomData(stepId, image);
 
-    // Check if this is the last step before generating
     if (currentStepIndex === flowSteps.length - 2) {
-      // Next step is GENERATING - call onGenerationStart
       if (onGenerationStart) {
         onGenerationStart({ ...customData, [stepId]: image }, () => {
-          if (typeof __DEV__ !== "undefined" && __DEV__) {
-            console.log("[GenericWizardFlow] Proceeding to GENERATING step");
-          }
           nextStep();
         });
       }
@@ -234,96 +155,27 @@ export const GenericWizardFlow: React.FC<GenericWizardFlowProps> = ({
     nextStep();
   }, [currentStepIndex, flowSteps.length, customData, setCustomData, nextStep, onGenerationStart]);
 
-  // Render current step
-  const renderCurrentStep = useCallback(() => {
-    const step = currentStep;
-    if (!step) {
-      if (typeof __DEV__ !== "undefined" && __DEV__) {
-        console.warn("[GenericWizardFlow] No current step!");
-      }
-      return null;
-    }
-
-    if (typeof __DEV__ !== "undefined" && __DEV__) {
-      console.log("[GenericWizardFlow] Rendering step", {
-        stepId: step.id,
-        stepType: step.type,
-      });
-    }
-
-    // Special steps with custom renderers
-    switch (step.type) {
-      case StepType.SCENARIO_PREVIEW:
-        // Preview continues to next step automatically
-        return renderPreview?.(nextStep) || null;
-
-      case StepType.GENERATING:
-        return renderGenerating?.(generationProgress) || null;
-
-      case StepType.RESULT_PREVIEW:
-        return renderResult?.(generationResult) || null;
-
-      case StepType.PARTNER_UPLOAD: {
-        // Get wizard step config
-        const wizardConfig = step.config as WizardStepConfig;
-
-        // Use titleKey from config, fallback to step-specific translation key
-        const titleKey = wizardConfig?.titleKey || `wizard.steps.${step.id}.title`;
-        const title = t(titleKey);
-
-        // Subtitle from config
-        const subtitleKey = wizardConfig?.subtitleKey || `wizard.steps.${step.id}.subtitle`;
-        const subtitle = t(subtitleKey);
-
-        // Get existing photo for this step from customData
-        const existingPhoto = customData[step.id] as UploadedImage | undefined;
-
-        return (
-          <GenericPhotoUploadScreen
-            translations={{
-              title,
-              subtitle,
-              continue: t("common.continue"),
-              tapToUpload: t("photoUpload.tapToUpload"),
-              selectPhoto: t("photoUpload.selectPhoto"),
-              change: t("common.change"),
-              fileTooLarge: t("common.errors.file_too_large"),
-              maxFileSize: t("common.errors.max_file_size"),
-              error: t("common.error"),
-              uploadFailed: t("common.errors.upload_failed"),
-            }}
-            t={t}
-            onBack={handleBack}
-            onContinue={(image) => handlePhotoContinue(step.id, image)}
-            existingImage={existingPhoto}
-          />
-        );
-      }
-
-      default:
-        // Other step types should be handled by custom render props
-        if (typeof __DEV__ !== "undefined" && __DEV__) {
-          console.warn("[GenericWizardFlow] Unhandled step type", { stepType: step.type });
-        }
-        return null;
-    }
-  }, [
-    currentStep,
-    customData,
-    generationProgress,
-    generationResult,
-    nextStep,
-    renderPreview,
-    renderGenerating,
-    renderResult,
-    handlePhotoContinue,
-    handleBack,
-    t,
-  ]);
-
   return (
     <View style={[styles.container, { backgroundColor: tokens.colors.backgroundPrimary }]}>
-      {renderCurrentStep()}
+      <WizardStepRenderer
+        step={currentStep}
+        scenario={scenario}
+        customData={customData}
+        generationProgress={generationProgress}
+        generationResult={generationResult}
+        isSaving={isSaving}
+        isSharing={isSharing}
+        onNext={nextStep}
+        onBack={handleBack}
+        onPhotoContinue={handlePhotoContinue}
+        onDownload={handleDownload}
+        onShare={handleShare}
+        onTryAgain={onTryAgain}
+        t={t}
+        renderPreview={renderPreview}
+        renderGenerating={renderGenerating}
+        renderResult={renderResult}
+      />
     </View>
   );
 };

package/src/domains/generation/wizard/presentation/components/WizardStepRenderer.tsx

@@ -0,0 +1,158 @@
+/**
+ * Wizard Step Renderer Component
+ * Renders the appropriate screen based on current step type
+ */
+
+import React from "react";
+import { StepType, type StepDefinition } from "../../../../../domain/entities/flow-config.types";
+import type { WizardStepConfig } from "../../domain/entities/wizard-config.types";
+import type { WizardScenarioData } from "../hooks/useWizardGeneration";
+import type { UploadedImage } from "../../../../../presentation/hooks/generation/useAIGenerateState";
+import type { Creation } from "../../../../creations/domain/entities/Creation";
+import { GenericPhotoUploadScreen } from "../screens/GenericPhotoUploadScreen";
+import { GeneratingScreen } from "../screens/GeneratingScreen";
+import { ScenarioPreviewScreen } from "../../../../scenarios/presentation/screens/ScenarioPreviewScreen";
+import { ResultPreviewScreen } from "../../../../result-preview/presentation/components/ResultPreviewScreen";
+
+export interface WizardStepRendererProps {
+  readonly step: StepDefinition | undefined;
+  readonly scenario?: WizardScenarioData;
+  readonly customData: Record<string, unknown>;
+  readonly generationProgress: number;
+  readonly generationResult: unknown;
+  readonly isSaving: boolean;
+  readonly isSharing: boolean;
+  readonly onNext: () => void;
+  readonly onBack: () => void;
+  readonly onPhotoContinue: (stepId: string, image: UploadedImage) => void;
+  readonly onDownload: () => void;
+  readonly onShare: () => void;
+  readonly onTryAgain?: () => void;
+  readonly t: (key: string) => string;
+  readonly renderPreview?: (onContinue: () => void) => React.ReactElement | null;
+  readonly renderGenerating?: (progress: number) => React.ReactElement | null;
+  readonly renderResult?: (result: unknown) => React.ReactElement | null;
+}
+
+export const WizardStepRenderer: React.FC<WizardStepRendererProps> = ({
+  step,
+  scenario,
+  customData,
+  generationProgress,
+  generationResult,
+  isSaving,
+  isSharing,
+  onNext,
+  onBack,
+  onPhotoContinue,
+  onDownload,
+  onShare,
+  onTryAgain,
+  t,
+  renderPreview,
+  renderGenerating,
+  renderResult,
+}) => {
+  if (!step) {
+    if (typeof __DEV__ !== "undefined" && __DEV__) {
+      console.warn("[WizardStepRenderer] No current step!");
+    }
+    return null;
+  }
+
+  switch (step.type) {
+    case StepType.SCENARIO_PREVIEW: {
+      if (renderPreview) {
+        return renderPreview(onNext);
+      }
+      return (
+        <ScenarioPreviewScreen
+          scenario={scenario}
+          translations={{
+            continueButton: t("common.continue"),
+            whatToExpect: t("scenarioPreview.whatToExpect"),
+          }}
+          onContinue={onNext}
+          onBack={onBack}
+          t={t}
+        />
+      );
+    }
+
+    case StepType.GENERATING: {
+      if (renderGenerating) {
+        return renderGenerating(generationProgress);
+      }
+      return (
+        <GeneratingScreen
+          progress={generationProgress}
+          scenario={scenario}
+          t={t}
+        />
+      );
+    }
+
+    case StepType.RESULT_PREVIEW: {
+      if (renderResult) {
+        return renderResult(generationResult);
+      }
+      const creation = generationResult as Creation;
+      const imageUrl = creation?.output?.imageUrl || creation?.uri || "";
+      if (!imageUrl) return null;
+      return (
+        <ResultPreviewScreen
+          imageUrl={imageUrl}
+          isSaving={isSaving}
+          isSharing={isSharing}
+          onDownload={onDownload}
+          onShare={onShare}
+          onTryAgain={onTryAgain || onBack}
+          onNavigateBack={onTryAgain || onBack}
+          translations={{
+            title: t("generation.result.title"),
+            yourResult: t("generation.result.yourResult"),
+            saveButton: t("generation.result.save"),
+            saving: t("generation.result.saving"),
+            shareButton: t("generation.result.share"),
+            sharing: t("generation.result.sharing"),
+            tryAnother: t("generation.result.tryAnother"),
+          }}
+        />
+      );
+    }
+
+    case StepType.PARTNER_UPLOAD: {
+      const wizardConfig = step.config as WizardStepConfig;
+      const titleKey = wizardConfig?.titleKey || `wizard.steps.${step.id}.title`;
+      const subtitleKey = wizardConfig?.subtitleKey || `wizard.steps.${step.id}.subtitle`;
+      const existingPhoto = customData[step.id] as UploadedImage | undefined;
+
+      return (
+        <GenericPhotoUploadScreen
+          translations={{
+            title: t(titleKey),
+            subtitle: t(subtitleKey),
+            continue: t("common.continue"),
+            tapToUpload: t("photoUpload.tapToUpload"),
+            selectPhoto: t("photoUpload.selectPhoto"),
+            change: t("common.change"),
+            fileTooLarge: t("common.errors.file_too_large"),
+            maxFileSize: t("common.errors.max_file_size"),
+            error: t("common.error"),
+            uploadFailed: t("common.errors.upload_failed"),
+          }}
+          t={t}
+          onBack={onBack}
+          onContinue={(image) => onPhotoContinue(step.id, image)}
+          existingImage={existingPhoto}
+        />
+      );
+    }
+
+    default:
+      if (typeof __DEV__ !== "undefined" && __DEV__) {
+        console.warn("[WizardStepRenderer] Unhandled step type", { stepType: step.type });
+      }
+      return null;
+  }
+};

package/src/domains/generation/wizard/presentation/components/index.ts

@@ -1,2 +1,4 @@
 export { GenericWizardFlow } from "./GenericWizardFlow";
 export type { GenericWizardFlowProps } from "./GenericWizardFlow";
+export { WizardStepRenderer } from "./WizardStepRenderer";
+export type { WizardStepRendererProps } from "./WizardStepRenderer";

package/src/domains/generation/wizard/presentation/utilities/index.ts

@@ -0,0 +1 @@
+export { validateScenario, type ScenarioValidationResult } from "./validateScenario";

package/src/domains/generation/wizard/presentation/utilities/validateScenario.ts

@@ -0,0 +1,56 @@
+/**
+ * Scenario validation utility
+ * Validates that scenario has required fields for wizard generation
+ */
+
+import type { WizardScenarioData } from "../hooks/useWizardGeneration";
+
+export interface ScenarioValidationResult {
+  isValid: boolean;
+  error?: string;
+  scenario?: WizardScenarioData;
+}
+
+/**
+ * Validates scenario data for wizard generation
+ * @throws Error if scenario is invalid
+ */
+export const validateScenario = (
+  scenario: WizardScenarioData | undefined,
+): WizardScenarioData => {
+  if (typeof __DEV__ !== "undefined" && __DEV__) {
+    console.log("[validateScenario] Validating", {
+      hasScenario: !!scenario,
+      scenarioId: scenario?.id,
+      hasAiPrompt: !!scenario?.aiPrompt,
+      aiPromptLength: scenario?.aiPrompt?.length,
+      hasModel: !!scenario?.model,
+      outputType: scenario?.outputType,
+    });
+  }
+
+  if (!scenario || !scenario.id) {
+    throw new Error("[validateScenario] Scenario is required");
+  }
+
+  if (!scenario.aiPrompt || scenario.aiPrompt.trim() === "") {
+    if (typeof __DEV__ !== "undefined" && __DEV__) {
+      console.error("[validateScenario] CRITICAL: Scenario missing aiPrompt!", {
+        scenarioId: scenario.id,
+        aiPrompt: scenario.aiPrompt,
+      });
+    }
+    throw new Error(`[validateScenario] Scenario "${scenario.id}" must have aiPrompt field`);
+  }
+
+  if (typeof __DEV__ !== "undefined" && __DEV__) {
+    console.log("[validateScenario] Validation passed", {
+      scenarioId: scenario.id,
+      model: scenario.model,
+      outputType: scenario.outputType,
+      promptLength: scenario.aiPrompt.length,
+    });
+  }
+
+  return scenario;
+};