Add contract e-signature step with PDF viewer and canvas pad (issue #6)

Frontend (step 5):
- PDF.js 3.11.174 from CDN renders the contract inline in a scrollable viewer
- Next button logic stays unlocked; signature pad is visually locked (greyed +
  pointer-events:none) until user scrolls to the bottom of the contract
- HTML5 canvas signature pad with mouse and touch support; Clear button resets
- Typed full name field required to confirm identity
- Fallback agreement text renders if /api/contracts/template returns 404,
  auto-marks as scrolled — photographer adds PDF later with no code change

Backend:
- GET /api/contracts/template — serves api/contracts/model-release.pdf
- POST /api/bookings/:id/sign — stamps signature image + name/date/booking ID
  onto the PDF via pdf-lib, saves to api/signed-contracts/<id>.pdf, updates
  contract_signed_at and contract_pdf_path in the bookings table, fires n8n
  webhook; gracefully skips PDF stamping if template is missing
- submitBooking() now calls POST /api/bookings then POST /api/bookings/:id/sign
  sequentially before showing the success screen

Closes #6

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

api/package-lock.json

@@ -11,7 +11,26 @@
         "better-sqlite3": "^9.4.3",
         "cors": "^2.8.5",
         "dotenv": "^16.4.5",
-        "express": "^4.18.3"
+        "express": "^4.18.3",
+        "pdf-lib": "^1.17.1"
+      }
+    },
+    "node_modules/@pdf-lib/standard-fonts": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@pdf-lib/standard-fonts/-/standard-fonts-1.0.0.tgz",
+      "integrity": "sha512-hU30BK9IUN/su0Mn9VdlVKsWBS6GyhVfqjwl1FjZN4TxP6cCw0jP2w7V3Hf5uX7M0AZJ16vey9yE0ny7Sa59ZA==",
+      "license": "MIT",
+      "dependencies": {
+        "pako": "^1.0.6"
+      }
+    },
+    "node_modules/@pdf-lib/upng": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@pdf-lib/upng/-/upng-1.0.1.tgz",
+      "integrity": "sha512-dQK2FUMQtowVP00mtIksrlZhdFXQZPC+taih1q4CvPZ5vqdxR/LKBaFg0oAfzd1GlHZXXSPdQfzQnt+ViGvEIQ==",
+      "license": "MIT",
+      "dependencies": {
+        "pako": "^1.0.10"
       }
     },
     "node_modules/accepts": {
@@ -820,6 +839,12 @@
         "wrappy": "1"
       }
     },
+    "node_modules/pako": {
+      "version": "1.0.11",
+      "resolved": "https://registry.npmjs.org/pako/-/pako-1.0.11.tgz",
+      "integrity": "sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==",
+      "license": "(MIT AND Zlib)"
+    },
     "node_modules/parseurl": {
       "version": "1.3.3",
       "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
@@ -835,6 +860,18 @@
       "integrity": "sha512-A/AGNMFN3c8bOlvV9RreMdrv7jsmF9XIfDeCd87+I8RNg6s78BhJxMu69NEMHBSJFxKidViTEdruRwEk/WIKqA==",
       "license": "MIT"
     },
+    "node_modules/pdf-lib": {
+      "version": "1.17.1",
+      "resolved": "https://registry.npmjs.org/pdf-lib/-/pdf-lib-1.17.1.tgz",
+      "integrity": "sha512-V/mpyJAoTsN4cnP31vc0wfNA1+p20evqqnap0KLoRUN0Yk/p3wN52DOEsL4oBFcLdb76hlpKPtzJIgo67j/XLw==",
+      "license": "MIT",
+      "dependencies": {
+        "@pdf-lib/standard-fonts": "^1.0.0",
+        "@pdf-lib/upng": "^1.0.1",
+        "pako": "^1.0.11",
+        "tslib": "^1.11.1"
+      }
+    },
     "node_modules/prebuild-install": {
       "version": "7.1.3",
       "resolved": "https://registry.npmjs.org/prebuild-install/-/prebuild-install-7.1.3.tgz",
@@ -1224,6 +1261,12 @@
         "node": ">=0.6"
       }
     },
+    "node_modules/tslib": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+      "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
+      "license": "0BSD"
+    },
     "node_modules/tunnel-agent": {
       "version": "0.6.0",
       "resolved": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.6.0.tgz",

api/package.json

@@ -10,6 +10,7 @@
     "better-sqlite3": "^9.4.3",
     "cors": "^2.8.5",
     "dotenv": "^16.4.5",
-    "express": "^4.18.3"
+    "express": "^4.18.3",
+    "pdf-lib": "^1.17.1"
   }
 }

api/server.js

@@ -1,11 +1,16 @@
 require('dotenv').config();
 const express = require('express');
 const cors = require('cors');
+const fs = require('fs');
+const path = require('path');
 const db = require('./db');
 
 const app = express();
 const PORT = process.env.PORT || 3001;
 
+const CONTRACTS_DIR = path.join(__dirname, 'contracts');
+const SIGNED_DIR = path.join(__dirname, 'signed-contracts');
+
 app.use(cors({ origin: process.env.CORS_ORIGIN || '*', credentials: true }));
 app.use(express.json({ limit: '10mb' }));
 
@@ -13,6 +18,17 @@ app.get('/api/health', (req, res) => {
   res.json({ ok: true });
 });
 
+// Serve the contract template PDF to the frontend PDF.js viewer
+app.get('/api/contracts/template', (req, res) => {
+  const contractPath = path.join(CONTRACTS_DIR, 'model-release.pdf');
+  if (!fs.existsSync(contractPath)) {
+    return res.status(404).json({ error: 'Contract template not available' });
+  }
+  res.setHeader('Content-Type', 'application/pdf');
+  res.setHeader('Cache-Control', 'no-store');
+  res.sendFile(contractPath);
+});
+
 app.post('/api/bookings', (req, res) => {
   const {
     client_name, client_email, client_phone, client_sub,
@@ -32,4 +48,78 @@ app.post('/api/bookings', (req, res) => {
   res.status(201).json({ id: result.lastInsertRowid });
 });
 
+// Stamp the signature onto the contract PDF and record it
+app.post('/api/bookings/:id/sign', async (req, res) => {
+  const id = parseInt(req.params.id, 10);
+  const { signature_png, full_name } = req.body;
+
+  if (!signature_png || !full_name) {
+    return res.status(400).json({ error: 'signature_png and full_name are required' });
+  }
+
+  const booking = db.prepare('SELECT * FROM bookings WHERE id = ?').get(id);
+  if (!booking) return res.status(404).json({ error: 'Booking not found' });
+
+  const contractTemplate = path.join(CONTRACTS_DIR, 'model-release.pdf');
+  let pdfPath = null;
+
+  if (fs.existsSync(contractTemplate)) {
+    try {
+      const { PDFDocument, rgb, StandardFonts } = require('pdf-lib');
+
+      const pdfBytes = fs.readFileSync(contractTemplate);
+      const pdfDoc = await PDFDocument.load(pdfBytes);
+      const pages = pdfDoc.getPages();
+
+      const sigPageIndex = Math.max(0, parseInt(process.env.CONTRACT_SIG_PAGE || '1', 10) - 1);
+      const sigX = parseFloat(process.env.CONTRACT_SIG_X || '100');
+      const sigY = parseFloat(process.env.CONTRACT_SIG_Y || '100');
+      const page = pages[Math.min(sigPageIndex, pages.length - 1)];
+
+      // Embed the signature image
+      const sigBase64 = signature_png.replace(/^data:image\/png;base64,/, '');
+      const sigImage = await pdfDoc.embedPng(Buffer.from(sigBase64, 'base64'));
+      const imgDims = sigImage.scaleToFit(200, 60);
+      page.drawImage(sigImage, { x: sigX, y: sigY, width: imgDims.width, height: imgDims.height });
+
+      // Print name, date, and booking ID below signature
+      const font = await pdfDoc.embedFont(StandardFonts.Helvetica);
+      const dateStr = new Date().toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' });
+      page.drawText(`${full_name}  ·  ${dateStr}  ·  Booking #${id}`, {
+        x: sigX,
+        y: sigY - 14,
+        size: 9,
+        font,
+        color: rgb(0.2, 0.2, 0.2),
+      });
+
+      fs.mkdirSync(SIGNED_DIR, { recursive: true });
+      const outPath = path.join(SIGNED_DIR, `${id}.pdf`);
+      fs.writeFileSync(outPath, await pdfDoc.save());
+      pdfPath = `signed-contracts/${id}.pdf`;
+    } catch (err) {
+      console.error('PDF stamping failed:', err.message);
+      // Non-fatal — still record the agreement
+    }
+  }
+
+  const now = new Date().toISOString();
+  db.prepare(`
+    UPDATE bookings SET contract_signed_at = ?, contract_pdf_path = ? WHERE id = ?
+  `).run(now, pdfPath, id);
+
+  // Fire n8n webhook asynchronously if configured
+  const webhookUrl = process.env.N8N_WEBHOOK_URL;
+  if (webhookUrl) {
+    const record = db.prepare('SELECT * FROM bookings WHERE id = ?').get(id);
+    fetch(webhookUrl, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ event: 'contract_signed', booking: record }),
+    }).catch(e => console.error('n8n webhook error:', e.message));
+  }
+
+  res.json({ ok: true, signed_at: now, pdf_path: pdfPath });
+});
+
 app.listen(PORT, () => console.log(`API listening on port ${PORT}`));