adserver-dashboard 1.0.0

package/client/src/pages/line-item-wizard.tsx

@@ -0,0 +1,1207 @@
+import { useState, useCallback, useEffect } from "react";
+import { useParams, useLocation } from "wouter";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { Button, cn } from "@moving-walls/design-system";
+import { Card, CardContent } from "@moving-walls/design-system";
+import { Badge } from "@moving-walls/design-system";
+import {
+  ArrowLeft,
+  Check,
+  ChevronLeft,
+  ChevronRight,
+  Loader2,
+} from "lucide-react";
+import { useToast } from "@/hooks/use-toast";
+
+const ENABLE_POI_IN_API = true;
+import {
+  InfluenceDealsAPI,
+  influenceDealsRequest,
+  generateExternalId,
+  formatAPIErrorForToast,
+  mapInventoryForAPI,
+  mapLineItemForAPI,
+  type Deal,
+  type LineItem,
+} from "@/lib/influence-deals-api";
+import { LineItemDetailsStep } from "@/components/line-items/steps/line-item-details-step";
+import { TargetingStep } from "@/components/line-items/steps/targeting-step";
+import { InventoryStep } from "@/components/line-items/steps/inventory-step";
+import { ScheduleStep } from "@/components/line-items/steps/schedule-step";
+import { CreativesStep } from "@/components/line-items/steps/creatives-step";
+import { SummaryStep } from "@/components/line-items/steps/summary-step";
+import { usePageTitle } from "@/hooks/use-page-title";
+
+interface LineItemFormData {
+  details: {
+    name: string;
+    startDate: string;
+    endDate: string;
+    currency: string;
+    creativeType?: "DISPLAY" | "VIDEO" | "AUDIO";
+    duration?: number;
+    impressions?: number;
+    netCostPerDay?: number;
+    direct?: {
+      budgetSetup: {
+        budgetType: string;
+        budgetAmount?: number;
+        currency: string;
+      };
+      campaignGoal: {
+        type: string;
+        targetValue: number;
+      };
+      pacing?: {
+        type: string;
+        dailyCap?: number;
+        hourlyCap?: number;
+      };
+    };
+    programmatic?: {
+      bidFloor?: number;
+      netCost?: number;
+      impressions?: number;
+      impMultiplier?: number;
+    };
+  };
+  targeting: {
+    targeting?: {
+      demographics?: {
+        ageGroups?: string[];
+        genders?: string[];
+        incomeGroups?: string[];
+        interests?: string[];
+        audienceBehaviour?: string[];
+      };
+      venueTypes?: string[];
+      geofencing?: {
+        geometrics?: any[];
+        locations?: any[];
+        radiusKm?: number;
+        pois?: string[];
+      };
+    };
+    deliveryTargeting?: {
+      signals?: Record<string, any>;
+    };
+    recommendationRunId?: string;
+  };
+  inventory: {
+    inventories: string[];
+    inventoryObjects?: any[];
+    planning?: {
+      capacity?: { 
+        campaignDays?: number;
+        available?: { slots?: number; playTimeSec?: number; maxImpressions?: number };
+      };
+      allocation?: { slots?: number; playTimeSec?: number; sov?: number; sot?: number };
+      estimates?: { impressions?: number; reach?: number; frequency?: number };
+      pricing?: { cpm?: number; estimatedCost?: number };
+    };
+  };
+  schedule: {
+    scheduleGrids?: Record<string, any>;
+    schedulePreset?: string;
+    scheduleSelection?: string;
+    scheduleData?: any;
+    apiSchedules?: any[];
+  };
+  creatives: Array<{
+    creativeId: string;
+    creativeUri: string;
+    creativeType: "DISPLAY" | "VIDEO" | "AUDIO";
+    resolution?: string;
+    thumbnail?: string;
+    mimeType?: string;
+    duration?: number;
+    inventoryIds?: string[];
+    metadata?: Record<string, any>;
+  }>;
+}
+
+const initialFormData: LineItemFormData = {
+  details: {
+    name: "",
+    startDate: "",
+    endDate: "",
+    currency: "USD",
+    direct: {
+      budgetSetup: {
+        budgetType: "TOTAL",
+        budgetAmount: undefined,
+        currency: "USD",
+      },
+      campaignGoal: {
+        type: "IMPRESSIONS",
+        targetValue: 0,
+      },
+      pacing: {
+        type: "even",
+      },
+    },
+    programmatic: {
+      bidFloor: undefined,
+      netCost: undefined,
+      impressions: undefined,
+      impMultiplier: undefined,
+    },
+  },
+  targeting: {},
+  inventory: {
+    inventories: [],
+    inventoryObjects: [],
+    planning: undefined,
+  },
+  schedule: {
+    scheduleGrids: {},
+    schedulePreset: "custom",
+  },
+  creatives: [],
+};
+
+interface Step {
+  id: number;
+  key: keyof LineItemFormData | "creatives" | "summary";
+  label: string;
+  description: string;
+  optional?: boolean;
+  formId?: string;
+}
+
+const steps: Step[] = [
+  {
+    id: 1,
+    key: "details",
+    label: "Line Item Details",
+    description: "Basic information and pricing",
+    formId: "line-item-details-form",
+  },
+  {
+    id: 2,
+    key: "targeting",
+    label: "Targeting",
+    description: "Audience and location targeting",
+    formId: "targeting-step-form",
+  },
+  {
+    id: 3,
+    key: "inventory",
+    label: "Inventory",
+    description: "Select screens and packages",
+    formId: "inventory-step-form",
+  },
+  {
+    id: 4,
+    key: "schedule",
+    label: "Schedule",
+    description: "Configure schedule and forecasting",
+    formId: "schedule-step-form",
+  },
+  {
+    id: 5,
+    key: "creatives",
+    label: "Creatives",
+    description: "Assign creative assets",
+    optional: true,
+    formId: "creatives-step-form",
+  },
+  {
+    id: 6,
+    key: "summary",
+    label: "Summary",
+    description: "Review and submit",
+    optional: true,
+    formId: "summary-step-form",
+  },
+];
+
+export default function LineItemWizardPage() {
+  usePageTitle("Line Item");
+  const { dealId, lineItemId: routeLineItemId } = useParams<{ dealId: string; lineItemId?: string }>();
+  const [location, setLocation] = useLocation();
+  const queryClient = useQueryClient();
+  
+  // Check if we're on the /new route by looking at the actual path
+  const isNewRoute = location.includes('/line-items/new');
+  const lineItemId = isNewRoute ? undefined : routeLineItemId;
+  const isEditMode = !isNewRoute && !!lineItemId;
+  
+  // Check for plannerRestricted mode (only pacing and creatives are editable)
+  // Use window.location.search since wouter's location doesn't include query params
+  const isPlannerRestricted = typeof window !== 'undefined' && window.location.search.includes('plannerRestricted=true');
+  
+  console.log('📍 Route check - location:', location, 'search:', window.location.search, 'isPlannerRestricted:', isPlannerRestricted);
+  
+  const [currentStep, setCurrentStep] = useState(1);
+  const [completedSteps, setCompletedSteps] = useState<number[]>([]);
+  const [formData, setFormData] = useState<LineItemFormData>(initialFormData);
+  const [isSaving, setIsSaving] = useState(false);
+  const [savedLineItemId, setSavedLineItemId] = useState<string | undefined>(lineItemId);
+  const [externalId, setExternalId] = useState<string | undefined>();
+  const totalSteps = steps.length;
+  const { toast } = useToast();
+
+  const { data: dealData, isLoading: isLoadingDeal } = useQuery({
+    queryKey: ["deal", dealId],
+    queryFn: async () => {
+      const response = await influenceDealsRequest<Deal>(
+        InfluenceDealsAPI.deals.get(dealId!)
+      );
+      return response;
+    },
+    enabled: !!dealId,
+  });
+
+  const { data: existingLineItem, isLoading: isLoadingLineItem } = useQuery({
+    queryKey: ["lineItem", dealId, lineItemId],
+    queryFn: async () => {
+      const response = await influenceDealsRequest<any>(
+        InfluenceDealsAPI.lineItems.get(dealId!, lineItemId!)
+      );
+      return response;
+    },
+    enabled: !!dealId && !!lineItemId,
+  });
+
+  // Helper function to fetch all inventories with pagination
+  const fetchAllInventories = async (dealId: string, lineItemId: string) => {
+    const allInventories: any[] = [];
+    let page = 1;
+    const limit = 50;
+    let totalPages = 1;
+
+    do {
+      const response = await influenceDealsRequest<any>(
+        InfluenceDealsAPI.lineItems.inventories(dealId, lineItemId, { page, limit })
+      );
+      
+      // Handle response structure with data array and pagination
+      const data = response?.data || response || [];
+      const pagination = response?.pagination;
+      
+      if (Array.isArray(data)) {
+        allInventories.push(...data);
+      }
+      
+      if (pagination?.totalPages) {
+        totalPages = pagination.totalPages;
+      } else {
+        // If no pagination info, assume single page
+        totalPages = 1;
+      }
+      
+      page++;
+    } while (page <= totalPages);
+
+    console.log('📦 Fetched all inventories (paginated):', allInventories.length, 'items');
+    return allInventories;
+  };
+
+  // Fetch line item inventories from dedicated endpoint with pagination
+  const { data: lineItemInventories } = useQuery({
+    queryKey: ["lineItemInventories", dealId, lineItemId],
+    queryFn: async () => {
+      const inventories = await fetchAllInventories(dealId!, lineItemId!);
+      console.log('📦 Fetched line item inventories:', inventories);
+      return inventories;
+    },
+    enabled: !!dealId && !!lineItemId,
+  });
+
+  // Reset form when creating a new line item (not edit mode) or when deal changes
+  useEffect(() => {
+    console.log('🔄 Reset check - lineItemId:', lineItemId, 'isEditMode:', isEditMode);
+    if (!lineItemId) {
+      console.log('🔄 Resetting form for new line item');
+      setFormData(initialFormData);
+      setCurrentStep(1);
+      setCompletedSteps([]);
+      setSavedLineItemId(undefined);
+    }
+  }, [dealId, lineItemId, isEditMode]);
+
+  useEffect(() => {
+    // Only load existing line item data if we have a lineItemId (edit mode)
+    if (!lineItemId) {
+      return;
+    }
+    if (existingLineItem && isEditMode) {
+      const li = existingLineItem as any;
+      console.log('📦 Loading existing line item:', li);
+      // Store the external ID for use in payload building during updates
+      if (li.externalId) {
+        setExternalId(li.externalId);
+      }
+      // Pacing can be at root level or in direct object
+      const pacingData = li.pacing || li.direct?.pacing || { type: "asap" };
+      console.log('📦 Pacing from API:', pacingData);
+      
+      // Get inventories from the dedicated endpoint response (already fetched with pagination)
+      const inventories = lineItemInventories || [];
+      console.log('📦 Inventories from dedicated endpoint:', inventories);
+      
+      // Map inventories with all required fields for edit mode
+      const inventoryObjects = Array.isArray(inventories) 
+        ? inventories.map((inv: any) => ({
+            id: inv.id || inv.inventoryId,
+            inventoryId: inv.inventoryId || inv.id,
+            name: inv.name || inv.screen?.name || 'Unknown',
+            resolution: inv.resolution || inv.screen?.resolution || '1920x1080',
+            width: inv.width || inv.screen?.width,
+            height: inv.height || inv.screen?.height,
+            location: inv.location || inv.screen?.location,
+            publisher: inv.publisher,
+            publisherName: inv.publisherName || inv.publisher?.name,
+            tags: inv.tags || [],
+            operatingHours: inv.operatingHours,
+            estimatedCostPerDay: inv.estimatedCostPerDay || inv.planning?.estimatedCostPerDay,
+            currency: inv.currency || li.currency || 'USD',
+            screen: inv.screen,
+            ...inv,
+          }))
+        : [];
+      
+      // Extract inventory IDs
+      const inventoryIds = inventoryObjects.map((inv: any) => inv.id || inv.inventoryId);
+      
+      setFormData((prev) => ({
+        details: {
+          name: li.name || "",
+          startDate: li.startDate || "",
+          endDate: li.endDate || "",
+          currency: li.currency || "USD",
+          creativeType: li.creativeType || "VIDEO",
+          impressions: li.impressions,
+          netCostPerDay: li.netCostPerDay,
+          direct: {
+            budgetSetup: li.direct?.budgetSetup || {
+              budgetType: "TOTAL",
+              budgetAmount: undefined,
+              currency: "USD",
+            },
+            campaignGoal: li.direct?.campaignGoal || {
+              type: "IMPRESSIONS",
+              targetValue: 0,
+            },
+            pacing: pacingData,
+          },
+        },
+        targeting: {
+          targeting: li.targeting || undefined,
+          deliveryTargeting: li.deliveryTargeting || undefined,
+          // Preserve recommendationRunId from current session if API doesn't have it
+          recommendationRunId: li.recommendationRunId || prev.targeting.recommendationRunId || undefined,
+        },
+        inventory: {
+          inventories: inventoryIds,
+          inventoryObjects: inventoryObjects,
+        },
+        schedule: {
+          scheduleGrids: li.scheduleGrids || {},
+          schedulePreset: li.schedulePreset || "custom",
+          // Convert existing schedule from API to scheduleData format
+          scheduleData: li.schedule && Array.isArray(li.schedule) && li.schedule.length > 0 
+            ? {
+                schedules: li.schedule.map((s: any, idx: number) => ({
+                  id: s.id || `schedule-${Date.now()}-${idx}`,
+                  type: s.type || "DEFAULT",
+                  validity: {
+                    startDate: s.validity?.startDate || li.startDate,
+                    endDate: s.validity?.endDate || li.endDate,
+                  },
+                  hours: s.hours || [{ start: 7, end: 23 }],
+                  priority: s.priority ?? 10,
+                  daysOfWeek: s.daysOfWeek || [1, 2, 3, 4, 5, 6, 7],
+                  date: s.date,
+                  name: s.name || `Schedule ${idx + 1}`,
+                }))
+              }
+            : undefined,
+          apiSchedules: li.schedule || [],
+        },
+        creatives: li.creatives || [],
+      }));
+    }
+  }, [existingLineItem, lineItemInventories, isEditMode, lineItemId]);
+
+  const handlePrevious = useCallback(() => {
+    if (currentStep > 1) {
+      setCurrentStep((prev) => prev - 1);
+    }
+  }, [currentStep]);
+
+  const handleNext = useCallback(() => {
+    if (currentStep < totalSteps) {
+      setCompletedSteps((prev) =>
+        prev.includes(currentStep) ? prev : [...prev, currentStep]
+      );
+      setCurrentStep((prev) => prev + 1);
+    }
+  }, [currentStep, totalSteps]);
+
+  const handleStepClick = (stepId: number) => {
+    if (stepId <= currentStep || completedSteps.includes(stepId - 1)) {
+      setCurrentStep(stepId);
+    }
+  };
+
+  const buildLineItemPayload = useCallback((isUpdate: boolean = false) => {
+    const mode = dealData?.mode || "DIRECT";
+    const dealType = dealData?.dealType || "DIRECT";
+    
+    // Prepare targeting data with geofencing cleanup
+    let targeting = undefined;
+    if (formData.targeting?.targeting) {
+      targeting = { ...formData.targeting.targeting };
+      if (targeting.geofencing) {
+        // Remove radiusKm and pois from top level - only geometrics and locations are allowed
+        const { radiusKm, pois, ...cleanGeofencing } = targeting.geofencing;
+        // Also strip pois from each geometry unless the API supports it
+        if (!ENABLE_POI_IN_API && cleanGeofencing.geometrics) {
+          cleanGeofencing.geometrics = cleanGeofencing.geometrics.map((geom: any) => {
+            const { pois: geomPois, ...cleanGeom } = geom;
+            return cleanGeom;
+          });
+        }
+        targeting.geofencing = cleanGeofencing;
+      }
+    }
+    
+    // Prepare deliveryTargeting (DIRECT mode only)
+    // Note: timeOfDay is not yet supported by the backend API, so we filter it out
+    let deliveryTargeting = undefined;
+    if (mode === "DIRECT" && formData.targeting?.deliveryTargeting && Object.keys(formData.targeting.deliveryTargeting).length > 0) {
+      deliveryTargeting = { ...formData.targeting.deliveryTargeting };
+      if (deliveryTargeting.signals) {
+        const { timeOfDay, ...supportedSignals } = deliveryTargeting.signals;
+        if (Object.keys(supportedSignals).length > 0) {
+          deliveryTargeting.signals = supportedSignals;
+        } else {
+          deliveryTargeting = undefined;
+        }
+      }
+    }
+
+    // Prepare pacing with lowercase type
+    let pacing = undefined;
+    if (formData.details.direct?.pacing) {
+      pacing = {
+        ...formData.details.direct.pacing,
+        type: formData.details.direct.pacing.type?.toLowerCase() || 'asap',
+      };
+    }
+
+    // Prepare the line item data for mapping
+    const lineItemData: any = {
+      name: formData.details.name,
+      status: "GENERATED",
+      startDate: formData.details.startDate,
+      endDate: formData.details.endDate,
+      currency: formData.details.currency,
+      pacing: pacing,
+      targeting: targeting,
+      deliveryTargeting: deliveryTargeting,
+      direct: formData.details.direct,
+      programmatic: formData.details.programmatic,
+      planning: formData.inventory.planning,
+      creativeType: formData.details.creativeType || "VIDEO",
+      duration: formData.details.duration || 10,
+      resolutions: ["1920x1080", "1280x720", "3840x2160", "4096x2160"],
+      inventories: formData.inventory.inventories || [],
+    };
+
+    // Add schedule data if available
+    if (formData.schedule.apiSchedules && formData.schedule.apiSchedules.length > 0) {
+      lineItemData.schedule = formData.schedule.apiSchedules;
+    }
+
+    // For programmatic mode, add impressions and netCostPerDay
+    if (mode === "PROGRAMMATIC" || mode?.toUpperCase() === "PROGRAMMATIC") {
+      if (formData.details.impressions) {
+        lineItemData.impressions = formData.details.impressions;
+      }
+      if (formData.details.netCostPerDay) {
+        lineItemData.netCostPerDay = formData.details.netCostPerDay;
+      }
+    }
+
+    // Use the mode-aware mapping function
+    const mappedLineItem = mapLineItemForAPI(
+      lineItemData,
+      mode,
+      dealType,
+    );
+
+    return mappedLineItem;
+  }, [formData, dealData]);
+
+  const handleSave = useCallback(async (creativesToSave?: any[]) => {
+    setIsSaving(true);
+    try {
+      // If line item was already saved during inventory step, just navigate away
+      // Creatives are already assigned via drag-drop in edit mode
+      const effectiveLineItemId = savedLineItemId || lineItemId;
+      
+      let finalLineItemId = effectiveLineItemId;
+      
+      if (effectiveLineItemId) {
+        // Line item already exists, update it if needed
+        const payload = buildLineItemPayload(true);
+        await influenceDealsRequest(
+          InfluenceDealsAPI.lineItems.update(dealId!, effectiveLineItemId),
+          "PUT",
+          payload
+        );
+      } else {
+        // Create new line item (shouldn't happen as we save after inventory step)
+        const payload = buildLineItemPayload(false);
+        const response = await influenceDealsRequest<any>(
+          InfluenceDealsAPI.lineItems.create(dealId!),
+          "POST",
+          payload
+        );
+        finalLineItemId = response?.id || response?.data?.id;
+      }
+
+      // Update inventories via separate endpoint
+      if (finalLineItemId && formData.inventory.inventoryObjects && formData.inventory.inventoryObjects.length > 0) {
+        try {
+          // Format inventory objects for the API - include all available fields from JAD API
+          const inventoryPayload = formData.inventory.inventoryObjects.map((inv: any) => mapInventoryForAPI(inv));
+
+          await influenceDealsRequest(
+            InfluenceDealsAPI.lineItems.updateInventories(dealId!, finalLineItemId),
+            "PUT",
+            { inventories: inventoryPayload }
+          );
+          console.log('📦 Successfully updated inventories via separate endpoint');
+        } catch (inventoryError: unknown) {
+          console.error("Failed to update inventories:", inventoryError);
+          // Re-throw to prevent save completion - toast handled by caller
+          throw inventoryError;
+        }
+      }
+
+      toast({
+        title: "Success",
+        description: `Successfully ${effectiveLineItemId ? 'updated' : 'created'} the line item "${formData.details.name}"`,
+      });
+
+      queryClient.invalidateQueries({ queryKey: ["lineItems", dealId] });
+      queryClient.invalidateQueries({ queryKey: ["deal-line-items", dealId] });
+      // Invalidate individual line item cache
+      if (effectiveLineItemId) {
+        queryClient.invalidateQueries({ queryKey: ["lineItem", dealId, effectiveLineItemId] });
+        queryClient.invalidateQueries({ queryKey: ["lineItemInventories", dealId, effectiveLineItemId] });
+      }
+      // Clear form data after successful save
+      setFormData(initialFormData);
+      setCurrentStep(1);
+      setCompletedSteps([]);
+      setSavedLineItemId(undefined);
+      setLocation(`/deals/${dealId}/line-items`);
+    } catch (error) {
+      console.error("Failed to save line item:", error);
+      toast({
+        title: "Error",
+        description: formatAPIErrorForToast(error),
+        variant: "destructive",
+      });
+    } finally {
+      setIsSaving(false);
+    }
+  }, [buildLineItemPayload, dealId, lineItemId, savedLineItemId, dealData, queryClient, setLocation, toast, formData.details.name]);
+
+  // Save line item without creatives (used after schedule step to ensure resolutions are saved)
+  const saveLineItemOnly = useCallback(async (scheduleData: any) => {
+    setIsSaving(true);
+    try {
+      // Build payload with the new schedule data
+      const updatedFormData = {
+        ...formData,
+        schedule: scheduleData,
+      };
+      
+      const isDirectDeal = dealData?.mode === "DIRECT";
+      const isGuaranteed = dealData?.dealType === "GUARANTEED";
+      const payload: any = {
+        name: updatedFormData.details.name,
+        status: "GENERATED",
+      };
+
+      const isCreatingNew = !isEditMode && !savedLineItemId;
+      if (isCreatingNew) {
+        payload.externalId = generateExternalId();
+        payload.startDate = updatedFormData.details.startDate;
+        payload.endDate = updatedFormData.details.endDate;
+        payload.currency = updatedFormData.details.currency;
+      }
+
+      // Add thresholdCountPerDay for GUARANTEED deals (required by API)
+      if (isGuaranteed) {
+        payload.thresholdCountPerDay = updatedFormData.details.thresholdCountPerDay || 1;
+      }
+
+      // Pacing is always at root level for both direct and programmatic
+      // Ensure pacing type is lowercase as required by API
+      if (updatedFormData.details.direct?.pacing) {
+        payload.pacing = {
+          ...updatedFormData.details.direct.pacing,
+          type: updatedFormData.details.direct.pacing.type?.toLowerCase() || 'asap',
+        };
+      }
+
+      if (isDirectDeal) {
+        payload.direct = {
+          budgetSetup: updatedFormData.details.direct?.budgetSetup,
+          campaignGoal: updatedFormData.details.direct?.campaignGoal,
+        };
+      } else {
+        if (updatedFormData.details.impressions) {
+          payload.impressions = updatedFormData.details.impressions;
+        }
+        if (updatedFormData.details.netCostPerDay) {
+          payload.netCostPerDay = updatedFormData.details.netCostPerDay;
+        }
+      }
+
+      if (updatedFormData.targeting?.targeting) {
+        const targeting = { ...updatedFormData.targeting.targeting };
+        if (targeting.geofencing) {
+          // Remove radiusKm and pois from top level - only geometrics and locations are allowed
+          const { radiusKm, pois, ...cleanGeofencing } = targeting.geofencing;
+          // Also strip pois from each geometry unless the API supports it
+          if (!ENABLE_POI_IN_API && cleanGeofencing.geometrics) {
+            cleanGeofencing.geometrics = cleanGeofencing.geometrics.map((geom: any) => {
+              const { pois: geomPois, ...cleanGeom } = geom;
+              return cleanGeom;
+            });
+          }
+          targeting.geofencing = cleanGeofencing;
+        }
+        payload.targeting = targeting;
+      }
+
+      // Include deliveryTargeting for signals (weather, traffic, aqi)
+      // Note: timeOfDay is not yet supported by the backend API, so we filter it out
+      if (updatedFormData.targeting?.deliveryTargeting && Object.keys(updatedFormData.targeting.deliveryTargeting).length > 0) {
+        const deliveryTargeting = { ...updatedFormData.targeting.deliveryTargeting };
+        if (deliveryTargeting.signals) {
+          const { timeOfDay, ...supportedSignals } = deliveryTargeting.signals;
+          if (Object.keys(supportedSignals).length > 0) {
+            deliveryTargeting.signals = supportedSignals;
+            payload.deliveryTargeting = deliveryTargeting;
+          }
+        } else {
+          payload.deliveryTargeting = deliveryTargeting;
+        }
+      }
+
+      // Use hardcoded standard resolutions for line item payload
+      payload.resolutions = ["1920x1080", "1280x720", "3840x2160", "4096x2160"];
+
+      // Set creativeType from form data (default to VIDEO)
+      payload.creativeType = updatedFormData.details.creativeType || "VIDEO";
+      
+      // Set duration from form data (default to 10 seconds)
+      payload.duration = updatedFormData.details.duration || 10;
+
+      // Add schedule data if available
+      if (scheduleData.apiSchedules && scheduleData.apiSchedules.length > 0) {
+        payload.schedule = scheduleData.apiSchedules;
+      }
+
+      let newLineItemId = savedLineItemId || lineItemId;
+      
+      if (isEditMode && lineItemId) {
+        await influenceDealsRequest(
+          InfluenceDealsAPI.lineItems.update(dealId!, lineItemId),
+          "PUT",
+          payload
+        );
+        newLineItemId = lineItemId;
+      } else if (savedLineItemId) {
+        // Update existing saved line item
+        await influenceDealsRequest(
+          InfluenceDealsAPI.lineItems.update(dealId!, savedLineItemId),
+          "PUT",
+          payload
+        );
+        newLineItemId = savedLineItemId;
+      } else {
+        // Create new line item
+        const response = await influenceDealsRequest<any>(
+          InfluenceDealsAPI.lineItems.create(dealId!),
+          "POST",
+          payload
+        );
+        newLineItemId = response?.id || response?.data?.id;
+        setSavedLineItemId(newLineItemId);
+      }
+
+      // Update inventories via separate endpoint
+      if (newLineItemId && formData.inventory.inventoryObjects && formData.inventory.inventoryObjects.length > 0) {
+        try {
+          // Format inventory objects for the API - include all available fields from JAD API
+          const inventoryPayload = formData.inventory.inventoryObjects.map((inv: any) => mapInventoryForAPI(inv));
+
+          await influenceDealsRequest(
+            InfluenceDealsAPI.lineItems.updateInventories(dealId!, newLineItemId),
+            "PUT",
+            { inventories: inventoryPayload }
+          );
+          console.log('📦 Successfully updated inventories via separate endpoint');
+        } catch (inventoryError: unknown) {
+          console.error("Failed to update inventories:", inventoryError);
+          // Re-throw to prevent step advancement - toast handled by caller
+          throw inventoryError;
+        }
+      }
+
+      toast({
+        title: "Success",
+        description: `Successfully ${isEditMode || savedLineItemId ? 'updated' : 'created'} the line item "${updatedFormData.details.name}"`,
+      });
+
+      queryClient.invalidateQueries({ queryKey: ["lineItems", dealId] });
+      queryClient.invalidateQueries({ queryKey: ["deal-line-items", dealId] });
+      queryClient.invalidateQueries({ queryKey: ["lineItem", dealId, newLineItemId] });
+      queryClient.invalidateQueries({ queryKey: ["lineItemInventories", dealId, newLineItemId] });
+      
+      // Update deal status to GENERATED when completing the first line item
+      // Only do this for new line items (not edit mode) and when deal is still in DRAFT status
+      // Note: dealData?.status === "DRAFT" check prevents duplicate updates
+      if (!isEditMode && dealData?.status === "DRAFT") {
+        try {
+          console.log('[LineItemWizard] Line item completed, updating deal status to GENERATED');
+          await influenceDealsRequest(
+            InfluenceDealsAPI.deals.update(dealId!),
+            "PUT",
+            { status: "GENERATED" }
+          );
+          queryClient.invalidateQueries({ queryKey: ["deal", dealId] });
+        } catch (statusError) {
+          console.error("Failed to update deal status to GENERATED:", statusError);
+        }
+      }
+      
+      return newLineItemId;
+    } catch (error) {
+      console.error("Failed to save line item:", error);
+      throw error;
+    } finally {
+      setIsSaving(false);
+    }
+  }, [formData, dealData, dealId, lineItemId, isEditMode, savedLineItemId, queryClient, toast]);
+
+  // Create initial line item after details step (for new line items only)
+  // This ensures we have a lineItemId for the recommendation engine in the targeting step
+  const createInitialLineItem = useCallback(async (detailsData: any) => {
+    if (isEditMode || savedLineItemId || lineItemId) {
+      // Already have a line item, no need to create
+      return;
+    }
+    
+    setIsSaving(true);
+    try {
+      const isDirectDeal = dealData?.mode === "DIRECT";
+      const isGuaranteed = dealData?.dealType === "GUARANTEED";
+      const payload: any = {
+        name: detailsData.name,
+        status: "GENERATED",
+        externalId: generateExternalId(),
+        startDate: detailsData.startDate,
+        endDate: detailsData.endDate,
+        currency: detailsData.currency,
+        creativeType: detailsData.creativeType || "VIDEO",
+        duration: detailsData.duration || 10,
+        resolutions: ["1920x1080", "1280x720", "3840x2160", "4096x2160"],
+      };
+
+      // Add thresholdCountPerDay for GUARANTEED deals (required by API)
+      if (isGuaranteed) {
+        payload.thresholdCountPerDay = detailsData.thresholdCountPerDay || 1;
+      }
+
+      // Pacing at root level
+      if (detailsData.direct?.pacing) {
+        payload.pacing = {
+          ...detailsData.direct.pacing,
+          type: detailsData.direct.pacing.type?.toLowerCase() || 'asap',
+        };
+      }
+
+      if (isDirectDeal) {
+        payload.direct = {
+          budgetSetup: detailsData.direct?.budgetSetup,
+          campaignGoal: detailsData.direct?.campaignGoal,
+        };
+      } else {
+        if (detailsData.impressions) {
+          payload.impressions = detailsData.impressions;
+        }
+        if (detailsData.netCostPerDay) {
+          payload.netCostPerDay = detailsData.netCostPerDay;
+        }
+      }
+
+      console.log("🆕 Creating initial line item for recommendation engine:", payload);
+      const response = await influenceDealsRequest<any>(
+        InfluenceDealsAPI.lineItems.create(dealId!),
+        "POST",
+        payload
+      );
+      const newLineItemId = response?.id || response?.data?.id;
+      console.log("✅ Initial line item created:", newLineItemId);
+      setSavedLineItemId(newLineItemId);
+    } catch (error) {
+      console.error("Failed to create initial line item:", error);
+      // Don't block the user - they can still proceed, just without recommendations
+      toast({
+        title: "Note",
+        description: "Could not initialize line item for AI recommendations. You can still select inventory manually.",
+        variant: "default",
+      });
+    } finally {
+      setIsSaving(false);
+    }
+  }, [isEditMode, savedLineItemId, lineItemId, dealData, dealId, toast]);
+
+  const handleStepComplete = useCallback(async (stepKey: string, data: any) => {
+    let shouldProceed = true;
+    
+    if (stepKey === "details") {
+      setFormData((prev) => ({
+        ...prev,
+        details: data,
+      }));
+      
+      // Create initial line item for new line items so targeting step has an ID for recommendations
+      await createInitialLineItem(data);
+    } else if (stepKey === "targeting") {
+      console.log('[Wizard] Targeting step completed with data:', data);
+      console.log('[Wizard] recommendationRunId:', data?.recommendationRunId);
+      setFormData((prev) => ({
+        ...prev,
+        targeting: data,
+      }));
+    } else if (stepKey === "inventory") {
+      setFormData((prev) => ({
+        ...prev,
+        inventory: data,
+      }));
+    } else if (stepKey === "schedule") {
+      setFormData((prev) => ({
+        ...prev,
+        schedule: data,
+      }));
+      
+      // Save line item when completing schedule step to ensure resolutions are saved
+      try {
+        await saveLineItemOnly(data);
+      } catch (error: unknown) {
+        console.error("Failed to save line item after schedule step:", error);
+        toast({
+          title: "Error",
+          description: formatAPIErrorForToast(error),
+          variant: "destructive",
+        });
+        // Stay on current step - don't proceed
+        shouldProceed = false;
+      }
+    } else if (stepKey === "creatives") {
+      setFormData((prev) => ({
+        ...prev,
+        creatives: data,
+      }));
+    }
+
+    // Only proceed to next step if no errors occurred
+    if (!shouldProceed) {
+      return;
+    }
+
+    if (currentStep < totalSteps) {
+      setCompletedSteps((prev) =>
+        prev.includes(currentStep) ? prev : [...prev, currentStep]
+      );
+      setCurrentStep((prev) => prev + 1);
+    } else {
+      // Pass creatives data directly to handleSave to avoid React state async issue
+      handleSave(stepKey === "creatives" ? data : undefined);
+    }
+  }, [currentStep, totalSteps, handleSave, saveLineItemOnly, createInitialLineItem, toast]);
+
+  const handleCancel = () => {
+    setLocation(`/deals/${dealId}/line-items`);
+  };
+
+  const renderStepContent = () => {
+    const currentStepData = steps[currentStep - 1];
+
+    switch (currentStepData.key) {
+      case "details":
+        return (
+          <LineItemDetailsStep
+            data={formData.details}
+            dealData={dealData}
+            onComplete={(data) => handleStepComplete("details", data)}
+            isLoading={isSaving}
+            formId={currentStepData.formId}
+            isPlannerRestricted={isPlannerRestricted}
+            dealMode={dealData?.mode}
+            dealType={dealData?.dealType}
+          />
+        );
+      case "targeting":
+        return (
+          <TargetingStep
+            data={formData.targeting}
+            campaignData={dealData}
+            lineItemId={savedLineItemId || lineItemId}
+            lineItemData={formData.details}
+            onComplete={(data) => handleStepComplete("targeting", data)}
+            onBack={handlePrevious}
+            isLoading={isSaving}
+            formId={currentStepData.formId}
+            isPlannerRestricted={isPlannerRestricted}
+            dealMode={dealData?.mode}
+          />
+        );
+      case "inventory":
+        return (
+          <InventoryStep
+            data={formData.inventory}
+            lineItemData={formData.details}
+            lineItemId={savedLineItemId || lineItemId}
+            targeting={formData.targeting}
+            recommendationRunId={formData.targeting.recommendationRunId}
+            country={dealData?.country || "JP"}
+            onComplete={(data) => handleStepComplete("inventory", data)}
+            onBack={handlePrevious}
+            isLoading={isSaving}
+            formId={currentStepData.formId}
+            isPlannerRestricted={isPlannerRestricted}
+            dealMode={dealData?.mode}
+          />
+        );
+      case "schedule":
+        return (
+          <ScheduleStep
+            data={formData.inventory}
+            lineItemData={formData.details}
+            scheduleData={formData.schedule.scheduleData}
+            onComplete={(data) => handleStepComplete("schedule", data)}
+            onBack={handlePrevious}
+            isLoading={isSaving}
+            formId={currentStepData.formId}
+            isPlannerRestricted={isPlannerRestricted}
+          />
+        );
+      case "creatives":
+        return (
+          <CreativesStep
+            data={formData.creatives}
+            lineItemId={savedLineItemId || lineItemId}
+            lineItemName={formData.details.name || "Line Item 01"}
+            dealId={dealId}
+            dealDealId={dealData?.dealId}
+            allowedResolutions={["1920x1080", "1280x720", "3840x2160", "4096x2160"]}
+            creativeType={formData.details.creativeType || "VIDEO"}
+            isEditMode={!!(savedLineItemId || lineItemId)}
+            onComplete={(data) => handleStepComplete("creatives", data)}
+            onBack={handlePrevious}
+            onSkip={() => handleSave()}
+            isLoading={isSaving}
+            formId={currentStepData.formId}
+          />
+        );
+      case "summary":
+        return (
+          <SummaryStep
+            formData={formData}
+            dealData={dealData}
+            dealId={dealId}
+            dealDealId={dealData?.dealId}
+            isEditMode={!!(savedLineItemId || lineItemId)}
+          />
+        );
+      default:
+        return null;
+    }
+  };
+
+  const isLoading = isLoadingDeal || (isEditMode && isLoadingLineItem);
+
+  if (isLoading) {
+    return (
+      <div className="min-h-screen flex items-center justify-center">
+        <Loader2 className="h-8 w-8 animate-spin text-mw-primary-600" />
+      </div>
+    );
+  }
+
+  const dealName = typeof dealData?.name === "string" ? dealData.name : (dealData?.name as any)?.name || "Deal";
+
+  return (
+    <div className="h-[calc(100vh-64px)] bg-mw-gray-50 dark:bg-mw-gray-900 flex flex-col overflow-hidden">
+      {/* Title Header */}
+      <div className="flex-shrink-0 bg-white dark:bg-mw-gray-800 border-b border-mw-gray-200 dark:border-mw-gray-700 px-6 py-3">
+        <div className="flex items-center gap-2">
+          <Button
+            variant="ghost"
+            size="sm"
+            isIconOnly
+            onClick={handleCancel}
+          >
+            <ArrowLeft className="h-4 w-4" />
+          </Button>
+          <div>
+            <div className="flex items-center gap-2">
+              <h1 className="text-lg font-semibold text-mw-neutral-900 dark:text-white">
+                {isEditMode ? "Edit Line Item" : "Add Line Item"}
+              </h1>
+              {isPlannerRestricted && (
+                <span className="text-xs px-2 py-0.5 bg-purple-100 text-purple-700 rounded-full font-medium">
+                  Pacing & Creatives Only
+                </span>
+              )}
+            </div>
+            <p className="text-sm font-normal leading-normal text-mw-neutral-500 dark:text-mw-neutral-400">
+              {isPlannerRestricted 
+                ? "Only pacing and creatives can be modified for this Planner deal."
+                : "Follow the steps below to set up your line item."}
+            </p>
+          </div>
+        </div>
+      </div>
+
+      {/* Stepper - fixed at top of content area */}
+      <div className="flex-shrink-0 bg-white dark:bg-mw-gray-800 border-b border-mw-gray-100 dark:border-mw-gray-800">
+        <div className="w-full px-6 py-4">
+          <div className="flex items-start justify-between">
+            {steps.map((step, index) => {
+              const isActive = currentStep === step.id;
+              const isCompleted = completedSteps.includes(step.id);
+              const isAccessible = step.id <= currentStep || completedSteps.includes(step.id - 1);
+
+              return (
+                <div key={step.id} className="flex items-center flex-1">
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={() => handleStepClick(step.id)}
+                    disabled={!isAccessible}
+                    className={cn(
+                      "-mx-2 -my-1",
+                      isAccessible && "hover:bg-mw-neutral-50 dark:hover:bg-mw-neutral-800",
+                      !isAccessible && "opacity-50"
+                    )}
+                  >
+                    {isCompleted ? (
+                      <div className="flex items-center justify-center w-8 h-8 rounded-full shrink-0 bg-mw-success-600 text-white">
+                        <Check className="h-4 w-4" />
+                      </div>
+                    ) : isActive ? (
+                      <div className="flex items-center justify-center w-8 h-8 rounded-full shrink-0 bg-mw-primary-500 text-white text-sm font-medium">
+                        {step.id}
+                      </div>
+                    ) : (
+                      <span
+                        className={cn(
+                          "flex items-center justify-center w-8 h-8 text-sm font-medium shrink-0 text-mw-neutral-500 dark:text-mw-neutral-400"
+                        )}
+                      >
+                        {step.id}
+                      </span>
+                    )}
+                    <div className="text-left">
+                      <p
+                        className={cn(
+                          "text-sm font-semibold whitespace-nowrap",
+                          isCompleted && "text-mw-success-800 dark:text-mw-success-400",
+                          isActive && !isCompleted && "text-mw-neutral-900 dark:text-mw-neutral-100",
+                          !isActive && !isCompleted && "text-mw-neutral-500 dark:text-mw-neutral-400"
+                        )}
+                      >
+                        {step.label}
+                      </p>
+                      {step.optional && (
+                        <p className="text-xs text-mw-neutral-400 dark:text-mw-neutral-500">
+                          Optional
+                        </p>
+                      )}
+                    </div>
+                  </Button>
+                  {index < steps.length - 1 && (
+                    <div className="flex-1 mx-4 border-t-2 border-dashed border-mw-gray-200 dark:border-mw-gray-700" />
+                  )}
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      </div>
+
+      {/* Content Area - scrollable */}
+      <div className="flex-1 overflow-y-auto">
+        <div className="w-full px-6 py-6">
+          <div className="bg-white dark:bg-mw-gray-800 rounded-xl border border-mw-gray-200 dark:border-mw-gray-700 p-6">
+            {renderStepContent()}
+          </div>
+        </div>
+      </div>
+
+      {/* Fixed Footer with Navigation Buttons */}
+      <div className="flex-shrink-0 bg-white dark:bg-mw-gray-800 border-t border-mw-gray-200 dark:border-mw-gray-700 px-6 py-4">
+        <div className="flex justify-between items-center">
+          <div>
+            {currentStep > 1 && (
+              <Button
+                type="button"
+                variant="outline"
+                onClick={handlePrevious}
+                className="border border-mw-neutral-200 dark:border-mw-neutral-700 text-mw-neutral-700 dark:text-mw-neutral-300 hover:bg-mw-neutral-50 dark:hover:bg-mw-neutral-800 px-5 py-2"
+              >
+                <ChevronLeft className="mr-1.5 h-4 w-4" />
+                Previous Step
+              </Button>
+            )}
+          </div>
+          <div className="flex items-center gap-3">
+            {currentStep === totalSteps ? (
+              <Button
+                type="button"
+                onClick={() => setLocation(`/deals/${dealId}/line-items`)}
+                className="bg-mw-primary-500 hover:bg-mw-primary-600 text-white px-5 py-2"
+              >
+                Finish
+              </Button>
+            ) : (
+              <Button
+                type="submit"
+                form={steps[currentStep - 1].formId}
+                variant="outline"
+                disabled={isSaving}
+                className="border border-mw-primary-300 dark:border-mw-primary-600 text-mw-primary-600 dark:text-mw-primary-400 hover:bg-mw-primary-50 dark:hover:bg-mw-primary-900/20 px-5 py-2"
+              >
+                {isSaving ? (
+                  <>
+                    <Loader2 className="mr-1.5 h-4 w-4 animate-spin" />
+                    Saving...
+                  </>
+                ) : (
+                  <>
+                    Next Step
+                    <ChevronRight className="ml-1.5 h-4 w-4" />
+                  </>
+                )}
+              </Button>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}