@umituz/react-native-ai-generation-content 1.23.4 → 1.24.1

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

@@ -0,0 +1,226 @@
+/**
+ * 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,
+  type DesignTokens,
+} from "@umituz/react-native-design-system";
+import { PhotoUploadCard } from "../../../../presentation/components";
+import { FaceDetectionToggle } from "../../../../domains/face-detection";
+import type { UploadedImage } from "../../../../features/partner-upload/domain/types";
+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 showFaceDetection?: boolean;
+  readonly showPhotoTips?: boolean;
+  readonly maxFileSizeMB?: number;
+}
+
+export interface PhotoUploadScreenProps {
+  readonly translations: PhotoUploadScreenTranslations;
+  readonly t: (key: string) => string;
+  readonly config?: PhotoUploadScreenConfig;
+  readonly faceDetectionEnabled?: boolean;
+  readonly onFaceDetectionToggle?: (enabled: boolean) => void;
+  readonly onBack: () => void;
+  readonly onContinue: (image: UploadedImage) => void;
+}
+
+const DEFAULT_CONFIG: PhotoUploadScreenConfig = {
+  showFaceDetection: false,
+  showPhotoTips: true,
+  maxFileSizeMB: 10,
+};
+
+export const GenericPhotoUploadScreen: React.FC<PhotoUploadScreenProps> = ({
+  translations,
+  t,
+  config = DEFAULT_CONFIG,
+  faceDetectionEnabled = false,
+  onFaceDetectionToggle,
+  onBack,
+  onContinue,
+}) => {
+  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,
+    },
+  });
+
+  const handleContinuePress = () => {
+    if (!canContinue || !image) return;
+    onContinue(image);
+  };
+
+  const styles = useMemo(() => createStyles(tokens), [tokens]);
+  const showFaceDetection = config.showFaceDetection ?? false;
+  const showPhotoTips = config.showPhotoTips ?? true;
+
+  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="arrow-forward"
+              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 - Inline simple version */}
+        {showPhotoTips && (
+          <View style={[styles.tipsContainer, { backgroundColor: tokens.colors.surfaceVariant + "40" }]}>
+            <AtomicText type="labelSmall" style={{ color: tokens.colors.textSecondary, textAlign: "center" }}>
+              {t("photoUpload.tips")}
+            </AtomicText>
+          </View>
+        )}
+
+        {showFaceDetection && onFaceDetectionToggle && (
+          <FaceDetectionToggle
+            isEnabled={faceDetectionEnabled}
+            onToggle={onFaceDetectionToggle}
+            label={t("photoUpload.faceDetection")}
+            hidden={true}
+          />
+        )}
+
+        <PhotoUploadCard
+          imageUri={image?.previewUrl || 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: 16,
+      padding: 12,
+      borderRadius: 8,
+    },
+    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/wizard/presentation/steps/PhotoUploadStep.tsx

@@ -0,0 +1,67 @@
+/**
+ * Generic Photo Upload Step
+ * Used by ALL features that need photo uploads
+ * (couple, face-swap, image-to-video, etc.)
+ */
+
+import React from "react";
+import type { PhotoUploadStepConfig } from "../../domain/entities/wizard-config.types";
+
+// Use wizard domain's generic photo upload screen - NO feature-specific references!
+import { GenericPhotoUploadScreen } from "../screens/GenericPhotoUploadScreen";
+import type { UploadedImage } from "../../../../features/partner-upload/domain/types";
+
+export interface PhotoUploadStepProps {
+  readonly config: PhotoUploadStepConfig;
+  readonly onContinue: (image: UploadedImage) => void;
+  readonly onBack: () => void;
+  readonly t: (key: string) => string;
+  readonly translations?: Record<string, string>;
+}
+
+export const PhotoUploadStep: React.FC<PhotoUploadStepProps> = ({
+  config,
+  onContinue,
+  onBack,
+  t,
+  translations,
+}) => {
+  if (typeof __DEV__ !== "undefined" && __DEV__) {
+    console.log("[PhotoUploadStep] Rendering", {
+      stepId: config.id,
+      label: config.label,
+    });
+  }
+
+  return (
+    <GenericPhotoUploadScreen
+      translations={{
+        title: config.titleKey ? t(config.titleKey) : config.label || "Upload Photo",
+        subtitle: config.subtitleKey ? t(config.subtitleKey) : t("photoUpload.subtitle"),
+        continue: t("common.continue"),
+        tapToUpload: t("photoUpload.tapToUpload"),
+        selectPhoto: t("photoUpload.selectPhoto"),
+        change: t("common.change"),
+        analyzing: t("photoUpload.analyzing"),
+        fileTooLarge: t("common.errors.file_too_large"),
+        maxFileSize: t("common.errors.max_file_size"),
+        error: t("common.error"),
+        uploadFailed: t("common.errors.upload_failed"),
+        aiDisclosure: t("photoUpload.aiDisclosure"),
+      }}
+      t={t}
+      config={{
+        showFaceDetection: config.showFaceDetection ?? false,
+        showPhotoTips: config.showPhotoTips ?? true,
+        maxFileSizeMB: config.maxFileSizeMB ?? 10,
+      }}
+      onBack={onBack}
+      onContinue={(image) => {
+        if (typeof __DEV__ !== "undefined" && __DEV__) {
+          console.log("[PhotoUploadStep] Photo uploaded", { stepId: config.id });
+        }
+        onContinue(image);
+      }}
+    />
+  );
+};

package/src/domains/wizard/presentation/steps/SelectionStep.tsx

@@ -0,0 +1,244 @@
+/**
+ * Generic Selection Step
+ * Used by ANY feature that needs selection
+ * (style, duration, aspect ratio, quality, etc.)
+ */
+
+import React, { useState, useCallback } from "react";
+import { View, StyleSheet, TouchableOpacity, ScrollView } from "react-native";
+import { useAppDesignTokens, AtomicText } from "@umituz/react-native-design-system";
+import type { SelectionStepConfig } from "../../domain/entities/wizard-config.types";
+
+export interface SelectionStepProps {
+  readonly config: SelectionStepConfig;
+  readonly onContinue: (selected: string | string[]) => void;
+  readonly onBack: () => void;
+  readonly t: (key: string) => string;
+  readonly translations?: Record<string, string>;
+}
+
+export const SelectionStep: React.FC<SelectionStepProps> = ({
+  config,
+  onContinue,
+  onBack,
+  t,
+  translations,
+}) => {
+  const tokens = useAppDesignTokens();
+  const [selectedIds, setSelectedIds] = useState<string[]>(
+    config.defaultValue
+      ? Array.isArray(config.defaultValue)
+        ? config.defaultValue
+        : [config.defaultValue]
+      : [],
+  );
+
+  if (typeof __DEV__ !== "undefined" && __DEV__) {
+    console.log("[SelectionStep] Rendering", {
+      stepId: config.id,
+      selectionType: config.selectionType,
+      multiSelect: config.multiSelect,
+      selectedCount: selectedIds.length,
+    });
+  }
+
+  const handleOptionPress = useCallback(
+    (optionId: string) => {
+      if (config.multiSelect) {
+        // Multi-select: toggle option
+        setSelectedIds((prev) => {
+          if (prev.includes(optionId)) {
+            return prev.filter((id) => id !== optionId);
+          }
+          return [...prev, optionId];
+        });
+      } else {
+        // Single-select: replace selection
+        setSelectedIds([optionId]);
+      }
+    },
+    [config.multiSelect],
+  );
+
+  const handleContinue = useCallback(() => {
+    if (selectedIds.length === 0) {
+      return; // Don't allow continue without selection
+    }
+
+    if (typeof __DEV__ !== "undefined" && __DEV__) {
+      console.log("[SelectionStep] Continue", {
+        stepId: config.id,
+        selected: config.multiSelect ? selectedIds : selectedIds[0],
+      });
+    }
+
+    // Return single value for single-select, array for multi-select
+    onContinue(config.multiSelect ? selectedIds : selectedIds[0]);
+  }, [selectedIds, config, onContinue]);
+
+  return (
+    <View style={[styles.container, { backgroundColor: tokens.colors.backgroundPrimary }]}>
+      {/* Header */}
+      <View style={styles.header}>
+        <TouchableOpacity onPress={onBack} style={styles.backButton}>
+          <AtomicText type="body">{t("common.back")}</AtomicText>
+        </TouchableOpacity>
+      </View>
+
+      {/* Content */}
+      <ScrollView style={styles.content}>
+        {/* Title */}
+        {config.titleKey && (
+          <AtomicText type="heading2" style={styles.title}>
+            {t(config.titleKey)}
+          </AtomicText>
+        )}
+
+        {/* Subtitle */}
+        {config.subtitleKey && (
+          <AtomicText type="body" style={styles.subtitle}>
+            {t(config.subtitleKey)}
+          </AtomicText>
+        )}
+
+        {/* Options */}
+        <View style={styles.optionsContainer}>
+          {config.options.map((option) => {
+            const isSelected = selectedIds.includes(option.id);
+            return (
+              <TouchableOpacity
+                key={option.id}
+                style={[
+                  styles.optionCard,
+                  {
+                    backgroundColor: isSelected
+                      ? tokens.colors.primaryContainer
+                      : tokens.colors.backgroundSecondary,
+                    borderColor: isSelected ? tokens.colors.primary : tokens.colors.border,
+                  },
+                ]}
+                onPress={() => handleOptionPress(option.id)}
+              >
+                {/* Option Icon (if provided) */}
+                {option.icon && (
+                  <View style={styles.iconContainer}>
+                    <AtomicText type="heading3">{option.icon}</AtomicText>
+                  </View>
+                )}
+
+                {/* Option Label */}
+                <AtomicText
+                  type="body"
+                  style={[
+                    styles.optionLabel,
+                    {
+                      color: isSelected ? tokens.colors.onPrimaryContainer : tokens.colors.textPrimary,
+                    },
+                  ]}
+                >
+                  {option.label}
+                </AtomicText>
+
+                {/* Selection Indicator */}
+                {isSelected && (
+                  <View
+                    style={[
+                      styles.selectedIndicator,
+                      {
+                        backgroundColor: tokens.colors.primary,
+                      },
+                    ]}
+                  >
+                    <AtomicText type="caption" style={{ color: tokens.colors.textOnPrimary }}>
+                      ✓
+                    </AtomicText>
+                  </View>
+                )}
+              </TouchableOpacity>
+            );
+          })}
+        </View>
+      </ScrollView>
+
+      {/* Continue Button */}
+      <View style={styles.footer}>
+        <TouchableOpacity
+          style={[
+            styles.continueButton,
+            {
+              backgroundColor: selectedIds.length > 0 ? tokens.colors.primary : tokens.colors.disabled,
+            },
+          ]}
+          onPress={handleContinue}
+          disabled={selectedIds.length === 0}
+        >
+          <AtomicText
+            type="buttonLarge"
+            style={{
+              color: selectedIds.length > 0 ? tokens.colors.textOnPrimary : tokens.colors.textDisabled,
+            }}
+          >
+            {t("common.continue")}
+          </AtomicText>
+        </TouchableOpacity>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  header: {
+    padding: 16,
+  },
+  backButton: {
+    alignSelf: "flex-start",
+  },
+  content: {
+    flex: 1,
+    padding: 16,
+  },
+  title: {
+    marginBottom: 8,
+  },
+  subtitle: {
+    marginBottom: 24,
+  },
+  optionsContainer: {
+    gap: 12,
+  },
+  optionCard: {
+    padding: 16,
+    borderRadius: 12,
+    borderWidth: 2,
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 12,
+  },
+  iconContainer: {
+    width: 40,
+    height: 40,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  optionLabel: {
+    flex: 1,
+  },
+  selectedIndicator: {
+    width: 24,
+    height: 24,
+    borderRadius: 12,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  footer: {
+    padding: 16,
+  },
+  continueButton: {
+    padding: 16,
+    borderRadius: 8,
+    alignItems: "center",
+  },
+});