Add variable step

src/tui/screens/invitations/invitation-import/InvitationImportFlow.tsx

@@ -17,15 +17,15 @@ import { StepIndicator, type Step } from '../../../components/ProgressBar.js';
 import { FetchInvitationStep } from './steps/FetchInvitationStep.js';
 import { PreviewInvitationStep } from './steps/PreviewInvitationStep.js';
 import { RoleSelectStep } from './steps/RoleSelectStep.js';
+import { VariablesStep } from './steps/VariablesStep.js';
 import { InputsSelectStep } from './steps/InputsSelectStep.js';
 import { ReviewStep } from './steps/ReviewStep.js';
 
-import { IMPORT_STEPS, type ImportFlowProps, type SelectableUTXO } from './types.js';
+import { IMPORT_STEPS, type ImportFlowProps, type ImportStepType, type ImportVariableInput, type SelectableUTXO } from './types.js';
 import type { Invitation } from '../../../../services/invitation.js';
 import type { XOTemplate } from '@xo-cash/types';
 import { DialogWrapper } from '../../../components/Dialog.js';
 import { useInputLayer, useLayeredInput } from '../../../hooks/useInputLayer.js';
-import { InvitationBuilder } from '@xo-cash/engine';
 import { hexToBin } from '@bitauth/libauth';
 
 /** Default fee estimate in satoshis. */
@@ -34,6 +34,24 @@ const DEFAULT_FEE = 500n;
 /** Dust threshold — outputs below this are unspendable. */
 const DUST_THRESHOLD = 546n;
 
+/**
+ * Resolve the fixed index of a flow step from `IMPORT_STEPS`.
+ * We centralize this so step transitions do not rely on magic numbers.
+ */
+function getStepIndex(type: ImportStepType): number {
+  const index = IMPORT_STEPS.findIndex((step) => step.type === type);
+  if (index === -1) {
+    throw new Error(`Import step not found: ${type}`);
+  }
+  return index;
+}
+
+const PREVIEW_STEP_INDEX = getStepIndex('preview');
+const ROLE_SELECT_STEP_INDEX = getStepIndex('role-select');
+const VARIABLES_STEP_INDEX = getStepIndex('variables');
+const INPUTS_SELECT_STEP_INDEX = getStepIndex('inputs-select');
+const REVIEW_STEP_INDEX = getStepIndex('review');
+
 export function InvitationImportFlow({
   invitationId,
   mode,
@@ -46,10 +64,10 @@ export function InvitationImportFlow({
   // ── Accumulated state ────────────────────────────────────────────────────
   const [currentStep, setCurrentStep] = useState(0);
   const [invitation, setInvitation] = useState<Invitation | null>(null);
-  const [buildableInvitation, setBuildableInvitation] = useState<InvitationBuilder | null>(null);
   const [template, setTemplate] = useState<XOTemplate | null>(null);
   const [availableRoles, setAvailableRoles] = useState<string[]>([]);
   const [selectedRole, setSelectedRole] = useState<string | null>(null);
+  const [variableInputs, setVariableInputs] = useState<ImportVariableInput[]>([]);
   const [selectedInputs, setSelectedInputs] = useState<SelectableUTXO[]>([]);
   const [changeAmount, setChangeAmount] = useState(0n);
   const [requiredAmount, setRequiredAmount] = useState(0n);
@@ -79,9 +97,6 @@ export function InvitationImportFlow({
     setInvitation(inv);
     setTemplate(tmpl);
 
-    const builder = InvitationBuilder.fromInvitation(inv.data);
-    setBuildableInvitation(builder);
-
     try {
       const roles = await inv.getAvailableRoles();
       setAvailableRoles(roles);
@@ -89,20 +104,98 @@ export function InvitationImportFlow({
       showError(`Failed to get roles: ${err instanceof Error ? err.message : String(err)}`);
     }
 
-    setCurrentStep(1); // → Preview
+    setCurrentStep(PREVIEW_STEP_INDEX); // → Preview
   }, [showError]);
 
   /** PreviewStep completed — user reviewed the invitation state and wants to proceed. */
   const handlePreviewComplete = useCallback(() => {
-    setCurrentStep(2); // → Role Select
+    setCurrentStep(ROLE_SELECT_STEP_INDEX); // → Role Select
   }, []);
 
   /** RoleSelectStep completed — user picked a role. */
   const handleRoleComplete = useCallback((role: string) => {
     setSelectedRole(role);
-    setCurrentStep(3); // → Inputs Select
+
+    const action = template?.actions?.[invitation?.data.actionIdentifier ?? ""];
+    const roleRequirements = action?.roles?.[role]?.requirements?.variables ?? [];
+    const hasRequiredVariables = roleRequirements.length > 0;
+
+    if (!hasRequiredVariables) {
+      setVariableInputs([]);
+      setCurrentStep(INPUTS_SELECT_STEP_INDEX); // → Inputs Select
+      return;
+    }
+
+    const initializedVariables: ImportVariableInput[] = roleRequirements.map((variableId) => {
+      const variableDefinition = template?.variables?.[variableId];
+      return {
+        id: variableId,
+        name: variableDefinition?.name ?? variableId,
+        type: variableDefinition?.type ?? 'string',
+        hint: variableDefinition?.hint,
+        value: '',
+      };
+    });
+
+    setVariableInputs(initializedVariables);
+    setCurrentStep(VARIABLES_STEP_INDEX); // → Variables
+  }, [template, invitation]);
+
+  /** VariablesStep edited a field value. */
+  const handleVariableUpdate = useCallback((index: number, value: string) => {
+    setVariableInputs((previous) => {
+      const updated = [...previous];
+      const current = updated[index];
+      if (current) {
+        updated[index] = { ...current, value };
+      }
+      return updated;
+    });
   }, []);
 
+  /**
+   * Convert variable input value to its invitation payload representation.
+   * Numeric variables are persisted as bigint so they match action wizard behavior.
+   */
+  const parseVariableValue = useCallback((variable: ImportVariableInput) => {
+    const variableHint = variable.hint?.toLowerCase();
+    const isNumeric =
+      ['integer', 'number', 'satoshis'].includes(variable.type) ||
+      (variableHint !== undefined && ['satoshis', 'amount'].includes(variableHint));
+
+    if (!isNumeric) {
+      return variable.value;
+    }
+
+    return BigInt(variable.value || '0');
+  }, []);
+
+  /** VariablesStep completed — persist variables then continue to input selection. */
+  const handleVariablesComplete = useCallback(async () => {
+    if (!invitation || !selectedRole) return;
+
+    const emptyVariables = variableInputs.filter((variable) => variable.value.trim() === '');
+    if (emptyVariables.length > 0) {
+      showError(`Please enter values for: ${emptyVariables.map((variable) => variable.name).join(', ')}`);
+      return;
+    }
+
+    try {
+      await invitation.addVariables(
+        variableInputs.map((variable) => ({
+          variableIdentifier: variable.id,
+          roleIdentifier: selectedRole,
+          value: parseVariableValue(variable),
+        })),
+      );
+      setCurrentStep(INPUTS_SELECT_STEP_INDEX); // → Inputs Select
+    } catch (error) {
+      showError(
+        `Failed to add variables: ${error instanceof Error ? error.message : String(error)}`,
+      );
+    }
+  }, [invitation, selectedRole, variableInputs, parseVariableValue, showError]);
+
   /** InputsSelectStep completed — user selected UTXOs. */
   const handleInputsComplete = useCallback(async (inputs: SelectableUTXO[]) => {
     setSelectedInputs(inputs);
@@ -130,8 +223,8 @@ export function InvitationImportFlow({
       }]);
     }
 
-    setCurrentStep(4); // → Review
-  }, [invitation, buildableInvitation, selectedInputs]);
+    setCurrentStep(REVIEW_STEP_INDEX); // → Review
+  }, [invitation]);
 
   /** ReviewStep completed — invitation import is done. */
   const handleReviewComplete = useCallback(() => {
@@ -205,6 +298,17 @@ export function InvitationImportFlow({
           />
         );
 
+      case 'variables':
+        return (
+          <VariablesStep
+            variables={variableInputs}
+            onUpdateVariable={handleVariableUpdate}
+            onComplete={handleVariablesComplete}
+            onCancel={handleCancel}
+            isActive={true}
+          />
+        );
+
       case 'inputs-select':
         if (!invitation || !selectedRole) return null;
         return (