跳至主要内容

SBE Scenario 2: 確認簽收並上傳照片

場景描述​

配送員完成配送後，上傳簽收照片並將訂單狀態變更為「已簽收」。

Given（前置條件）​

系統狀態​

  • 當前日期: 2025-12-02
  • 當前租戶: ABC (ABC 花店)
  • 已登入用戶: 李配送 (ROLE_DELIVERY)

測試資料​

配送中訂單

{
  "orderId": "ABC-20251201-0001",
  "orderNumber": "ABC-20251201-0001",
  "tenantId": "ABC",
  "status": "out_for_delivery",
  "customer": {
    "name": "李大華",
    "phone": "0912-345-678"
  },
  "deliveryAddress": {
    "address": "台北市信義區信義路五段 7 號"
  },
  "deliveryDate": "2025-12-02",
  "deliveryTimeSlot": "14:00-18:00",
  "productionPhotos": [
    "https://cdn.example.com/photos/ABC-20251201-0001/design-1.jpg"
  ]
}

When（執行操作）​

步驟 1: 點擊確認簽收​

  • 配送員在訂單卡片上點擊「確認簽收」按鈕
  • 系統顯示照片上傳對話框（而非確認對話框）

步驟 2: 上傳簽收照片​

  • 對話框標題: 「上傳簽收照片」
  • 說明文字: 「請上傳至少一張簽收照片以確認收貨」
  • 配送員使用手機拍攝 1 張簽收照片
  • 照片預覽顯示

步驟 3: 確認簽收​

  • 「確認簽收」按鈕啟用（照片數量 >= 1）
  • 配送員點擊「確認簽收」按鈕

Then（預期結果）​

API 請求​

端點: PATCH /api/v1/orders/ABC-20251201-0001/status

Request Body

{
  "newStatus": "delivered",
  "photoUrls": [
    "https://cdn.example.com/photos/ABC-20251201-0001/receipt-1.jpg"
  ]
}

Response Body (200 OK)

{
  "orderId": "ABC-20251201-0001",
  "oldStatus": "out_for_delivery",
  "newStatus": "delivered",
  "updatedAt": "2025-12-02T15:30:00Z",
  "updatedBy": {
    "userId": "user-003",
    "userName": "李配送",
    "role": "ROLE_DELIVERY"
  },
  "message": "訂單狀態已更新為「已簽收」",
  "photoCount": 1
}

UI 反饋​

1. 成功訊息

  • Toast 通知: 「狀態更新成功」
  • 訊息類型: 成功（綠色）

2. 對話框關閉

  • 照片上傳對話框自動關閉
  • pendingAction 狀態清空

3. 列表更新

  • 訂單從「配送中」分組消失
  • 訂單不再顯示在配送員工作台（因狀態已變更為 delivered）

資料庫變更​

1. 更新 orders 表

UPDATE orders
SET status = 'delivered',
    updated_at = '2025-12-02T15:30:00Z'
WHERE order_id = 'ABC-20251201-0001';

2. 新增訂單照片記錄

{
  "orderId": "ABC-20251201-0001",
  "photoType": "delivery",
  "photos": [
    {
      "id": "photo-003",
      "url": "https://cdn.example.com/photos/ABC-20251201-0001/receipt-1.jpg",
      "uploadedAt": "2025-12-02T15:30:00Z",
      "uploadedBy": "user-003"
    }
  ]
}

3. 新增狀態歷史記錄

{
  "id": "history-005",
  "orderId": "ABC-20251201-0001",
  "tenantId": "ABC",
  "oldStatus": "out_for_delivery",
  "newStatus": "delivered",
  "timestamp": "2025-12-02T15:30:00Z",
  "operatorId": "user-003",
  "operatorName": "李配送",
  "operatorRole": "ROLE_DELIVERY",
  "description": "確認簽收，上傳簽收照片",
  "metadata": {
    "photoCount": 1,
    "photoType": "delivery"
  }
}

通知觸發​

Email 通知（發送給客戶）

親愛的李大華先生/小姐，

您的訂單 ABC-20251201-0001 已成功簽收！

簽收時間：2025-12-02 15:30
配送員：李配送

點擊查看簽收照片：
https://app.example.com/orders/ABC-20251201-0001/photos

感謝您的訂購！
ABC 花店

後續自動流轉​

若訂單支付狀態為「已支付」，系統將自動執行：

UPDATE orders
SET status = 'completed',
    updated_at = '2025-12-02T15:30:00Z'
WHERE order_id = 'ABC-20251201-0001'
  AND payment_status = 'paid';

錯誤場景​

未上傳照片嘗試簽收​

Given

  • 照片上傳對話框已開啟
  • 未選擇任何照片

When

  • 配送員查看「確認簽收」按鈕

Then

  • 按鈕為禁用狀態（disabled）
  • 無法點擊
  • 需上傳至少一張簽收照片才能繼續

驗證檢查清單​

照片上傳​

  • 照片上傳對話框正確顯示
  • 對話框標題為「上傳簽收照片」
  • 照片預覽功能正常
  • 至少一張照片驗證正確

狀態流轉​

  • 訂單狀態從 out_for_delivery 變更為 delivered
  • 照片類型標記為 delivery
  • 狀態歷史記錄包含照片資訊

通知系統​

  • 客戶收到簽收通知 Email
  • Email 包含簽收照片連結

UI 更新​

  • 對話框正確關閉
  • 訂單從列表消失
  • 成功通知顯示

最後更新: 2025-12-19