@umituz/react-native-ai-generation-content 1.83.63 → 1.83.65

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-ai-generation-content",
-  "version": "1.83.63",
+  "version": "1.83.65",
   "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/WizardFlowContent.tsx

@@ -3,7 +3,7 @@
  * Main wizard content with generation logic
  */
 
-import React, { useMemo, useEffect, useRef, useState } from "react";
+import React, { useMemo, useEffect, useRef, useState, useCallback } from "react";
 import { View, StyleSheet } from "react-native";
 import { useAppDesignTokens } from "@umituz/react-native-design-system/theme";
 import { useFlow } from "../../../infrastructure/flow/useFlow";
@@ -197,6 +197,21 @@ export const WizardFlowContent: React.FC<WizardFlowContentProps> = (props) => {
     onCreditsExhausted,
   });
 
+  // Live credit calculator: computes credits for a selection value without store round-trip
+  const handleCalculateCreditForSelection = useCallback(
+    (stepId: string, value: string | string[]) => {
+      if (!calculateCredits) return creditCost;
+      const previewData = { ...customData, [stepId]: { selection: value } };
+      const outputType = validatedScenario.outputType as "video" | "image";
+      const hasImageInput = validatedScenario.inputType !== "text";
+      const duration = extractDuration(previewData.duration) ?? getConfigDefaultDuration(featureConfig.steps as unknown as Record<string, unknown>[]);
+      const resolution = extractResolution(previewData.resolution) ?? getConfigDefaultResolution(featureConfig.steps as unknown as Record<string, unknown>[]);
+      const result = calculateCredits({ duration, resolution, outputType, hasImageInput });
+      return Number.isFinite(result) && result > 0 ? Math.ceil(result) : creditCost;
+    },
+    [customData, featureConfig.steps, calculateCredits, creditCost, validatedScenario.outputType, validatedScenario.inputType],
+  );
+
   useEffect(() => {
     if (currentStep && onStepChange && prevStepIdRef.current !== currentStep.id) {
       prevStepIdRef.current = currentStep.id;
@@ -219,6 +234,7 @@ export const WizardFlowContent: React.FC<WizardFlowContentProps> = (props) => {
         onNext={handlers.handleNextStep}
         onBack={handlers.handleBack}
         onPhotoContinue={handlers.handlePhotoContinue}
+        calculateCreditForSelection={calculateCredits ? handleCalculateCreditForSelection : undefined}
         onDownload={handleDownload}
         onShare={handleShare}
         onRate={() => setShowRatingPicker(true)}

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

@@ -27,6 +27,7 @@ export const WizardStepRenderer: React.FC<WizardStepRendererProps> = ({
   onNext,
   onBack,
   onPhotoContinue,
+  calculateCreditForSelection,
   onDownload,
   onShare,
   onRate,
@@ -94,7 +95,7 @@ export const WizardStepRenderer: React.FC<WizardStepRendererProps> = ({
       return renderTextInputStep({ key: step.id, step, customData, onBack, onPhotoContinue, t, alertMessages, creditCost });
 
     case StepType.FEATURE_SELECTION:
-      return renderSelectionStep({ key: step.id, step, customData, onBack, onPhotoContinue, t, creditCost });
+      return renderSelectionStep({ key: step.id, step, customData, onBack, onPhotoContinue, calculateCreditForSelection, t, creditCost });
 
     default:
       if (typeof __DEV__ !== "undefined" && __DEV__) {

package/src/domains/generation/wizard/presentation/components/WizardStepRenderer.types.ts

@@ -17,6 +17,8 @@ export interface WizardStepRendererProps {
   readonly onNext: () => void;
   readonly onBack: () => void;
   readonly onPhotoContinue: (stepId: string, image: UploadedImage) => void;
+  /** Computes credit cost for a given selection value (local, no store round-trip) */
+  readonly calculateCreditForSelection?: (stepId: string, value: string | string[]) => number;
   readonly onDownload: () => void;
   readonly onShare: () => void;
   readonly onRate?: () => void;

package/src/domains/generation/wizard/presentation/components/step-renderers/renderSelectionStep.tsx

@@ -14,6 +14,8 @@ interface SelectionStepProps {
   readonly customData: Record<string, unknown>;
   readonly onBack: () => void;
   readonly onPhotoContinue: (stepId: string, image: UploadedImage) => void;
+  /** Computes credit cost for a given selection value (local, no store round-trip) */
+  readonly calculateCreditForSelection?: (stepId: string, value: string | string[]) => number;
   readonly t: (key: string) => string;
   /** Calculated credit cost from parent */
   readonly creditCost?: number;
@@ -25,6 +27,7 @@ export function renderSelectionStep({
   customData,
   onBack,
   onPhotoContinue,
+  calculateCreditForSelection,
   t,
   creditCost,
 }: SelectionStepProps): React.ReactElement {
@@ -79,6 +82,7 @@ export function renderSelectionStep({
       }}
       initialValue={initialValue}
       creditCost={creditCost}
+      calculateCreditForSelection={calculateCreditForSelection ? (value) => calculateCreditForSelection(step.id, value) : undefined}
       onBack={onBack}
       onContinue={(value) => {
         onPhotoContinue(step.id, { uri: String(value), selection: value, previewUrl: "" } as UploadedImage);

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

@@ -21,6 +21,7 @@ export const SelectionScreen: React.FC<SelectionScreenProps> = ({
   config,
   initialValue,
   creditCost,
+  calculateCreditForSelection,
   onBack,
   onContinue,
 }) => {
@@ -57,6 +58,12 @@ export const SelectionScreen: React.FC<SelectionScreenProps> = ({
     });
   }
 
+  // Live credit cost based on current selection
+  const displayCreditCost = useMemo(() => {
+    if (!calculateCreditForSelection) return creditCost;
+    return calculateCreditForSelection(selected);
+  }, [calculateCreditForSelection, selected, creditCost]);
+
   const handleSelect = useCallback((optionId: string) => {
     if (isMultiSelect) {
       setSelected((prev) => {
@@ -118,7 +125,7 @@ export const SelectionScreen: React.FC<SelectionScreenProps> = ({
         title=""
         onBackPress={onBack}
         rightElement={
-          <WizardContinueButton canContinue={canContinue} onPress={handleContinue} label={translations.continueButton} icon="arrow-forward" creditCost={creditCost} />
+          <WizardContinueButton canContinue={canContinue} onPress={handleContinue} label={translations.continueButton} icon="arrow-forward" creditCost={displayCreditCost} />
         }
       />
       <ScreenLayout scrollable={true} edges={["left", "right"]} hideScrollIndicator={true} contentContainerStyle={styles.scrollContent}>

package/src/domains/generation/wizard/presentation/screens/SelectionScreen.types.ts

@@ -28,8 +28,10 @@ export interface SelectionScreenProps {
   readonly options: readonly SelectionOption[];
   readonly config?: SelectionScreenConfig;
   readonly initialValue?: string | string[];
-  /** Calculated credit cost - passed from parent */
+  /** Static credit cost - used when no calculator provided */
   readonly creditCost?: number;
+  /** Live credit calculator - returns credit cost for given selection value */
+  readonly calculateCreditForSelection?: (value: string | string[]) => number;
   readonly onBack: () => void;
   readonly onContinue: (selectedValue: string | string[]) => void;
 }