@umituz/react-native-ai-generation-content 1.36.2 → 1.37.1

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

@@ -1,17 +1,14 @@
 /**
  * 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 { View, StyleSheet } from "react-native";
 import {
   useAppDesignTokens,
   ScreenLayout,
   AtomicText,
-  AtomicIcon,
   NavigationHeader,
   InfoGrid,
   type DesignTokens,
@@ -20,6 +17,7 @@ import {
 import { PhotoUploadCard } from "../../../../../presentation/components";
 import type { UploadedImage } from "../../../../../presentation/hooks/generation/useAIGenerateState";
 import { usePhotoUploadState } from "../hooks/usePhotoUploadState";
+import { WizardContinueButton } from "../components/WizardContinueButton";
 
 export interface PhotoUploadScreenTranslations {
   readonly title: string;
@@ -51,10 +49,7 @@ export interface PhotoUploadScreenProps {
   readonly stepId?: string;
 }
 
-const DEFAULT_CONFIG: PhotoUploadScreenConfig = {
-  showPhotoTips: true,
-  maxFileSizeMB: 10,
-};
+const DEFAULT_CONFIG: PhotoUploadScreenConfig = { showPhotoTips: true, maxFileSizeMB: 10 };
 
 export const GenericPhotoUploadScreen: React.FC<PhotoUploadScreenProps> = ({
   translations,
@@ -66,7 +61,6 @@ export const GenericPhotoUploadScreen: React.FC<PhotoUploadScreenProps> = ({
   stepId,
 }) => {
   const tokens = useAppDesignTokens();
-
   const { image, handlePickImage, canContinue } = usePhotoUploadState({
     config: { maxFileSizeMB: config.maxFileSizeMB },
     translations: {
@@ -87,7 +81,6 @@ export const GenericPhotoUploadScreen: React.FC<PhotoUploadScreenProps> = ({
   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: "happy-outline" },
@@ -95,10 +88,7 @@ export const GenericPhotoUploadScreen: React.FC<PhotoUploadScreenProps> = ({
       { key: "photoUpload.tips.recentPhoto", icon: "time-outline" },
       { key: "photoUpload.tips.noFilters", icon: "image-outline" },
     ];
-    return tipKeys.map(({ key, icon }) => ({
-      text: t(key),
-      icon,
-    }));
+    return tipKeys.map(({ key, icon }) => ({ text: t(key), icon }));
   }, [t]);
 
   return (
@@ -107,33 +97,11 @@ export const GenericPhotoUploadScreen: React.FC<PhotoUploadScreenProps> = ({
         title={translations.title}
         onBackPress={onBack}
         rightElement={
-          <TouchableOpacity
+          <WizardContinueButton
+            canContinue={canContinue && !!image}
             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="chevron-forward-outline"
-              size="sm"
-              color={canContinue && image ? "onPrimary" : "textSecondary"}
-            />
-          </TouchableOpacity>
+            label={translations.continue}
+          />
         }
       />
       <ScreenLayout
@@ -148,15 +116,9 @@ export const GenericPhotoUploadScreen: React.FC<PhotoUploadScreenProps> = ({
           {translations.subtitle}
         </AtomicText>
 
-        {/* Photo Tips - InfoGrid version */}
         {showPhotoTips && (
           <View style={styles.tipsContainer}>
-            <InfoGrid
-              items={photoTipsItems}
-              columns={2}
-              title={t("photoUpload.tips.title")}
-              headerIcon="bulb-outline"
-            />
+            <InfoGrid items={photoTipsItems} columns={2} title={t("photoUpload.tips.title")} headerIcon="bulb-outline" />
           </View>
         )}
 
@@ -175,10 +137,7 @@ export const GenericPhotoUploadScreen: React.FC<PhotoUploadScreenProps> = ({
 
         {translations.aiDisclosure && (
           <View style={styles.disclosureContainer}>
-            <AtomicText
-              type="labelSmall"
-              style={[styles.disclosureText, { color: tokens.colors.textSecondary }]}
-            >
+            <AtomicText type="labelSmall" style={[styles.disclosureText, { color: tokens.colors.textSecondary }]}>
               {translations.aiDisclosure}
             </AtomicText>
           </View>
@@ -190,33 +149,10 @@ export const GenericPhotoUploadScreen: React.FC<PhotoUploadScreenProps> = ({
 
 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,
-    },
+    container: { flex: 1 },
+    scrollContent: { paddingBottom: 40 },
+    subtitle: { fontSize: 16, textAlign: "center", marginHorizontal: 24, marginBottom: 24 },
+    tipsContainer: { marginHorizontal: 24, marginBottom: 20 },
     disclosureContainer: {
       marginTop: 24,
       marginHorizontal: 24,
@@ -224,9 +160,5 @@ const createStyles = (tokens: DesignTokens) =>
       borderRadius: 12,
       backgroundColor: tokens.colors.surfaceVariant + "40",
     },
-    disclosureText: {
-      textAlign: "center",
-      lineHeight: 18,
-      opacity: 0.8,
-    },
+    disclosureText: { textAlign: "center", lineHeight: 18, opacity: 0.8 },
   });

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

@@ -1,7 +1,6 @@
 /**
  * SelectionScreen
  * Generic selection step for wizard flows (duration, style, etc.)
- * Uses design system: NavigationHeader + ScreenLayout
  */
 
 import React, { useState, useCallback, useMemo } from "react";
@@ -14,7 +13,8 @@ import {
   NavigationHeader,
   type DesignTokens,
 } from "@umituz/react-native-design-system";
-import type { SelectionScreenProps } from "./SelectionScreen.types";
+import type { SelectionScreenProps, SelectionOption } from "./SelectionScreen.types";
+import { WizardContinueButton } from "../components/WizardContinueButton";
 
 export type {
   SelectionOption,
@@ -41,129 +41,74 @@ export const SelectionScreen: React.FC<SelectionScreenProps> = ({
 
   const isMultiSelect = config?.multiSelect ?? false;
   const isRequired = config?.required ?? true;
-
   const canContinue = isRequired
-    ? isMultiSelect
-      ? (selected as string[]).length > 0
-      : selected !== ""
+    ? isMultiSelect ? (selected as string[]).length > 0 : selected !== ""
     : true;
 
-  const handleSelect = useCallback(
-    (optionId: string) => {
-      if (isMultiSelect) {
-        setSelected((prev) => {
-          const arr = prev as string[];
-          return arr.includes(optionId)
-            ? arr.filter((id) => id !== optionId)
-            : [...arr, optionId];
-        });
-      } else {
-        setSelected(optionId);
-      }
-    },
-    [isMultiSelect],
-  );
+  const handleSelect = useCallback((optionId: string) => {
+    if (isMultiSelect) {
+      setSelected((prev) => {
+        const arr = prev as string[];
+        return arr.includes(optionId) ? arr.filter((id) => id !== optionId) : [...arr, optionId];
+      });
+    } else {
+      setSelected(optionId);
+    }
+  }, [isMultiSelect]);
 
   const handleContinue = useCallback(() => {
-    if (canContinue) {
-      onContinue(selected);
-    }
+    if (canContinue) onContinue(selected);
   }, [canContinue, selected, onContinue]);
 
   const isOptionSelected = useCallback(
-    (optionId: string): boolean => {
-      if (isMultiSelect) {
-        return (selected as string[]).includes(optionId);
-      }
-      return selected === optionId;
-    },
-    [isMultiSelect, selected],
+    (optionId: string): boolean =>
+      isMultiSelect ? (selected as string[]).includes(optionId) : selected === optionId,
+    [isMultiSelect, selected]
   );
 
   const styles = useMemo(() => createStyles(tokens), [tokens]);
 
+  const renderOption = (option: SelectionOption) => {
+    const isSelected = isOptionSelected(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={() => handleSelect(option.id)}
+        activeOpacity={0.7}
+      >
+        {option.icon ? <AtomicIcon name={option.icon} size="lg" color={isSelected ? "primary" : "textSecondary"} /> : null}
+        <AtomicText type="labelLarge" color={isSelected ? "primary" : "textPrimary"} style={styles.optionLabel}>
+          {option.label}
+        </AtomicText>
+        {isSelected ? (
+          <View style={[styles.checkmark, { backgroundColor: tokens.colors.primary }]}>
+            <AtomicIcon name="checkmark" size="xs" color="onPrimary" />
+          </View>
+        ) : null}
+      </TouchableOpacity>
+    );
+  };
+
   return (
     <View style={{ flex: 1, backgroundColor: tokens.colors.backgroundPrimary }}>
       <NavigationHeader
         title=""
         onBackPress={onBack}
         rightElement={
-          <TouchableOpacity
-            onPress={handleContinue}
-            activeOpacity={0.7}
-            disabled={!canContinue}
-            style={[
-              styles.continueButton,
-              {
-                backgroundColor: canContinue ? tokens.colors.primary : tokens.colors.surfaceVariant,
-                opacity: canContinue ? 1 : 0.5,
-              },
-            ]}
-          >
-            <AtomicText
-              type="bodyMedium"
-              style={[
-                styles.continueText,
-                { color: canContinue ? tokens.colors.onPrimary : tokens.colors.textSecondary },
-              ]}
-            >
-              {translations.continueButton}
-            </AtomicText>
-            <AtomicIcon
-              name="arrow-forward"
-              size="sm"
-              color={canContinue ? "onPrimary" : "textSecondary"}
-            />
-          </TouchableOpacity>
+          <WizardContinueButton canContinue={canContinue} onPress={handleContinue} label={translations.continueButton} icon="arrow-forward" />
         }
       />
-      <ScreenLayout
-        scrollable={true}
-        edges={["left", "right"]}
-        hideScrollIndicator={true}
-        contentContainerStyle={styles.scrollContent}
-      >
-        <AtomicText type="headlineMedium" color="textPrimary" style={styles.title}>
-          {translations.title}
-        </AtomicText>
-
-        {translations.subtitle ? (
-          <AtomicText type="bodyMedium" color="textSecondary" style={styles.subtitle}>
-            {translations.subtitle}
-          </AtomicText>
-        ) : null}
-
-        <View style={styles.optionsGrid}>
-          {options.map((option) => {
-            const isSelected = isOptionSelected(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={() => handleSelect(option.id)}
-                activeOpacity={0.7}
-              >
-                {option.icon ? (
-                  <AtomicIcon name={option.icon} size="lg" color={isSelected ? "primary" : "textSecondary"} />
-                ) : null}
-                <AtomicText type="labelLarge" color={isSelected ? "primary" : "textPrimary"} style={styles.optionLabel}>
-                  {option.label}
-                </AtomicText>
-                {isSelected ? (
-                  <View style={[styles.checkmark, { backgroundColor: tokens.colors.primary }]}>
-                    <AtomicIcon name="checkmark" size="xs" color="onPrimary" />
-                  </View>
-                ) : null}
-              </TouchableOpacity>
-            );
-          })}
-        </View>
+      <ScreenLayout scrollable={true} edges={["left", "right"]} hideScrollIndicator={true} contentContainerStyle={styles.scrollContent}>
+        <AtomicText type="headlineMedium" color="textPrimary" style={styles.title}>{translations.title}</AtomicText>
+        {translations.subtitle ? <AtomicText type="bodyMedium" color="textSecondary" style={styles.subtitle}>{translations.subtitle}</AtomicText> : null}
+        <View style={styles.optionsGrid}>{options.map(renderOption)}</View>
       </ScreenLayout>
     </View>
   );
@@ -171,21 +116,10 @@ export const SelectionScreen: React.FC<SelectionScreenProps> = ({
 
 const createStyles = (tokens: DesignTokens) =>
   StyleSheet.create({
-    scrollContent: {
-      paddingHorizontal: tokens.spacing.lg,
-      paddingBottom: 40,
-    },
-    title: {
-      marginBottom: tokens.spacing.sm,
-    },
-    subtitle: {
-      marginBottom: tokens.spacing.lg,
-    },
-    optionsGrid: {
-      flexDirection: "row",
-      flexWrap: "wrap",
-      gap: tokens.spacing.sm,
-    },
+    scrollContent: { paddingHorizontal: tokens.spacing.lg, paddingBottom: 40 },
+    title: { marginBottom: tokens.spacing.sm },
+    subtitle: { marginBottom: tokens.spacing.lg },
+    optionsGrid: { flexDirection: "row", flexWrap: "wrap", gap: tokens.spacing.sm },
     optionCard: {
       flex: 1,
       minWidth: "45%",
@@ -197,9 +131,7 @@ const createStyles = (tokens: DesignTokens) =>
       gap: tokens.spacing.xs,
       position: "relative",
     },
-    optionLabel: {
-      textAlign: "center",
-    },
+    optionLabel: { textAlign: "center" },
     checkmark: {
       position: "absolute",
       top: tokens.spacing.xs,
@@ -210,15 +142,4 @@ const createStyles = (tokens: DesignTokens) =>
       alignItems: "center",
       justifyContent: "center",
     },
-    continueButton: {
-      flexDirection: "row",
-      alignItems: "center",
-      paddingHorizontal: tokens.spacing.md,
-      paddingVertical: tokens.spacing.xs,
-      borderRadius: tokens.borders.radius.full,
-    },
-    continueText: {
-      fontWeight: "800",
-      marginRight: 4,
-    },
   });

package/src/domains/result-preview/presentation/components/GenerationErrorScreen.tsx

@@ -14,59 +14,31 @@ import {
   type DesignTokens,
 } from "@umituz/react-native-design-system";
 
-/**
- * Error screen translations
- */
 export interface GenerationErrorTranslations {
-  /** Error title */
   readonly title: string;
-  /** Try again button */
   readonly tryAgain: string;
-  /** Choose another button */
   readonly chooseAnother: string;
-  /** Credit info message */
   readonly noCreditCharged: string;
 }
 
-/**
- * Error screen config
- */
 export interface GenerationErrorConfig {
-  /** Show credit info message */
   readonly showCreditInfo?: boolean;
-  /** Icon name */
   readonly iconName?: string;
-  /** Icon size */
   readonly iconSize?: number;
 }
 
-/**
- * Error screen props
- */
 export interface GenerationErrorScreenProps {
-  /** Error message to display */
   readonly errorMessage?: string;
-  /** Translations */
   readonly translations: GenerationErrorTranslations;
-  /** Configuration */
   readonly config?: GenerationErrorConfig;
-  /** Try again callback */
   readonly onTryAgain: () => void;
-  /** Choose another scenario callback */
   readonly onChooseAnother: () => void;
-  /** Optional premium button text */
   readonly premiumButtonText?: string;
-  /** Optional premium button callback */
   readonly onGoPremium?: () => void;
-  /** Optional custom style */
   readonly style?: StyleProp<ViewStyle>;
 }
 
-const DEFAULT_CONFIG: GenerationErrorConfig = {
-  showCreditInfo: true,
-  iconName: "alert-circle",
-  iconSize: 56,
-};
+const DEFAULT_CONFIG: GenerationErrorConfig = { showCreditInfo: true, iconName: "alert-circle", iconSize: 56 };
 
 export const GenerationErrorScreen: React.FC<GenerationErrorScreenProps> = ({
   errorMessage,
@@ -83,43 +55,19 @@ export const GenerationErrorScreen: React.FC<GenerationErrorScreenProps> = ({
   const mergedConfig = { ...DEFAULT_CONFIG, ...config };
 
   return (
-    <View
-      style={[
-        styles.container,
-        { backgroundColor: tokens.colors.backgroundPrimary },
-        style,
-      ]}
-    >
-      <ScreenLayout
-        scrollable={false}
-        edges={["top", "bottom"]}
-        backgroundColor="transparent"
-      >
+    <View style={[styles.container, { backgroundColor: tokens.colors.backgroundPrimary }, style]}>
+      <ScreenLayout scrollable={false} edges={["top", "bottom"]} backgroundColor="transparent">
         <View style={styles.content}>
           <View style={styles.iconContainer}>
-            <AtomicIcon
-              name={mergedConfig.iconName || "alert-circle"}
-              size={mergedConfig.iconSize || 56}
-              customColor={tokens.colors.error}
-            />
+            <AtomicIcon name={mergedConfig.iconName || "alert-circle"} size={mergedConfig.iconSize || 56} customColor={tokens.colors.error} />
           </View>
-
           <AtomicText style={styles.title}>{translations.title}</AtomicText>
-
-          <AtomicText style={styles.message}>
-            {errorMessage || translations.title}
-          </AtomicText>
+          <AtomicText style={styles.message}>{errorMessage || translations.title}</AtomicText>
 
           {mergedConfig.showCreditInfo && (
             <View style={styles.infoContainer}>
-              <AtomicIcon
-                name="information-circle-outline"
-                size={16}
-                customColor={tokens.colors.textSecondary}
-              />
-              <AtomicText style={styles.infoText}>
-                {translations.noCreditCharged}
-              </AtomicText>
+              <AtomicIcon name="information-circle-outline" size={16} customColor={tokens.colors.textSecondary} />
+              <AtomicText style={styles.infoText}>{translations.noCreditCharged}</AtomicText>
             </View>
           )}
 
@@ -127,15 +75,8 @@ export const GenerationErrorScreen: React.FC<GenerationErrorScreenProps> = ({
 
           <View style={styles.actionsContainer}>
             {onGoPremium && premiumButtonText && (
-              <AtomicButton
-                title={premiumButtonText}
-                onPress={onGoPremium}
-                variant="primary"
-                size="lg"
-                fullWidth
-              />
+              <AtomicButton title={premiumButtonText} onPress={onGoPremium} variant="primary" size="lg" fullWidth />
             )}
-
             <AtomicButton
               title={translations.tryAgain}
               onPress={onTryAgain}
@@ -143,15 +84,8 @@ export const GenerationErrorScreen: React.FC<GenerationErrorScreenProps> = ({
               size="lg"
               fullWidth
             />
-
             <View style={styles.secondaryButtonContainer}>
-              <AtomicButton
-                title={translations.chooseAnother}
-                onPress={onChooseAnother}
-                variant="text"
-                size="md"
-                fullWidth
-              />
+              <AtomicButton title={translations.chooseAnother} onPress={onChooseAnother} variant="text" size="md" fullWidth />
             </View>
           </View>
         </View>
@@ -162,51 +96,14 @@ export const GenerationErrorScreen: React.FC<GenerationErrorScreenProps> = ({
 
 const createStyles = (tokens: DesignTokens) =>
   StyleSheet.create({
-    container: {
-      flex: 1,
-    },
-    content: {
-      flex: 1,
-      alignItems: "center",
-      paddingHorizontal: 32,
-      paddingTop: 80,
-      paddingBottom: 40,
-    },
-    iconContainer: {
-      marginBottom: 24,
-    },
-    title: {
-      ...tokens.typography.headingMedium,
-      color: tokens.colors.textPrimary,
-      fontWeight: "700",
-      marginBottom: 12,
-      textAlign: "center",
-    },
-    message: {
-      ...tokens.typography.bodyMedium,
-      color: tokens.colors.textSecondary,
-      textAlign: "center",
-      lineHeight: 22,
-      marginBottom: 24,
-    },
-    infoContainer: {
-      flexDirection: "row",
-      alignItems: "center",
-      gap: 6,
-      opacity: 0.7,
-    },
-    infoText: {
-      ...tokens.typography.bodySmall,
-      color: tokens.colors.textSecondary,
-    },
-    spacer: {
-      flex: 1,
-    },
-    actionsContainer: {
-      width: "100%",
-      gap: 16,
-    },
-    secondaryButtonContainer: {
-      marginTop: 4,
-    },
+    container: { flex: 1 },
+    content: { flex: 1, alignItems: "center", paddingHorizontal: 32, paddingTop: 80, paddingBottom: 40 },
+    iconContainer: { marginBottom: 24 },
+    title: { ...tokens.typography.headingMedium, color: tokens.colors.textPrimary, fontWeight: "700", marginBottom: 12, textAlign: "center" },
+    message: { ...tokens.typography.bodyMedium, color: tokens.colors.textSecondary, textAlign: "center", lineHeight: 22, marginBottom: 24 },
+    infoContainer: { flexDirection: "row", alignItems: "center", gap: 6, opacity: 0.7 },
+    infoText: { ...tokens.typography.bodySmall, color: tokens.colors.textSecondary },
+    spacer: { flex: 1 },
+    actionsContainer: { width: "100%", gap: 16 },
+    secondaryButtonContainer: { marginTop: 4 },
   });