@megaads/wm/playground/README.md

To install the library, use npm:

# WM Playground

Visual test cho `@megaads/wm` (đặc biệt là module `customization-teeinblue`). Cho phép paste/upload campaign JSON, render preview, tương tác với option để verify hành vi service.

## Chạy

```sh
# Cài deps cho cả wm-package (lần đầu) và playground
cd ..
npm install
cd playground
npm install
npm run dev
```

App mở tại http://localhost:5173.

> Nếu thấy lỗi resolve `lodash` khi build: chạy `npm install` ở `wm-package` root trước, vì source của package import lodash từ chính node_modules của nó.

## Cấu trúc

- `src/App.jsx` — root component, quản lý campaign JSON + service instance.
- `src/Preview.jsx` — render mockup + design layers bằng HTML/CSS absolute positioning.
- `src/OptionsPanel.jsx` — render template picker và layer controls theo `input_type`.
- `src/samples.js` — campaign JSON mẫu (1 artwork và 2 artworks).

## Tab trong panel chính

- **Preview**: visual render của `snapshot.mockup` + `snapshot.designLayers`.
- **Config payload**: `snapshot.config` (gửi khi add to cart).
- **State**: `service.getState()` (persist để restore).
- **Snapshot**: tóm tắt snapshot (artwork, template, print areas, layer options, design layers, fonts, validation).

## Test scenarios

### 1. Render template options

Click **Sample (2 artworks)** → panel phải sẽ hiển thị 2 group template, mỗi group có template tile. Validation báo `type: 'template'` error vì user chưa chọn → khẳng định Fix 3 hoạt động.

Click một template → validation error mất, preview hiện thiết kế.

### 2. Render layer options

Sample minimal có 3 control sau khi chọn template Classic:

- Text input "Pet name" (uppercase tự áp dụng vào preview)
- Grouped clipart "Pet type" (chọn group Cats/Dogs → chọn item)
- Text input "Quote"

### 3. Verify Fix 1 (reposition không cộng dồn)

Trong sample minimal, layer "Pet type" có `grouped_reposition`. Click qua lại giữa group "Cats" và "Dogs" 5-10 lần. Quan sát vị trí của clipart trên preview:
- **Trước fix**: clipart sẽ trôi xa dần (top/left bị cộng dồn).
- **Sau fix**: clipart luôn về đúng vị trí theo group hiện tại.

### 4. Verify Fix 2 (grouped clipart set value)

Trong sample minimal, layer "Pet type" có `required: true`. Chọn một item trong group:
- Validation `isValid: true` → khẳng định Fix 2 hoạt động.
- Tab "Config payload" → `layers[]` có entry cho `Pet type` với `value` là URL.

### 5. Save / restore state

1. Chọn template, nhập text, chọn clipart.
2. Click "Save state" (sidebar trái).
3. Click "Sample (1 artwork)" lại để reset.
4. Click "Restore state" → lựa chọn cũ load lại đầy đủ.

### 6. Test với campaign thật

**Cách 1 — Fetch trực tiếp từ Printerval (khuyến nghị)**

Nhập `product_id` (ví dụ `2638329004`) hoặc paste full URL kiểu `https://printerval.com/module/customization/blue/get-campaign-data?product_id=2638329004` vào ô **Fetch từ Printerval** → click **Fetch campaign**.

Vite dev server sẽ proxy request đến `https://printerval.com/...` với Referer + User-Agent kiểu browser để bypass 403. Response gốc của Printerval là `{ status: 'success', result: {…} }` — service tự unwrap `.result`.

**Cách 2 — Paste JSON**

Paste JSON response (ví dụ từ `https://api.teeinblue.com/api/merchant/campaigns/XXX.json`) vào textarea → click **Load JSON**.

**Cách 3 — Upload file**

Save response từ Network tab của DevTools → upload .json file.