generated from coulomb/repo-seed
Add document lifecycle tracking with order/production status
- Extended PDFStatus with full lifecycle: pending → uploading → in_basket → ordering → in_production → sent/canceled - Added shipDocument() and getDocumentStatus() API methods - Grouped UI sections: Ready to Upload, In Basket, In Production, Completed - Order button for documents in basket to place production order - Refresh button to check current status from Binect server - Display price and recipient address for uploaded documents - Status icons and color-coded indicators for each state Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
@@ -4,10 +4,10 @@
|
||||
|
||||
import './popup.css';
|
||||
import { loadCredentials, saveCredentials, deleteCredentials, updateLastUse } from '../utils/storage';
|
||||
import { uploadPDF, testConnection, BinectAPIError } from '../utils/binect-api';
|
||||
import { uploadPDF, testConnection, BinectAPIError, Document } from '../utils/binect-api';
|
||||
import { fetchPDFBytes, DetectedPDF } from '../utils/pdf-detector';
|
||||
import { addTrackingEntry } from '../tracking/tracker';
|
||||
import { PDFQueueEntry, PDFStatus } from '../utils/pdf-queue';
|
||||
import { PDFQueueEntry, PDFStatus, PDFStatusMeta } from '../utils/pdf-queue';
|
||||
|
||||
// DOM Elements
|
||||
const authView = document.getElementById('authView')!;
|
||||
@@ -152,8 +152,8 @@ async function handleLogin(e: Event) {
|
||||
async function loadPDFQueue() {
|
||||
console.log('[Popup] Loading PDF queue...');
|
||||
|
||||
// Get queue from background script
|
||||
const response = await chrome.runtime.sendMessage({ action: 'getPDFQueue' });
|
||||
// Get all PDFs from background script (including completed ones)
|
||||
const response = await chrome.runtime.sendMessage({ action: 'getAllPDFs' });
|
||||
pdfQueue = response?.entries || [];
|
||||
console.log('[Popup] Got', pdfQueue.length, 'entries from background');
|
||||
|
||||
@@ -238,13 +238,19 @@ async function checkRecentDownloads(): Promise<DetectedPDF[]> {
|
||||
}
|
||||
|
||||
/**
|
||||
* Render the PDF list
|
||||
* Render the PDF list with grouped sections
|
||||
*/
|
||||
function renderPDFList() {
|
||||
// Filter to only pending and failed PDFs
|
||||
const pending = pdfQueue.filter(p => p.status === 'pending' || p.status === 'failed');
|
||||
// Group PDFs by status category
|
||||
const pendingUpload = pdfQueue.filter(p => p.status === 'pending' || p.status === 'uploading' || p.status === 'failed');
|
||||
const inBasket = pdfQueue.filter(p => p.status === 'in_basket' || p.status === 'ordering');
|
||||
const inProduction = pdfQueue.filter(p => p.status === 'in_production');
|
||||
const completed = pdfQueue.filter(p => p.status === 'sent' || p.status === 'canceled');
|
||||
|
||||
if (pending.length === 0) {
|
||||
// Count actionable items
|
||||
const actionableCount = pendingUpload.length + inBasket.length;
|
||||
|
||||
if (pdfQueue.length === 0) {
|
||||
showNoPDF();
|
||||
return;
|
||||
}
|
||||
@@ -253,27 +259,117 @@ function renderPDFList() {
|
||||
pdfListView.style.display = 'block';
|
||||
|
||||
// Update count
|
||||
pdfCount.textContent = `${pending.length} PDF${pending.length > 1 ? 's' : ''} ready`;
|
||||
if (actionableCount > 0) {
|
||||
pdfCount.textContent = `${actionableCount} PDF${actionableCount > 1 ? 's' : ''} need attention`;
|
||||
} else if (inProduction.length > 0) {
|
||||
pdfCount.textContent = `${inProduction.length} in production`;
|
||||
} else {
|
||||
pdfCount.textContent = `${completed.length} completed`;
|
||||
}
|
||||
|
||||
// Render list items
|
||||
pdfList.innerHTML = pending.map(pdf => `
|
||||
<div class="pdf-list-item ${pdf.status}" data-id="${escapeHtml(pdf.id)}">
|
||||
<div class="pdf-item-icon">📄</div>
|
||||
<div class="pdf-item-details">
|
||||
<div class="pdf-item-filename" title="${escapeHtml(pdf.filename)}">${escapeHtml(pdf.filename)}</div>
|
||||
<div class="pdf-item-meta">${formatFileSize(pdf.size)} · ${escapeHtml(pdf.sourceDomain)}</div>
|
||||
<div class="pdf-item-status ${pdf.status === 'failed' ? 'error' : ''}">${getStatusText(pdf)}</div>
|
||||
</div>
|
||||
<div class="pdf-item-actions">
|
||||
// Build HTML for each section
|
||||
let html = '';
|
||||
|
||||
if (pendingUpload.length > 0) {
|
||||
html += `<div class="pdf-section">
|
||||
<div class="pdf-section-header">Ready to Upload</div>
|
||||
${pendingUpload.map(pdf => renderPDFItem(pdf, 'pending')).join('')}
|
||||
</div>`;
|
||||
}
|
||||
|
||||
if (inBasket.length > 0) {
|
||||
html += `<div class="pdf-section">
|
||||
<div class="pdf-section-header">In Basket</div>
|
||||
${inBasket.map(pdf => renderPDFItem(pdf, 'basket')).join('')}
|
||||
</div>`;
|
||||
}
|
||||
|
||||
if (inProduction.length > 0) {
|
||||
html += `<div class="pdf-section">
|
||||
<div class="pdf-section-header">In Production</div>
|
||||
${inProduction.map(pdf => renderPDFItem(pdf, 'production')).join('')}
|
||||
</div>`;
|
||||
}
|
||||
|
||||
if (completed.length > 0) {
|
||||
// Show only last 5 completed items
|
||||
const recentCompleted = completed.slice(0, 5);
|
||||
html += `<div class="pdf-section pdf-section-completed">
|
||||
<div class="pdf-section-header">Recently Completed</div>
|
||||
${recentCompleted.map(pdf => renderPDFItem(pdf, 'completed')).join('')}
|
||||
</div>`;
|
||||
}
|
||||
|
||||
pdfList.innerHTML = html;
|
||||
|
||||
// Add event listeners
|
||||
setupPDFListEventListeners();
|
||||
hideStatus();
|
||||
}
|
||||
|
||||
/**
|
||||
* Render a single PDF item
|
||||
*/
|
||||
function renderPDFItem(pdf: PDFQueueEntry, section: 'pending' | 'basket' | 'production' | 'completed'): string {
|
||||
const statusClass = getStatusClass(pdf.status);
|
||||
const statusText = getStatusText(pdf);
|
||||
const priceText = pdf.price ? `${(pdf.price / 100).toFixed(2)} €` : '';
|
||||
|
||||
let actionsHtml = '';
|
||||
|
||||
switch (section) {
|
||||
case 'pending':
|
||||
actionsHtml = `
|
||||
<button class="btn-send-item" data-id="${escapeHtml(pdf.id)}" ${pdf.status === 'uploading' ? 'disabled' : ''}>
|
||||
${pdf.status === 'uploading' ? 'Sending...' : (pdf.status === 'failed' ? 'Retry' : 'Send')}
|
||||
${pdf.status === 'uploading' ? 'Uploading...' : (pdf.status === 'failed' ? 'Retry' : 'Upload')}
|
||||
</button>
|
||||
<button class="btn-dismiss" data-id="${escapeHtml(pdf.id)}">Dismiss</button>
|
||||
`;
|
||||
break;
|
||||
case 'basket':
|
||||
actionsHtml = `
|
||||
<button class="btn-order-item" data-id="${escapeHtml(pdf.id)}" ${pdf.status === 'ordering' ? 'disabled' : ''}>
|
||||
${pdf.status === 'ordering' ? 'Ordering...' : 'Order'}
|
||||
</button>
|
||||
<button class="btn-dismiss" data-id="${escapeHtml(pdf.id)}">Cancel</button>
|
||||
`;
|
||||
break;
|
||||
case 'production':
|
||||
actionsHtml = `
|
||||
<button class="btn-refresh-item" data-id="${escapeHtml(pdf.id)}">Refresh</button>
|
||||
`;
|
||||
break;
|
||||
case 'completed':
|
||||
actionsHtml = `
|
||||
<button class="btn-dismiss btn-remove" data-id="${escapeHtml(pdf.id)}">Remove</button>
|
||||
`;
|
||||
break;
|
||||
}
|
||||
|
||||
return `
|
||||
<div class="pdf-list-item ${statusClass}" data-id="${escapeHtml(pdf.id)}">
|
||||
<div class="pdf-item-icon">${getStatusIcon(pdf.status)}</div>
|
||||
<div class="pdf-item-details">
|
||||
<div class="pdf-item-filename" title="${escapeHtml(pdf.filename)}">${escapeHtml(pdf.filename)}</div>
|
||||
<div class="pdf-item-meta">
|
||||
${formatFileSize(pdf.size)} · ${escapeHtml(pdf.sourceDomain)}
|
||||
${priceText ? ` · <span class="pdf-price">${priceText}</span>` : ''}
|
||||
</div>
|
||||
${pdf.recipientAddress ? `<div class="pdf-item-recipient">${escapeHtml(pdf.recipientAddress.split('\n')[0])}</div>` : ''}
|
||||
<div class="pdf-item-status ${statusClass}">${statusText}</div>
|
||||
</div>
|
||||
<div class="pdf-item-actions">
|
||||
${actionsHtml}
|
||||
</div>
|
||||
</div>
|
||||
`).join('');
|
||||
`;
|
||||
}
|
||||
|
||||
// Add event listeners to buttons
|
||||
/**
|
||||
* Setup event listeners for PDF list items
|
||||
*/
|
||||
function setupPDFListEventListeners() {
|
||||
// Upload/Send buttons
|
||||
pdfList.querySelectorAll('.btn-send-item').forEach(btn => {
|
||||
btn.addEventListener('click', (e) => {
|
||||
const id = (e.target as HTMLElement).dataset.id;
|
||||
@@ -281,14 +377,29 @@ function renderPDFList() {
|
||||
});
|
||||
});
|
||||
|
||||
// Order buttons
|
||||
pdfList.querySelectorAll('.btn-order-item').forEach(btn => {
|
||||
btn.addEventListener('click', (e) => {
|
||||
const id = (e.target as HTMLElement).dataset.id;
|
||||
if (id) handleOrderPDF(id);
|
||||
});
|
||||
});
|
||||
|
||||
// Refresh buttons
|
||||
pdfList.querySelectorAll('.btn-refresh-item').forEach(btn => {
|
||||
btn.addEventListener('click', (e) => {
|
||||
const id = (e.target as HTMLElement).dataset.id;
|
||||
if (id) handleRefreshStatus(id);
|
||||
});
|
||||
});
|
||||
|
||||
// Dismiss/Cancel/Remove buttons
|
||||
pdfList.querySelectorAll('.btn-dismiss').forEach(btn => {
|
||||
btn.addEventListener('click', (e) => {
|
||||
const id = (e.target as HTMLElement).dataset.id;
|
||||
if (id) handleDismissPDF(id);
|
||||
});
|
||||
});
|
||||
|
||||
hideStatus();
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -296,17 +407,80 @@ function renderPDFList() {
|
||||
*/
|
||||
function getStatusText(pdf: PDFQueueEntry): string {
|
||||
switch (pdf.status) {
|
||||
case 'pending':
|
||||
return formatTimestamp(pdf.timestamp);
|
||||
case 'uploading':
|
||||
return 'Uploading...';
|
||||
case 'failed':
|
||||
return pdf.errorMessage || 'Upload failed';
|
||||
case 'in_basket':
|
||||
return pdf.binectStatusText || 'Ready to order';
|
||||
case 'ordering':
|
||||
return 'Ordering...';
|
||||
case 'in_production':
|
||||
return pdf.binectStatusText || 'In production';
|
||||
case 'sent':
|
||||
return 'Sent successfully';
|
||||
case 'canceled':
|
||||
return 'Canceled';
|
||||
default:
|
||||
return formatTimestamp(pdf.timestamp);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle send PDF
|
||||
* Get CSS class for status
|
||||
*/
|
||||
function getStatusClass(status: PDFStatus): string {
|
||||
switch (status) {
|
||||
case 'pending':
|
||||
return 'pending';
|
||||
case 'uploading':
|
||||
case 'ordering':
|
||||
return 'uploading';
|
||||
case 'failed':
|
||||
return 'failed';
|
||||
case 'in_basket':
|
||||
return 'in-basket';
|
||||
case 'in_production':
|
||||
return 'in-production';
|
||||
case 'sent':
|
||||
return 'sent';
|
||||
case 'canceled':
|
||||
return 'canceled';
|
||||
default:
|
||||
return '';
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Get icon for status
|
||||
*/
|
||||
function getStatusIcon(status: PDFStatus): string {
|
||||
switch (status) {
|
||||
case 'pending':
|
||||
return '📄';
|
||||
case 'uploading':
|
||||
return '⏳';
|
||||
case 'failed':
|
||||
return '❌';
|
||||
case 'in_basket':
|
||||
return '🛒';
|
||||
case 'ordering':
|
||||
return '⏳';
|
||||
case 'in_production':
|
||||
return '🏭';
|
||||
case 'sent':
|
||||
return '✅';
|
||||
case 'canceled':
|
||||
return '🚫';
|
||||
default:
|
||||
return '📄';
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle send PDF (upload to Binect)
|
||||
*/
|
||||
async function handleSendPDF(id: string) {
|
||||
const pdf = pdfQueue.find(p => p.id === id);
|
||||
@@ -349,19 +523,38 @@ async function handleSendPDF(id: string) {
|
||||
// Update last use timestamp
|
||||
await updateLastUse();
|
||||
|
||||
// Update status to uploaded
|
||||
// Extract price and recipient from document response
|
||||
const meta: PDFStatusMeta = {
|
||||
binectDocumentId: document.id,
|
||||
binectStatus: document.status.code,
|
||||
binectStatusText: document.status.text
|
||||
};
|
||||
|
||||
if (document.letter?.letterData) {
|
||||
meta.price = document.letter.letterData.price?.priceAfterTax;
|
||||
meta.recipientAddress = document.letter.letterData.recipientAddress;
|
||||
}
|
||||
|
||||
// Update status to in_basket (document is now SHIPPABLE)
|
||||
await chrome.runtime.sendMessage({
|
||||
action: 'updatePDFStatus',
|
||||
id,
|
||||
status: 'uploaded',
|
||||
meta: { binectDocumentId: document.id }
|
||||
status: 'in_basket',
|
||||
meta
|
||||
});
|
||||
|
||||
// Remove from local queue
|
||||
pdfQueue = pdfQueue.filter(p => p.id !== id);
|
||||
// Update local state
|
||||
pdf.status = 'in_basket';
|
||||
pdf.binectDocumentId = document.id;
|
||||
pdf.binectStatus = document.status.code;
|
||||
pdf.binectStatusText = document.status.text;
|
||||
if (document.letter?.letterData) {
|
||||
pdf.price = document.letter.letterData.price?.priceAfterTax;
|
||||
pdf.recipientAddress = document.letter.letterData.recipientAddress;
|
||||
}
|
||||
renderPDFList();
|
||||
|
||||
showStatus(`Sent! Document ID: ${document.id}`, 'success');
|
||||
showStatus(`Uploaded! Ready to order (${(pdf.price || 0) / 100} €)`, 'success');
|
||||
|
||||
// Hide status after 3 seconds
|
||||
setTimeout(() => {
|
||||
@@ -412,6 +605,154 @@ async function handleSendPDF(id: string) {
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle order PDF (ship document to production)
|
||||
*/
|
||||
async function handleOrderPDF(id: string) {
|
||||
const pdf = pdfQueue.find(p => p.id === id);
|
||||
if (!pdf || !currentCredentials || !pdf.binectDocumentId) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Update local state
|
||||
pdf.status = 'ordering';
|
||||
renderPDFList();
|
||||
|
||||
// Notify background
|
||||
await chrome.runtime.sendMessage({
|
||||
action: 'updatePDFStatus',
|
||||
id,
|
||||
status: 'ordering'
|
||||
});
|
||||
|
||||
try {
|
||||
// Ship the document
|
||||
const result = await chrome.runtime.sendMessage({
|
||||
action: 'shipDocument',
|
||||
documentId: pdf.binectDocumentId,
|
||||
username: currentCredentials.username,
|
||||
password: currentCredentials.password
|
||||
});
|
||||
|
||||
if (!result.success) {
|
||||
throw new Error(result.error || 'Failed to ship document');
|
||||
}
|
||||
|
||||
// Update status to in_production
|
||||
const meta: PDFStatusMeta = {
|
||||
binectStatus: result.status,
|
||||
binectStatusText: result.statusText
|
||||
};
|
||||
|
||||
await chrome.runtime.sendMessage({
|
||||
action: 'updatePDFStatus',
|
||||
id,
|
||||
status: 'in_production',
|
||||
meta
|
||||
});
|
||||
|
||||
// Update local state
|
||||
pdf.status = 'in_production';
|
||||
pdf.binectStatus = result.status;
|
||||
pdf.binectStatusText = result.statusText;
|
||||
renderPDFList();
|
||||
|
||||
showStatus('Order placed! Document is in production.', 'success');
|
||||
|
||||
// Hide status after 3 seconds
|
||||
setTimeout(() => {
|
||||
hideStatus();
|
||||
}, 3000);
|
||||
|
||||
} catch (error) {
|
||||
const errorMessage = error instanceof Error ? error.message : 'Order failed';
|
||||
|
||||
// Revert to in_basket status
|
||||
await chrome.runtime.sendMessage({
|
||||
action: 'updatePDFStatus',
|
||||
id,
|
||||
status: 'in_basket',
|
||||
meta: { errorMessage }
|
||||
});
|
||||
|
||||
// Update local state
|
||||
pdf.status = 'in_basket';
|
||||
pdf.errorMessage = errorMessage;
|
||||
renderPDFList();
|
||||
|
||||
showStatus(errorMessage, 'error');
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle refresh document status
|
||||
*/
|
||||
async function handleRefreshStatus(id: string) {
|
||||
const pdf = pdfQueue.find(p => p.id === id);
|
||||
if (!pdf || !currentCredentials || !pdf.binectDocumentId) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
// Get current status from Binect
|
||||
const result = await chrome.runtime.sendMessage({
|
||||
action: 'getDocumentStatus',
|
||||
documentId: pdf.binectDocumentId,
|
||||
username: currentCredentials.username,
|
||||
password: currentCredentials.password
|
||||
});
|
||||
|
||||
if (!result.success) {
|
||||
throw new Error(result.error || 'Failed to get status');
|
||||
}
|
||||
|
||||
// Determine new local status based on Binect status code
|
||||
let newStatus: PDFStatus = pdf.status;
|
||||
if (result.status === 5) {
|
||||
newStatus = 'sent';
|
||||
} else if (result.status === 6) {
|
||||
newStatus = 'canceled';
|
||||
} else if (result.status === 3 || result.status === 4) {
|
||||
newStatus = 'in_production';
|
||||
} else if (result.status === 2) {
|
||||
newStatus = 'in_basket';
|
||||
}
|
||||
|
||||
const meta: PDFStatusMeta = {
|
||||
binectStatus: result.status,
|
||||
binectStatusText: result.statusText,
|
||||
price: result.price,
|
||||
recipientAddress: result.recipientAddress
|
||||
};
|
||||
|
||||
// Update in background
|
||||
await chrome.runtime.sendMessage({
|
||||
action: 'updatePDFStatus',
|
||||
id,
|
||||
status: newStatus,
|
||||
meta
|
||||
});
|
||||
|
||||
// Update local state
|
||||
pdf.status = newStatus;
|
||||
pdf.binectStatus = result.status;
|
||||
pdf.binectStatusText = result.statusText;
|
||||
if (result.price) pdf.price = result.price;
|
||||
if (result.recipientAddress) pdf.recipientAddress = result.recipientAddress;
|
||||
renderPDFList();
|
||||
|
||||
showStatus(`Status: ${result.statusText}`, 'success');
|
||||
|
||||
setTimeout(() => {
|
||||
hideStatus();
|
||||
}, 3000);
|
||||
|
||||
} catch (error) {
|
||||
const errorMessage = error instanceof Error ? error.message : 'Failed to refresh';
|
||||
showStatus(errorMessage, 'error');
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle dismiss PDF
|
||||
*/
|
||||
|
||||
Reference in New Issue
Block a user