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

package/package.json

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