export function solarSavingsQuiz(form: FormTs) {
form.setTitle(() => '☀️ How Much Could You Save Switching to Solar?');
// ========== STATE ==========
const inputs = form.state<{
monthlyBill: number;
roofSize: number;
sunHours: number;
electricityRate: number;
systemSize: number;
}>({
monthlyBill: 150,
roofSize: 1500,
sunHours: 5,
electricityRate: 0.12,
systemSize: 6
});
// ========== CALCULATIONS ==========
const getAnnualUsage = () => {
const bill = inputs().monthlyBill;
const rate = inputs().electricityRate;
return rate > 0 ? Math.round((bill / rate) * 12) : 0;
};
const getRecommendedSystemSize = () => {
const annualUsage = getAnnualUsage();
const sunHours = inputs().sunHours;
const dailyProduction = sunHours * 365;
return dailyProduction > 0 ? Math.round((annualUsage / dailyProduction) * 10) / 10 : 0;
};
const getSystemCost = () => {
const size = inputs().systemSize;
const costPerWatt = 2.75;
return Math.round(size * 1000 * costPerWatt);
};
const getFederalTaxCredit = () => {
return Math.round(getSystemCost() * 0.30);
};
const getNetSystemCost = () => {
return getSystemCost() - getFederalTaxCredit();
};
const getAnnualProduction = () => {
const size = inputs().systemSize;
const sunHours = inputs().sunHours;
const efficiency = 0.80;
return Math.round(size * sunHours * 365 * efficiency);
};
const getAnnualSavings = () => {
const production = getAnnualProduction();
const rate = inputs().electricityRate;
return Math.round(production * rate);
};
const getPaybackYears = () => {
const netCost = getNetSystemCost();
const annualSavings = getAnnualSavings();
return annualSavings > 0 ? Math.round((netCost / annualSavings) * 10) / 10 : 0;
};
const get25YearSavings = () => {
const annualSavings = getAnnualSavings();
const netCost = getNetSystemCost();
let totalSavings = 0;
for (let year = 1; year <= 25; year++) {
totalSavings += annualSavings * Math.pow(1.02, year - 1);
}
return Math.round(totalSavings - netCost);
};
const getCO2Offset = () => {
const annualProduction = getAnnualProduction();
return Math.round((annualProduction * 0.92) / 2000);
};
// ========== COMPLETION SCREEN ==========
form.configureCompletionScreen({
type: 'text',
title: '☀️ Your Solar Savings Report Is Ready!',
message: () => `Thank you! Based on your inputs, you could save an estimated $${get25YearSavings().toLocaleString()} over 25 years. Check your email for the detailed report.`
});
// ========== PAGES ==========
const pages = form.addPages('quiz-pages', { heightMode: 'current-page' });
// ========== PAGE 1: Current Energy Usage ==========
const page1 = pages.addPage('current-usage', { mobileBreakpoint: 500 });
page1.addRow(row => {
row.addTextPanel('header1', {
label: 'Step 1 of 5: Current Energy Usage',
computedValue: () => 'Let\'s understand your current electricity costs',
customStyles: { fontSize: '0.9rem', color: '#6b7280', marginBottom: '1rem' }
});
});
page1.addSpacer({ height: '24px' });
page1.addRow(row => {
row.addSlider('monthlyBill', {
label: 'Average Monthly Electricity Bill',
min: 50,
max: 500,
step: 10,
unit: '$',
defaultValue: 150,
tooltip: 'Check your recent electricity bills for the average',
onValueChange: (v) => inputs.update(s => ({ ...s, monthlyBill: v || 150 }))
});
});
page1.addRow(row => {
row.addSlider('electricityRate', {
label: 'Electricity Rate (per kWh)',
min: 0.08,
max: 0.35,
step: 0.01,
unit: '$',
defaultValue: 0.12,
tooltip: 'Find this on your electricity bill - national average is $0.12',
onValueChange: (v) => inputs.update(s => ({ ...s, electricityRate: v || 0.12 }))
});
});
page1.addRow(row => {
row.addTextPanel('usageEstimate', {
label: 'Estimated Annual Usage',
computedValue: () => `📊 Based on your inputs: ~${getAnnualUsage().toLocaleString()} kWh/year`,
customStyles: { background: '#f0f9ff', padding: '12px', borderRadius: '8px' }
});
});
// ========== PAGE 2: Property Details ==========
const page2 = pages.addPage('property', { mobileBreakpoint: 500 });
page2.addRow(row => {
row.addTextPanel('header2', {
label: 'Step 2 of 5: Property Details',
computedValue: () => 'Tell us about your roof and location',
customStyles: { fontSize: '0.9rem', color: '#6b7280', marginBottom: '1rem' }
});
});
page2.addSpacer({ height: '24px' });
page2.addRow(row => {
row.addSlider('roofSize', {
label: 'Available Roof Space',
min: 500,
max: 3000,
step: 100,
unit: 'sq ft',
defaultValue: 1500,
tooltip: 'Estimate the south-facing roof area available for panels',
onValueChange: (v) => inputs.update(s => ({ ...s, roofSize: v || 1500 }))
});
});
page2.addRow(row => {
row.addDropdown('roofType', {
label: 'Roof Type',
options: [
{ id: 'asphalt', name: 'Asphalt Shingles (most common)' },
{ id: 'tile', name: 'Tile Roof' },
{ id: 'metal', name: 'Metal Roof' },
{ id: 'flat', name: 'Flat Roof' },
{ id: 'other', name: 'Other' }
],
defaultValue: 'asphalt'
});
});
page2.addRow(row => {
row.addSlider('sunHours', {
label: 'Average Peak Sun Hours (daily)',
min: 3,
max: 7,
step: 0.5,
unit: 'hours',
defaultValue: 5,
tooltip: 'Varies by location: Southwest US ~6-7hrs, Northeast ~4-5hrs',
onValueChange: (v) => inputs.update(s => ({ ...s, sunHours: v || 5 }))
});
});
page2.addRow(row => {
row.addDropdown('roofAge', {
label: 'Roof Age',
options: [
{ id: 'new', name: 'Less than 5 years' },
{ id: 'mid', name: '5-15 years' },
{ id: 'old', name: '15-25 years' },
{ id: 'replace', name: 'Needs replacement soon' }
],
defaultValue: 'mid',
tooltip: 'Newer roofs are better for solar - panels last 25+ years'
});
});
// ========== PAGE 3: System Size ==========
const page3 = pages.addPage('system-size', { mobileBreakpoint: 500 });
page3.addRow(row => {
row.addTextPanel('header3', {
label: 'Step 3 of 5: System Configuration',
computedValue: () => 'Choose your solar system size',
customStyles: { fontSize: '0.9rem', color: '#6b7280', marginBottom: '1rem' }
});
});
page3.addSpacer({ height: '24px' });
page3.addRow(row => {
row.addTextPanel('recommendation', {
label: 'Recommended System Size',
computedValue: () => `💡 Based on your usage, we recommend a ${getRecommendedSystemSize()} kW system`,
customStyles: { background: '#f0fdf4', padding: '12px', borderRadius: '8px', color: '#166534' }
});
});
page3.addRow(row => {
row.addSlider('systemSize', {
label: 'System Size (kW)',
min: 3,
max: 15,
step: 0.5,
unit: 'kW',
defaultValue: 6,
tooltip: 'Larger systems produce more power but cost more upfront',
onValueChange: (v) => inputs.update(s => ({ ...s, systemSize: v || 6 }))
});
});
page3.addRow(row => {
row.addRadioButton('financing', {
label: 'How do you plan to finance?',
options: [
{ id: 'cash', name: 'Cash Purchase' },
{ id: 'loan', name: 'Solar Loan' },
{ id: 'lease', name: 'Solar Lease/PPA' },
{ id: 'unsure', name: 'Not sure yet' }
],
defaultValue: 'cash',
orientation: 'vertical'
});
});
page3.addRow(row => {
row.addSuggestionChips('priorities', {
label: 'What\'s most important to you?',
suggestions: [
{ id: 'savings', name: '💰 Maximum savings' },
{ id: 'environment', name: '🌱 Environmental impact' },
{ id: 'independence', name: '🔌 Energy independence' },
{ id: 'value', name: '🏠 Home value increase' }
],
min: 1,
max: 2
});
});
// ========== PAGE 4: Results ==========
const page4 = pages.addPage('results', { mobileBreakpoint: 500 });
page4.addRow(row => {
row.addTextPanel('header4', {
label: 'Step 4 of 5: Your Solar Savings Estimate',
computedValue: () => 'Here\'s how much you could save!',
customStyles: { fontSize: '0.9rem', color: '#6b7280', marginBottom: '1rem' }
});
});
page4.addSpacer({ height: '24px' });
page4.addRow(row => {
row.addTextPanel('mainResult', {
label: '25-Year Net Savings',
computedValue: () => `$${get25YearSavings().toLocaleString()}`,
customStyles: () => ({
fontSize: '48px',
fontWeight: 'bold',
textAlign: 'center',
padding: '20px',
borderRadius: '12px',
color: get25YearSavings() > 30000 ? '#059669' : get25YearSavings() > 15000 ? '#ca8a04' : '#dc2626',
background: get25YearSavings() > 30000 ? '#ecfdf5' : get25YearSavings() > 15000 ? '#fefce8' : '#fef2f2'
})
});
});
page4.addRow(row => {
row.addTextPanel('paybackResult', {
label: 'Payback Period',
computedValue: () => `⏱️ Your system pays for itself in ${getPaybackYears()} years`,
customStyles: { textAlign: 'center', fontSize: '18px', padding: '10px' }
});
});
page4.addRow(row => {
row.addPriceDisplay('systemCost', {
label: 'System Cost (before incentives)',
computedValue: () => getSystemCost(),
currency: '$',
decimals: 0,
variant: 'default'
});
row.addPriceDisplay('taxCredit', {
label: 'Federal Tax Credit (30%)',
computedValue: () => getFederalTaxCredit(),
currency: '$',
decimals: 0,
prefix: '-',
variant: 'success'
});
});
page4.addRow(row => {
row.addPriceDisplay('netCost', {
label: 'Net System Cost',
computedValue: () => getNetSystemCost(),
currency: '$',
decimals: 0,
variant: 'highlight'
});
row.addPriceDisplay('annualSavings', {
label: 'First Year Savings',
computedValue: () => getAnnualSavings(),
currency: '$',
decimals: 0,
suffix: '/year',
variant: 'success'
});
});
const detailsSection = page4.addSubform('detailsBreakdown', {
title: '📊 Detailed Breakdown (click to expand)',
isCollapsible: true,
customStyles: { background: '#f9fafb', borderRadius: '8px', marginTop: '20px' }
});
detailsSection.addRow(row => {
row.addTextPanel('systemDetails', {
label: 'System Details',
computedValue: () => `• System Size: ${inputs().systemSize} kW\n• Annual Production: ${getAnnualProduction().toLocaleString()} kWh\n• Coverage: ${Math.round((getAnnualProduction() / getAnnualUsage()) * 100)}% of your usage\n• CO₂ Offset: ${getCO2Offset()} tons/year`
});
});
page4.addRow(row => {
row.addTextPanel('envImpact', {
label: '🌍 Environmental Impact',
computedValue: () => `Going solar offsets ${getCO2Offset()} tons of CO₂ annually - like taking ${Math.round(getCO2Offset() * 2.2)} cars off the road!`,
customStyles: { background: '#f0fdf4', padding: '15px', borderRadius: '8px', color: '#166534', textAlign: 'center' }
});
});
// ========== PAGE 5: Lead Capture ==========
const page5 = pages.addPage('lead-capture', { mobileBreakpoint: 500 });
page5.addRow(row => {
row.addTextPanel('header5', {
label: 'Step 5 of 5: Get Your Free Detailed Quote',
computedValue: () => 'Connect with local solar installers for accurate pricing',
customStyles: { fontSize: '0.9rem', color: '#6b7280', marginBottom: '1rem' }
});
});
page5.addSpacer({ height: '24px' });
page5.addRow(row => {
row.addTextbox('name', { label: 'Your Name', isRequired: true, placeholder: 'John Smith' }, '1fr');
row.addEmail('email', { label: 'Email Address', isRequired: true, placeholder: 'john@email.com' }, '1fr');
});
page5.addRow(row => {
row.addTextbox('phone', { label: 'Phone Number', placeholder: '(555) 123-4567' }, '1fr');
row.addTextbox('zipcode', { label: 'ZIP Code', isRequired: true, placeholder: '90210' }, '1fr');
});
page5.addRow(row => {
row.addDropdown('homeowner', {
label: 'Do you own your home?',
options: [
{ id: 'yes', name: 'Yes, I own my home' },
{ id: 'buying', name: 'Currently buying' },
{ id: 'no', name: 'No, I rent' }
],
isRequired: true
}, '1fr');
row.addDropdown('timeline', {
label: 'When are you looking to go solar?',
options: [
{ id: 'asap', name: 'As soon as possible' },
{ id: '3months', name: 'Within 3 months' },
{ id: '6months', name: 'Within 6 months' },
{ id: 'researching', name: 'Just researching' }
]
}, '1fr');
});
page5.addRow(row => {
row.addCheckboxList('consent', {
options: [
{ id: 'report', name: '📄 Send me my personalized solar savings report', isRequired: true },
{ id: 'quotes', name: '💡 Connect me with local solar installers for quotes' },
{ id: 'tips', name: '📧 Send me solar energy tips and incentive updates' }
],
defaultValue: ['report'],
orientation: 'vertical'
});
});
// ========== SUBMIT BUTTON ==========
form.configureSubmitButton({
label: () => `☀️ Get My Free Solar Quote (Est. Savings: $${get25YearSavings().toLocaleString()})`
});
// ========== PDF REPORT ==========
form.configurePdf('solar-savings-report', pdf => {
pdf.configure({
filename: 'solar-savings-estimate.pdf',
pageSize: 'A4',
allowUserDownload: true,
downloadButtonLabel: '☀️ Download Solar Estimate',
header: {
title: 'Solar Savings Estimate',
subtitle: 'Your Personalized Solar Analysis'
},
footer: {
text: 'Generated by FormTs Solar Calculator',
showPageNumbers: true
}
});
pdf.addSection('Executive Summary', section => {
section.addRow(row => {
row.addField('25-Year Net Savings', `$${get25YearSavings().toLocaleString()}`);
row.addField('Payback Period', `${getPaybackYears()} years`);
});
section.addRow(row => {
row.addField('Recommended System', `${inputs().systemSize} kW`);
row.addField('Annual Production', `${getAnnualProduction().toLocaleString()} kWh`);
});
});
pdf.addSection('Cost Breakdown', section => {
section.addTable(
['Item', 'Amount'],
[
['System Cost', `$${getSystemCost().toLocaleString()}`],
['Federal Tax Credit (30%)', `-$${getFederalTaxCredit().toLocaleString()}`],
['Net Cost', `$${getNetSystemCost().toLocaleString()}`]
]
);
});
pdf.addSection('Environmental Impact', section => {
section.addText(`Your solar system will offset approximately ${getCO2Offset()} tons of CO₂ annually.`);
});
pdf.addPageBreak();
pdf.addSection('Next Steps', section => {
section.addText('1. Review this estimate with your household');
section.addText('2. Get multiple quotes from certified installers');
section.addText('3. Check for additional state/local incentives');
section.addText('4. Verify your roof condition and any HOA requirements');
section.addText('5. Schedule a professional site assessment');
});
});
form.configureSubmitBehavior({ sendToServer: true });
}