Order Creation Wizard

The Order Creation Wizard guides customers through placing one or more service orders. It uses a step indicator showing progress through 4 steps.

Wizard Steps

① Confirm Address → ② Select Services → ③ Upload Documents → ④ Confirmation & Payment

Each step shows a progress bar with circular step indicators. Completed steps display a green checkmark. The current step is highlighted in the primary colour (#133146).

Step 1: Confirm Address

Route: GET /project/{id}/confirm-address

Layout

Two-column layout:

• Left column (wider): Interactive Leaflet map
• Right column: Address confirmation card with gradient background (#133146 to #1a4d6b)

Map Features

• Property location marker (pin)
• Parcel polygon overlay — drawn from SPI geometry via VicPlan geocoder
• Map height responsive: clamp(260px, 55vh, 420px) on desktop, 200px on mobile
• SPI number displayed as a map overlay

Address Card

• "Property Address" heading with "Step 1 of 4" badge
• Full formatted address
• Project info: SPI, Job Number (if available)
• "Confirm & Continue" button (green) — posts to /ordering/project/{id}/confirm-address-save, then redirects to step 2 after 500ms
• "Back to Search" button — returns to dashboard with confirmation dialog

How Address Is Resolved

The controller fetches project data from the v3 API, then:

1. Attempts SPI-based geocoding via VicPlan
2. Falls back to address-based geocoding
3. Fetches parcel geometry (GeoJSON polygon) for the map

Step 2: Select Services

Route: GET /project/{id}/select-orders

Layout

Two-column layout:

• Left (main): Service selection grid
• Right (sticky sidebar): Order summary

Project Info Bar

A gradient banner at the top shows the project address, SPI, and other details.

Service Cards

• Displayed in a 3-column grid (responsive: 2 columns on tablet, 1 on mobile)
• Each card shows:
  • Checkbox (top-right corner)
  • Icon for the service type
  • Title — service name
  • Description — truncated to 2 lines, tooltip on hover for full text
  • Price — displayed at bottom

Selection Behaviour

• Click anywhere on the card to toggle selection
• Selected cards get a green border and gradient background
• A search box at the top filters services in real-time

Order Summary Sidebar (sticky)

• Title with selected count badge (e.g., "Selected Orders (3)")
• List of selected service names
• Running total calculated from selected prices
• "Continue" button — disabled until at least one service is selected

What Happens on Continue

• Frontend calls POST /ordering/api/projects/{projectId}/orders/batch with selected userGroupServiceIds
• Creates all orders in one transaction
• Redirects to Step 3 (documents upload)

Account Check

The page checks whether the user's company hasAccount for payment — this determines payment options shown in Step 4.

Step 3: Upload Documents

Route: GET /orders/documents/multiple?order_ids=1,2,3

This is the most complex page in the portal (~110KB of JavaScript, 1480 lines of CSS).

Service Overview Section

• 3-column grid of service cards (one per order)
• Each card shows:
  • Service title and status badge
  • Required documents list (must be uploaded before submission)
  • Optional documents list
  • Drag-and-drop hint

Upload Area

• Drag-and-drop zone — drop files directly onto the page or service cards
• Browse button — click to open file picker
• Accepted formats: PDF, DOC, DOCX, JPG, PNG, ZIP (max 100MB)
• Upload goes to POST /orders/documents/multiple/upload
• Progress bar shown during upload

Documents Table

After upload, documents appear in a table with:

Document Assignment

• Each uploaded document can be assigned to one or more orders
• Assignment is done via a modal with:
  • Order checkboxes
  • Document Type dropdown (Select2)
  • Document Subcategory dropdown (Select2)
• Calls POST /orders/documents/multiple/assign

Versioning

• Documents are versioned by: project + document type + subcategory + filename
• Version badges show (v1, v2, v3, etc.)
• Click the version badge to see full version history in a modal

Bulk Operations

• Select All checkbox
• Bulk Reassign — reassign multiple documents at once
• Bulk Delete — delete multiple documents

Continue Button

• "Continue to Confirmation" button at the bottom
• Validates that required documents are uploaded before allowing continuation

Step 4: Confirmation

Route: GET /orders/confirmation/multiple?order_ids=1,2,3

Success Banner

• Green checkmark icon
• Success title and message

Order Summary

A card listing all orders being submitted:

• Order ID and service name per row
• Price per order
• Attached documents count
• Option to remove individual orders from the batch

Total Price

• Displayed prominently in a gradient banner
• Sum of all pending (not yet submitted) orders

Payment Options

See Payment & Submission for details on the three payment flows.

Action Buttons

• "Back to Dashboard" — returns without submitting
• "Proceed to Payment for All Orders" or "Submit Orders" (for free orders)