Canvas SDK

import express from 'express';
import crypto from 'crypto';

const app = express();
app.use(express.json());

const WIDGET_SECRET = process.env.DC_WIDGET_SECRET;

// Verify webhook signature
function verifySignature(req) {
  const signature = req.headers['x-dc-signature'];
  const timestamp = req.headers['x-dc-timestamp'];
  const body = JSON.stringify(req.body);
  
  const expected = crypto
    .createHmac('sha256', WIDGET_SECRET)
    .update(timestamp + '.' + body)
    .digest('hex');
  
  return 'sha256=' + expected === signature;
}

// Canvas webhook endpoint
app.post('/canvas/webhook', async (req, res) => {
  // Verify signature
  if (!verifySignature(req)) {
    return res.status(401).json({ error: 'Invalid signature' });
  }
  
  const { event, context, action, input_values } = req.body;
  
  // Handle initial render
  if (event === 'canvas.render') {
    // Fetch data from your CRM
    const crmData = await fetchFromCRM(context.contact_id);
    
    return res.json({
      canvas: {
        content: {
          components: [
            { type: 'text', text: 'CRM Data', style: 'header' },
            { type: 'divider' },
            { 
              type: 'list',
              items: [
                { type: 'item', title: 'Pipeline', subtitle: crmData.pipeline },
                { type: 'item', title: 'Deal Value', subtitle: crmData.dealValue }
              ]
            },
            { type: 'spacer', size: 'medium' },
            {
              type: 'dropdown',
              id: 'status',
              label: 'Update Status',
              options: [
                { value: 'new', label: 'New Lead' },
                { value: 'contacted', label: 'Contacted' },
                { value: 'qualified', label: 'Qualified' }
              ]
            },
            { type: 'spacer', size: 'small' },
            {
              type: 'button',
              label: 'Save',
              style: 'primary',
              action: {
                type: 'submit',
                payload: { action: 'update_status' }
              }
            }
          ]
        }
      }
    });
  }
  
  // Handle button actions
  if (event === 'canvas.action') {
    if (action.payload.action === 'update_status') {
      await updateCRMStatus(context.contact_id, input_values.status);
      
      return res.json({
        toast: {
          type: 'success',
          message: 'Status updated to ' + input_values.status
        }
      });
    }
  }
  
  res.status(400).json({ error: 'Unknown event' });
});

app.listen(3000, () => {
  console.log('Canvas webhook server running on port 3000');
});