@umituz/react-native-ai-generation-content 1.26.40 → 1.26.42

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-ai-generation-content",
-  "version": "1.26.40",
+  "version": "1.26.42",
   "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

@@ -21,8 +21,8 @@ import type { WizardFeatureConfig, WizardStepConfig } from "../../domain/entitie
 import { buildFlowStepsFromWizard } from "../../infrastructure/builders/dynamic-step-builder";
 import { useWizardGeneration, type WizardScenarioData } from "../hooks/useWizardGeneration";
 import type { AlertMessages } from "../../../../../presentation/hooks/generation/types";
-import { PhotoStep } from "../../../../../presentation/components/photo-step/PhotoStep";
-import { usePhotoUploadState } from "../hooks/usePhotoUploadState";
+import type { UploadedImage } from "../../../../../presentation/hooks/generation/useAIGenerateState";
+import { GenericPhotoUploadScreen } from "../screens/GenericPhotoUploadScreen";
 
 export interface GenericWizardFlowProps {
   readonly featureConfig: WizardFeatureConfig;
@@ -54,7 +54,7 @@ export const GenericWizardFlow: React.FC<GenericWizardFlowProps> = ({
   onCreditsExhausted,
   onBack,
   t,
-  translations,
+  translations: _translations,
   renderPreview,
   renderGenerating,
   renderResult,
@@ -187,44 +187,6 @@ export const GenericWizardFlow: React.FC<GenericWizardFlowProps> = ({
     }
   }, [currentStep, currentStepIndex, onStepChange]);
 
-  // Handle step continue
-  const handleStepContinue = useCallback(
-    (stepData: Record<string, unknown>) => {
-      if (typeof __DEV__ !== "undefined" && __DEV__) {
-        console.log("[GenericWizardFlow] Step continue", {
-          stepId: currentStep?.id,
-          data: stepData,
-        });
-      }
-
-      // Store step data in custom data
-      Object.entries(stepData).forEach(([key, value]) => {
-        setCustomData(key, value);
-      });
-
-      // Check if this is the last step before generating
-      if (currentStepIndex === flowSteps.length - 2) {
-        // Next step is GENERATING
-        // Notify parent and provide callback to proceed to generating
-        // Parent will call proceedToGenerating() after feature gate passes
-        if (onGenerationStart) {
-          onGenerationStart(customData, () => {
-            if (typeof __DEV__ !== "undefined" && __DEV__) {
-              console.log("[GenericWizardFlow] Proceeding to GENERATING step");
-            }
-            nextStep();
-          });
-        }
-        // DON'T call nextStep() here - parent will call it via proceedToGenerating callback
-        return;
-      }
-
-      // Move to next step (for all non-generation steps)
-      nextStep();
-    },
-    [currentStep, currentStepIndex, customData, setCustomData, nextStep, flowSteps.length, onGenerationStart],
-  );
-
   // Handle back
   const handleBack = useCallback(() => {
     if (currentStepIndex === 0) {
@@ -234,24 +196,26 @@ export const GenericWizardFlow: React.FC<GenericWizardFlowProps> = ({
     }
   }, [currentStepIndex, previousStep, onBack]);
 
-  // Photo upload state translations (generic, used for all photo upload steps)
-  const photoUploadTranslations = useMemo(() => ({
-    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]);
-
-  const photoUploadHook = usePhotoUploadState({
-    translations: photoUploadTranslations,
-  });
-
-  // Save photo when uploaded
-  useEffect(() => {
-    if (photoUploadHook.image && currentStep) {
-      setCustomData(currentStep.id, photoUploadHook.image);
+  // 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();
+        });
+      }
+      return;
     }
-  }, [photoUploadHook.image, currentStep, setCustomData]);
+
+    nextStep();
+  }, [currentStepIndex, flowSteps.length, customData, setCustomData, nextStep, onGenerationStart]);
 
   // Render current step
   const renderCurrentStep = useCallback(() => {
@@ -290,37 +254,31 @@ export const GenericWizardFlow: React.FC<GenericWizardFlowProps> = ({
         const titleKey = wizardConfig?.titleKey || `wizard.steps.${step.id}.title`;
         const title = t(titleKey);
 
-        // Subtitle is optional
-        const subtitle = wizardConfig?.subtitleKey ? t(wizardConfig.subtitleKey) : undefined;
+        // 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];
-        const imageUri = existingPhoto && typeof existingPhoto === "object" && "uri" in existingPhoto
-          ? (existingPhoto.uri as string)
-          : photoUploadHook.image?.uri || null;
+        const existingPhoto = customData[step.id] as UploadedImage | undefined;
 
         return (
-          <PhotoStep
-            config={{
-              enabled: true,
-              order: currentStepIndex,
-              id: step.id,
-              header: {},
-              photoCard: {},
-              enableValidation: false,
-            }}
-            imageUri={imageUri}
-            isValidating={false}
-            isValid={null}
-            onPhotoSelect={photoUploadHook.handlePickImage}
-            disabled={false}
-            title={title}
-            subtitle={subtitle}
+          <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}
           />
         );
       }
@@ -334,16 +292,16 @@ export const GenericWizardFlow: React.FC<GenericWizardFlowProps> = ({
     }
   }, [
     currentStep,
+    customData,
     generationProgress,
     generationResult,
     nextStep,
     renderPreview,
     renderGenerating,
     renderResult,
-    handleStepContinue,
+    handlePhotoContinue,
     handleBack,
     t,
-    translations,
   ]);
 
   return (

package/src/domains/generation/wizard/presentation/hooks/usePhotoUploadState.ts

@@ -23,6 +23,7 @@ export interface PhotoUploadTranslations {
 export interface UsePhotoUploadStateProps {
   readonly config?: PhotoUploadConfig;
   readonly translations: PhotoUploadTranslations;
+  readonly initialImage?: UploadedImage;
 }
 
 export interface UsePhotoUploadStateReturn {
@@ -36,8 +37,9 @@ const DEFAULT_MAX_FILE_SIZE_MB = 10;
 export const usePhotoUploadState = ({
   config,
   translations,
+  initialImage,
 }: UsePhotoUploadStateProps): UsePhotoUploadStateReturn => {
-  const [image, setImage] = useState<UploadedImage | null>(null);
+  const [image, setImage] = useState<UploadedImage | null>(initialImage || null);
 
   const maxFileSizeMB = config?.maxFileSizeMB ?? DEFAULT_MAX_FILE_SIZE_MB;
 

package/src/domains/generation/wizard/presentation/screens/GenericPhotoUploadScreen.tsx

@@ -0,0 +1,229 @@
+/**
+ * Generic Photo Upload Screen
+ * Used by wizard domain for ANY photo upload step
+ * NO feature-specific concepts (no partner, couple, etc.)
+ * Works for: couple features, face-swap, image-to-video, ANY photo upload need
+ */
+
+import React, { useMemo } from "react";
+import { View, TouchableOpacity, StyleSheet } from "react-native";
+import {
+  useAppDesignTokens,
+  ScreenLayout,
+  AtomicText,
+  AtomicIcon,
+  NavigationHeader,
+  InfoGrid,
+  type DesignTokens,
+  type InfoGridItem,
+} from "@umituz/react-native-design-system";
+import { PhotoUploadCard } from "../../../../../presentation/components";
+import type { UploadedImage } from "../../../../../presentation/hooks/generation/useAIGenerateState";
+import { usePhotoUploadState } from "../hooks/usePhotoUploadState";
+
+export interface PhotoUploadScreenTranslations {
+  readonly title: string;
+  readonly subtitle: string;
+  readonly continue: string;
+  readonly tapToUpload: string;
+  readonly selectPhoto: string;
+  readonly change: string;
+  readonly analyzing?: string;
+  readonly fileTooLarge: string;
+  readonly maxFileSize: string;
+  readonly error: string;
+  readonly uploadFailed: string;
+  readonly aiDisclosure?: string;
+}
+
+export interface PhotoUploadScreenConfig {
+  readonly showPhotoTips?: boolean;
+  readonly maxFileSizeMB?: number;
+}
+
+export interface PhotoUploadScreenProps {
+  readonly translations: PhotoUploadScreenTranslations;
+  readonly t: (key: string) => string;
+  readonly config?: PhotoUploadScreenConfig;
+  readonly onBack: () => void;
+  readonly onContinue: (image: UploadedImage) => void;
+  readonly existingImage?: UploadedImage | null;
+}
+
+const DEFAULT_CONFIG: PhotoUploadScreenConfig = {
+  showPhotoTips: true,
+  maxFileSizeMB: 10,
+};
+
+export const GenericPhotoUploadScreen: React.FC<PhotoUploadScreenProps> = ({
+  translations,
+  t,
+  config = DEFAULT_CONFIG,
+  onBack,
+  onContinue,
+  existingImage,
+}) => {
+  const tokens = useAppDesignTokens();
+
+  const { image, handlePickImage, canContinue } = usePhotoUploadState({
+    config: { maxFileSizeMB: config.maxFileSizeMB },
+    translations: {
+      fileTooLarge: translations.fileTooLarge,
+      maxFileSize: translations.maxFileSize,
+      error: translations.error,
+      uploadFailed: translations.uploadFailed,
+    },
+    initialImage: existingImage || undefined,
+  });
+
+  const handleContinuePress = () => {
+    if (!canContinue || !image) return;
+    onContinue(image);
+  };
+
+  const styles = useMemo(() => createStyles(tokens), [tokens]);
+  const showPhotoTips = config.showPhotoTips ?? true;
+
+  // Build photo tips items from translations
+  const photoTipsItems: InfoGridItem[] = useMemo(() => {
+    const tipKeys = [
+      { key: "photoUpload.tips.clearFace", icon: "Smile" },
+      { key: "photoUpload.tips.goodLighting", icon: "Sun" },
+      { key: "photoUpload.tips.recentPhoto", icon: "Clock" },
+      { key: "photoUpload.tips.noFilters", icon: "Image" },
+    ];
+    return tipKeys.map(({ key, icon }) => ({
+      text: t(key),
+      icon,
+    }));
+  }, [t]);
+
+  return (
+    <View style={[styles.container, { backgroundColor: tokens.colors.backgroundPrimary }]}>
+      <NavigationHeader
+        title={translations.title}
+        onBackPress={onBack}
+        rightElement={
+          <TouchableOpacity
+            onPress={handleContinuePress}
+            activeOpacity={0.7}
+            disabled={!canContinue || !image}
+            style={[
+              styles.continueButton,
+              {
+                backgroundColor: canContinue && image ? tokens.colors.primary : tokens.colors.surfaceVariant,
+                opacity: canContinue && image ? 1 : 0.5,
+              },
+            ]}
+          >
+            <AtomicText
+              type="bodyMedium"
+              style={[
+                styles.continueText,
+                { color: canContinue && image ? tokens.colors.onPrimary : tokens.colors.textSecondary },
+              ]}
+            >
+              {translations.continue}
+            </AtomicText>
+            <AtomicIcon
+              name="ChevronRight"
+              size="sm"
+              color={canContinue && image ? "onPrimary" : "textSecondary"}
+            />
+          </TouchableOpacity>
+        }
+      />
+      <ScreenLayout
+        edges={["left", "right"]}
+        backgroundColor="transparent"
+        scrollable={true}
+        keyboardAvoiding={true}
+        contentContainerStyle={styles.scrollContent}
+        hideScrollIndicator={true}
+      >
+        <AtomicText style={[styles.subtitle, { color: tokens.colors.textSecondary }]}>
+          {translations.subtitle}
+        </AtomicText>
+
+        {/* Photo Tips - InfoGrid version */}
+        {showPhotoTips && (
+          <View style={styles.tipsContainer}>
+            <InfoGrid
+              items={photoTipsItems}
+              columns={2}
+              title={t("photoUpload.tips.title")}
+              headerIcon="Lightbulb"
+            />
+          </View>
+        )}
+
+        <PhotoUploadCard
+          imageUri={image?.previewUrl || image?.uri || null}
+          onPress={handlePickImage}
+          isValidating={false}
+          isValid={null}
+          translations={{
+            tapToUpload: translations.tapToUpload,
+            selectPhoto: translations.selectPhoto,
+            change: translations.change,
+            analyzing: translations.analyzing,
+          }}
+        />
+
+        {translations.aiDisclosure && (
+          <View style={styles.disclosureContainer}>
+            <AtomicText
+              type="labelSmall"
+              style={[styles.disclosureText, { color: tokens.colors.textSecondary }]}
+            >
+              {translations.aiDisclosure}
+            </AtomicText>
+          </View>
+        )}
+      </ScreenLayout>
+    </View>
+  );
+};
+
+const createStyles = (tokens: DesignTokens) =>
+  StyleSheet.create({
+    container: {
+      flex: 1,
+    },
+    scrollContent: {
+      paddingBottom: 40,
+    },
+    subtitle: {
+      fontSize: 16,
+      textAlign: "center",
+      marginHorizontal: 24,
+      marginBottom: 24,
+    },
+    tipsContainer: {
+      marginHorizontal: 24,
+      marginBottom: 20,
+    },
+    continueButton: {
+      flexDirection: "row",
+      alignItems: "center",
+      paddingHorizontal: tokens.spacing.md,
+      paddingVertical: tokens.spacing.xs,
+      borderRadius: tokens.borders.radius.full,
+    },
+    continueText: {
+      fontWeight: "800",
+      marginRight: 4,
+    },
+    disclosureContainer: {
+      marginTop: 24,
+      marginHorizontal: 24,
+      padding: 16,
+      borderRadius: 12,
+      backgroundColor: tokens.colors.surfaceVariant + "40",
+    },
+    disclosureText: {
+      textAlign: "center",
+      lineHeight: 18,
+      opacity: 0.8,
+    },
+  });

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

@@ -1 +1,7 @@
 export { GeneratingScreen } from "./GeneratingScreen";
+export { GenericPhotoUploadScreen } from "./GenericPhotoUploadScreen";
+export type {
+  PhotoUploadScreenTranslations,
+  PhotoUploadScreenConfig,
+  PhotoUploadScreenProps,
+} from "./GenericPhotoUploadScreen";

package/src/domains/scenarios/domain/Scenario.ts

@@ -261,6 +261,7 @@ export enum ScenarioId {
   NEW_YEARS = "new_years",
   VALENTINES = "valentines",
   BIRTHDAY = "birthday",
+  HALLOWEEN_DUO = "halloween_duo",
 
   // Home Life
   MORNING_COFFEE = "morning_coffee",

package/src/domains/scenarios/infrastructure/data/celebration-scenarios.ts

@@ -58,7 +58,7 @@ export const CELEBRATION_SCENARIOS: Omit<Scenario, 'outputType' | 'category'>[]
     ),
   },
   {
-    id: ScenarioId.HALLOWEEN,
+    id: ScenarioId.HALLOWEEN_DUO,
     title: "Halloween Duo",
     description: "Spooky and sweet",
     icon: "🎃",

package/src/domains/scenarios/infrastructure/data/connection-scenarios.ts

@@ -92,7 +92,7 @@ export const CONNECTION_SCENARIOS: Omit<Scenario, 'outputType' | 'category'>[] =
     description: "Love that deepens with time",
     icon: "🌳",
     imageUrl:
-      "https://images.unsplash.com/photo-1503454537195-1dcabb73ffb9?w=800",
+      "https://images.unsplash.com/photo-1447005497901-b3e9ee359928?w=800",
     aiPrompt:
       "A couple in their older years but with the same spark in their eyes, looking at a photo album of their younger selves, looking at the camera with wise and deeply happy smiles, warm sun-drenched living room with mementos, celebrating a lifetime of growth",
     storyTemplate: createStoryTemplate(

package/src/domains/scenarios/infrastructure/data/daily-essence-scenarios.ts

@@ -8,7 +8,7 @@ export const DAILY_ESSENCE_SCENARIOS: Omit<Scenario, 'outputType' | 'category'>[
     description: "Moving in together",
     icon: "📦",
     imageUrl:
-      "https://images.unsplash.com/photo-1583214532529-65d194759083?w=800",
+      "https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=800",
     aiPrompt:
       "A couple in an empty living room surrounded by cardboard boxes, both looking at the camera with exhausted but happy smiles, eating pizza directly from the box on the floor, messy hair, sunlight streaming through bare windows, sense of new beginnings and shared excitement",
     storyTemplate: createStoryTemplate(
@@ -22,7 +22,7 @@ export const DAILY_ESSENCE_SCENARIOS: Omit<Scenario, 'outputType' | 'category'>[
     description: "Fun in the mundane",
     icon: "🧺",
     imageUrl:
-      "https://images.unsplash.com/photo-1517677208171-0bc6725a3e60?w=800",
+      "https://images.unsplash.com/photo-1545173168-9f1947eebb7f?w=800",
     aiPrompt:
       "A couple doing laundry together in a bright laundry room, both looking at the camera with playful laughs, throwing a clean sock at each other, piles of colorful clothes around, warm domestic atmosphere, authentic joy in a daily chore",
     storyTemplate: createStoryTemplate(

package/src/domains/scenarios/infrastructure/data/iconic-moments-scenarios.ts

@@ -78,7 +78,7 @@ export const ICONIC_MOMENTS_SCENARIOS: Omit<Scenario, 'outputType' | 'category'>
     description: "High-flying duo",
     icon: "🏗️",
     imageUrl:
-      "https://images.unsplash.com/photo-1449156003946-3197ae0107cb?w=800",
+      "https://images.unsplash.com/photo-1480714378408-67cf0d13bc1b?w=800",
     aiPrompt:
       "A couple sitting together on a steel beam high above a city skyline, recreating the iconic 1932 photo, both looking at camera with relaxed daring smiles, legs dangling over the edge, misty city and skyscrapers in background, sepia-toned vintage photography, adventurous and brave",
     storyTemplate: createStoryTemplate(

package/src/domains/scenarios/infrastructure/data/music-scenarios.ts

@@ -63,7 +63,7 @@ export const MUSIC_SCENARIOS: Omit<Scenario, 'outputType' | 'category'>[] = [
     description: "Soulful rhythm",
     icon: "🎷",
     imageUrl:
-      "https://images.unsplash.com/photo-1415202354747-405cbdec5de7?w=800",
+      "https://images.unsplash.com/photo-1511192336575-5a79af67a629?w=800",
     aiPrompt:
       "A couple in a smoky dark jazz club, man playing a saxophone, woman leaning against a piano looking at camera with a soulful expression, wearing elegant evening attire, blue and amber spotlight lighting, intimate and moody",
     storyTemplate: createStoryTemplate(

package/src/domains/scenarios/infrastructure/data/steampunk-scenarios.ts

@@ -8,7 +8,7 @@ export const STEAMPUNK_SCENARIOS: Omit<Scenario, 'outputType' | 'category'>[] =
     description: "Commanders of the clouds",
     icon: "🎈",
     imageUrl:
-      "https://images.unsplash.com/photo-1449156003946-3197ae0107cb?w=800",
+      "https://images.unsplash.com/photo-1534447677768-be436bb09401?w=800",
     aiPrompt:
       "A couple as captains on the bridge of a massive brass-plated airship, looking at the camera with confident adventurous smiles, wearing leather aviator coats and intricate brass goggles, steering wheels and glowing pressure gauges in background, clouds and sunset outside the windows, cinematic steampunk aesthetic",
     storyTemplate: createStoryTemplate(

package/src/domains/scenarios/infrastructure/data/stolen-moments-scenarios.ts

@@ -36,7 +36,7 @@ export const STOLEN_MOMENTS_SCENARIOS: Omit<Scenario, 'outputType' | 'category'>
     description: "Close enough to touch",
     icon: "🛗",
     imageUrl:
-      "https://images.unsplash.com/photo-1449156003946-3197ae0107cb?w=800",
+      "https://images.unsplash.com/photo-1527684651001-731c474bbb5a?w=800",
     aiPrompt:
       "A couple standing very close in a modern glass elevator, man behind woman leaning in towards her neck, woman looking at the camera through the mirror reflection with a breathless expression, silver metal surfaces and digital floor numbers in background, high-tension proximity",
     storyTemplate: createStoryTemplate(

package/src/domains/scenarios/infrastructure/data/surreal-dreams-scenarios.ts

@@ -36,7 +36,7 @@ export const SURREAL_DREAMS_SCENARIOS: Omit<Scenario, 'outputType' | 'category'>
     description: "Symmetry of love",
     icon: "🪞",
     imageUrl:
-      "https://images.unsplash.com/photo-1481349518771-2dc0feed76ad?w=800",
+      "https://images.unsplash.com/photo-1518837695005-2083093ee35b?w=800",
     aiPrompt:
       "A couple standing on a perfectly reflective black crystal floor, surrounded by giant floating mirrors that show different versions of their future together, looking at their reflections with profound smiles, dark void environment with glowing crystalline structures, highly artistic and surreal",
     storyTemplate: createStoryTemplate(