📧 Comprehensive Email Campaign Designer

\n \n {/* Header Design Section */}\n

Header Design

\n Header Background Color\n setHeaderDesign({...headerDesign, backgroundColor: e.target.value})}\n />\n

\n Header Text Color\n setHeaderDesign({...headerDesign, textColor: e.target.value})}\n />\n

\n Newsletter Title\n setHeaderDesign({...headerDesign, title: e.target.value})}\n placeholder=\"Enter newsletter title\"\n />\n

\n\n {/* Body Design Section */}\n

Body Design

\n Body Background Color\n setBodyDesign({...bodyDesign, backgroundColor: e.target.value})}\n />\n

\n Body Text Color\n setBodyDesign({...bodyDesign, textColor: e.target.value})}\n />\n

\n Font Family\n \n

\n Email Content\n

setBodyDesign({...bodyDesign, content: e.target.value})}\n            style={{\n              width: '100%',\n              height: '200px',\n              backgroundColor: bodyDesign.backgroundColor,\n              color: bodyDesign.textColor,\n              fontFamily: bodyDesign.fontFamily,\n              fontSize: `${bodyDesign.fontSize}px`,\n              lineHeight: bodyDesign.lineHeight\n            }}\n            placeholder=\"Write your email content here...\"\n          />\n        </div>\n      </div>\n\n      {/* Footer Design Section */}\n      <div style={styles.sectionContainer}>\n        <h3>Footer Design</h3>\n        <div style={styles.controlGroup}>\n          <label>Footer Background Color</label>\n          <input \n            type=\"color\" \n            value={footerDesign.backgroundColor}\n            onChange={(e) => setFooterDesign({...footerDesign, backgroundColor: e.target.value})}\n          />\n        </div>\n        <div style={styles.controlGroup}>\n          <label>Footer Text Color</label>\n          <input \n            type=\"color\" \n            value={footerDesign.textColor}\n            onChange={(e) => setFooterDesign({...footerDesign, textColor: e.target.value})}\n          />\n        </div>\n        <div style={styles.controlGroup}>\n          <label>Company Name</label>\n          <input \n            type=\"text\"\n            value={footerDesign.companyName}\n            onChange={(e) => setFooterDesign({...footerDesign, companyName: e.target.value})}\n            placeholder=\"Enter company name\"\n          />\n        </div>\n        <div style={styles.controlGroup}>\n          <label>Unsubscribe Text</label>\n          <input \n            type=\"text\"\n            value={footerDesign.unsubscribeText}\n            onChange={(e) => setFooterDesign({...footerDesign, unsubscribeText: e.target.value})}\n            placeholder=\"Unsubscribe text\"\n          />\n        </div>\n      </div>\n\n      <button \n        onClick={handleSubmit}\n        style={styles.button}\n      >\n        Create Campaign\n      </button>\n    </div>\n  );\n}\n\n// Rest of the previous code remains the same... \n\nexport default async function server(request: Request): Promise<Response> {\n  const { sqlite } = await import(\"https://esm.town/v/stevekrouse/sqlite\");\n  const { email } = await import(\"https://esm.town/v/std/email\");\n  const KEY = \"smartCrimsonBedbug\";\n  const SCHEMA_VERSION = 3;\n\n  // Create more detailed campaigns and subscribers tables\n  await sqlite.execute(`\n    CREATE TABLE IF NOT EXISTS ${KEY}_subscribers_${SCHEMA_VERSION} (\n      id INTEGER PRIMARY KEY AUTOINCREMENT,\n      email TEXT UNIQUE NOT NULL,\n      verified BOOLEAN DEFAULT 0,\n      subscribed_at DATETIME DEFAULT CURRENT_TIMESTAMP\n    )\n  `);\n\n  await sqlite.execute(`\n    CREATE TABLE IF NOT EXISTS ${KEY}_campaigns_${SCHEMA_VERSION} (\n      id INTEGER PRIMARY KEY AUTOINCREMENT,\n      design TEXT NOT NULL,\n      sent_at DATETIME DEFAULT CURRENT_TIMESTAMP,\n      total_recipients INTEGER,\n      successful_sends INTEGER,\n      failed_sends INTEGER\n    )\n  `);\n\n  await sqlite.execute(`\n    CREATE TABLE IF NOT EXISTS ${KEY}_email_logs_${SCHEMA_VERSION} (\n      id INTEGER PRIMARY KEY AUTOINCREMENT,\n      recipient TEXT NOT NULL,\n      campaign_id INTEGER,\n      status TEXT NOT NULL,\n      error_message TEXT,\n      sent_at DATETIME DEFAULT CURRENT_TIMESTAMP\n    )\n  `);\n\n  // Handle campaign sending endpoint\n  if (request.method === 'POST' && new URL(request.url).pathname === '/send-campaign') {\n    try {\n      const { design, subscribers } = await request.json();\n\n      // Validate input\n      if (!design || !subscribers || subscribers.length === 0) {\n        return Response.json({ \n          success: false, \n          message: 'Invalid campaign data' \n        });\n      }\n\n      // Validate email addresses\n      const validEmails = subscribers.filter(email => \n        /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/.test(email)\n      );\n\n      if (validEmails.length === 0) {\n        return Response.json({ \n          success: false, \n          message: 'No valid email addresses found' \n        });\n      }\n\n      // Store campaign in database\n      const campaignResult = await sqlite.execute(`\n        INSERT INTO ${KEY}_campaigns_${SCHEMA_VERSION} \n        (design, total_recipients, successful_sends, failed_sends) \n        VALUES (?, ?, 0, 0)\n      `, [JSON.stringify(design), validEmails.length]);\n\n      const campaignId = campaignResult.lastInsertRowid;\n\n      // Send emails to subscribers with comprehensive logging\n      const emailResults = await Promise.all(validEmails.map(async (recipient) => {\n        try {\n          await email({\n            to: [recipient],\n            subject: design.header.title || 'Your Newsletter',\n            html: `\n              <div style=\"font-family: Arial, sans-serif; max-width: 600px; margin: 0 auto;\">\n                \n                <div style=\"\n                  background-color: ${design.header.backgroundColor};\n                  color: ${design.header.textColor};\n                  padding: 20px;\n                  text-align: center;\n                \">\n                  <h1>${design.header.title}</h1>\n                </div>\n\n                \n                <div style=\"\n                  background-color: ${design.body.backgroundColor};\n                  color: ${design.body.textColor};\n                  font-family: ${design.body.fontFamily};\n                  font-size: ${design.body.fontSize}px;\n                  line-height: ${design.body.lineHeight};\n                  padding: 20px;\n                \">\n                  ${design.body.content}\n                </div>\n\n                \n                <div style=\"\n                  background-color: ${design.footer.backgroundColor};\n                  color: ${design.footer.textColor};\n                  padding: 20px;\n                  text-align: center;\n                  font-size: 12px;\n                \">\n                  <p>© ${new Date().getFullYear()} ${design.footer.companyName}</p>\n                  <p>\n                    <a href=\"#\" style=\"color: ${design.footer.textColor};\">\n                      ${design.footer.unsubscribeText}\n                    </a>\n                  </p>\n                </div>\n              </div>\n            `\n          });\n\n          // Log successful email send\n          await sqlite.execute(`\n            INSERT INTO ${KEY}_email_logs_${SCHEMA_VERSION} \n            (recipient, campaign_id, status) \n            VALUES (?, ?, 'SUCCESS')\n          `, [recipient, campaignId]);\n\n          return true;\n        } catch (err) {\n          // Log failed email send\n          await sqlite.execute(`\n            INSERT INTO ${KEY}_email_logs_${SCHEMA_VERSION} \n            (recipient, campaign_id, status, error_message) \n            VALUES (?, ?, 'FAILED', ?)\n          `, [recipient, campaignId, err.toString()]);\n\n          console.error(`Failed to send email to ${recipient}:`, err);\n          return false;\n        }\n      }));\n\n      // Update campaign statistics\n      const successfulSends = emailResults.filter(Boolean).length;\n      const failedSends = emailResults.length - successfulSends;\n\n      await sqlite.execute(`\n        UPDATE ${KEY}_campaigns_${SCHEMA_VERSION} \n        SET successful_sends = ?, failed_sends = ? \n        WHERE id = ?\n      `, [successfulSends, failedSends, campaignId]);\n\n      return Response.json({ \n        success: true,\n        totalRecipients: validEmails.length,\n        successfulSends,\n        failedSends\n      });\n    } catch (error) {\n      console.error('Campaign sending error:', error);\n      return Response.json({ \n        success: false, \n        message: 'Error processing campaign',\n        error: error.toString()\n      });\n    }\n  }\n\n  // Existing HTML serving code remains the same\n  return new Response(`\n    <html>\n      <head>\n        <title>Email Marketing Campaign</title>\n        <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n      </head>\n      <body>\n        <div id=\"root\"></div>\n        <script src=\"https://esm.town/v/std/catch\"></script>\n        <script type=\"module\" src=\"${import.meta.url}\"></script>\n      </body>\n    </html>\n  `, {\n    headers: {\n      'Content-Type': 'text/html',\n    }\n  });\n}","deleted","label",[98],"permalink","https://www.val.town/x/GideonEsq/smartCrimsonBedbug/code/main.tsx","extension","actionData","errors"]
</article></body></html>