Fix confirmation email display issues

- Remove escaped dollar signs in currency displays
- Fix percentage calculations (multiply decimal by 100)
- Force white text color on mobile for "Your Impact" header
- Add comma formatting to currency values (16343.46 → 16,343.46)
- Update portfolioColors.js to properly convert Wren API decimal percentages

🤖 Generated with [Claude Code](https://claude.com/claude-code)

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

server/templates/receipt.hbs

@@ -228,7 +228,7 @@
       font-weight: bold;
       text-align: center;
       margin: 0 0 10px 0;
-      color: #ffffff;
+      color: #ffffff !important;
     }
     .comparisons-subtitle {
       text-align: center;
@@ -383,16 +383,16 @@
       <div class="pricing-box" style="background-color: #f8fafc !important;">
         <div class="pricing-row">
           <span class="detail-label" style="color: #475569 !important;">Offset Cost</span>
-          <span class="detail-value" style="color: #0f172a !important;">\${{baseAmount}}</span>
+          <span class="detail-value" style="color: #0f172a !important;">${{baseAmount}}</span>
         </div>
         <div class="pricing-row">
           <span class="detail-label" style="color: #475569 !important;">Processing Fee (3%)</span>
-          <span class="detail-value" style="color: #0f172a !important;">\${{processingFee}}</span>
+          <span class="detail-value" style="color: #0f172a !important;">${{processingFee}}</span>
         </div>
         <div class="pricing-total">
           <div class="pricing-row">
             <span class="label">Total Paid</span>
-            <span class="value">\${{totalAmount}}</span>
+            <span class="value">${{totalAmount}}</span>
           </div>
         </div>
       </div>

server/utils/emailService.js

@@ -7,6 +7,12 @@ import { fileURLToPath } from 'url';
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 
+// Helper function to format currency with commas
+function formatCurrency(amount) {
+  const num = typeof amount === 'number' ? (amount / 100).toFixed(2) : parseFloat(amount).toFixed(2);
+  return num.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+}
+
 // Create transporter with connection pooling
 const transporter = nodemailer.createTransport({
   host: process.env.SMTP_HOST || 'mail.puffinoffset.com',
@@ -87,15 +93,9 @@ export async function sendReceiptEmail(customerEmail, orderDetails) {
   const templateData = {
     tons: orderDetails.tons,
     portfolioId: orderDetails.portfolioId,
-    baseAmount: typeof orderDetails.baseAmount === 'number'
-      ? (orderDetails.baseAmount / 100).toFixed(2)
-      : orderDetails.baseAmount,
-    processingFee: typeof orderDetails.processingFee === 'number'
-      ? (orderDetails.processingFee / 100).toFixed(2)
-      : orderDetails.processingFee,
-    totalAmount: typeof orderDetails.totalAmount === 'number'
-      ? (orderDetails.totalAmount / 100).toFixed(2)
-      : orderDetails.totalAmount,
+    baseAmount: formatCurrency(orderDetails.baseAmount),
+    processingFee: formatCurrency(orderDetails.processingFee),
+    totalAmount: formatCurrency(orderDetails.totalAmount),
     orderId: orderDetails.orderId,
     stripeSessionId: orderDetails.stripeSessionId,
     date: new Date().toLocaleDateString('en-US', {

server/utils/portfolioColors.js

@@ -32,10 +32,21 @@ export function formatPortfolioProjects(projects) {
     return [];
   }
 
-  return projects.map((project, index) => ({
-    name: project.name || 'Unnamed Project',
-    type: project.type || 'Carbon Offset',
-    percentage: project.percentage || Math.round((1 / projects.length) * 100),
-    color: getProjectColor(index),
-  }));
+  return projects.map((project, index) => {
+    // Wren API returns percentage as decimal (0.0025 = 0.25%)
+    // Convert to percentage and round to 2 decimal places
+    let percentageValue;
+    if (project.percentage) {
+      percentageValue = (project.percentage * 100).toFixed(2);
+    } else {
+      percentageValue = ((1 / projects.length) * 100).toFixed(2);
+    }
+
+    return {
+      name: project.name || 'Unnamed Project',
+      type: project.type || 'Carbon Offset',
+      percentage: percentageValue,
+      color: getProjectColor(index),
+    };
+  });
 }