export function logoDesignCalculator(form: FormTs) {
const packageRates: Record<string, number> = {
'basic': 300,
'standard': 750,
'premium': 1500,
'enterprise': 3500
};
form.addRow(row => {
row.addTextPanel('header', {
computedValue: () => 'Logo Design Quote',
customStyles: { 'font-size': '1.5rem', 'font-weight': '600', 'color': '#1e293b' }
});
});
form.addSpacer({ height: 20 });
// Business Details Section
const businessSection = form.addSubform('businessDetails', { title: '๐ข About Your Business' });
businessSection.addRow(row => {
row.addDropdown('businessType', {
label: 'Business Type',
options: [
{ id: 'startup', name: 'Startup / New Business' },
{ id: 'small', name: 'Small Business' },
{ id: 'medium', name: 'Medium Business' },
{ id: 'enterprise', name: 'Enterprise / Corporation' },
{ id: 'nonprofit', name: 'Non-Profit' },
{ id: 'personal', name: 'Personal Brand' }
],
defaultValue: 'small',
isRequired: true
}, '1fr');
row.addDropdown('industry', {
label: 'Industry',
options: [
{ id: 'tech', name: 'Technology / Software' },
{ id: 'retail', name: 'Retail / E-commerce' },
{ id: 'food', name: 'Food & Beverage' },
{ id: 'health', name: 'Health & Wellness' },
{ id: 'finance', name: 'Finance / Professional Services' },
{ id: 'creative', name: 'Creative / Agency' },
{ id: 'real-estate', name: 'Real Estate' },
{ id: 'other', name: 'Other' }
],
defaultValue: 'tech'
}, '1fr');
});
businessSection.addRow(row => {
row.addRadioButton('hasExisting', {
label: 'Current Logo Situation',
options: [
{ id: 'new', name: 'Need a new logo from scratch' },
{ id: 'refresh', name: 'Want to refresh existing logo' },
{ id: 'rebrand', name: 'Complete rebrand needed' }
],
defaultValue: 'new',
orientation: 'vertical'
});
});
// Package Selection Section
const packageSection = form.addSubform('packageSelection', { title: '๐ฆ Design Package' });
packageSection.addRow(row => {
row.addRadioButton('package', {
label: 'Select Package',
options: [
{ id: 'basic', name: 'Basic ($300) - 2 concepts, 2 revisions, PNG/JPG files' },
{ id: 'standard', name: 'Standard ($750) - 4 concepts, 4 revisions, vector files, basic brand guide' },
{ id: 'premium', name: 'Premium ($1,500) - 6 concepts, unlimited revisions, full file package, brand guide' },
{ id: 'enterprise', name: 'Enterprise ($3,500) - Complete brand identity, multiple applications, style guide' }
],
defaultValue: 'standard',
orientation: 'vertical',
isRequired: true
});
});
// Design Preferences Section
const prefsSection = form.addSubform('designPrefs', { title: '๐จ Design Preferences' });
prefsSection.addRow(row => {
row.addDropdown('style', {
label: 'Preferred Style',
options: [
{ id: 'modern', name: 'Modern / Minimalist' },
{ id: 'classic', name: 'Classic / Traditional' },
{ id: 'playful', name: 'Playful / Fun' },
{ id: 'luxury', name: 'Luxury / Premium' },
{ id: 'bold', name: 'Bold / Edgy' },
{ id: 'handcrafted', name: 'Handcrafted / Artisan' },
{ id: 'unsure', name: 'Not Sure / Open to Ideas' }
],
defaultValue: 'modern'
}, '1fr');
row.addDropdown('logoType', {
label: 'Logo Type',
options: [
{ id: 'wordmark', name: 'Wordmark (Text only)' },
{ id: 'symbol', name: 'Symbol/Icon Only' },
{ id: 'combination', name: 'Combination Mark' },
{ id: 'emblem', name: 'Emblem / Badge' },
{ id: 'flexible', name: 'Flexible / Let Designer Decide' }
],
defaultValue: 'combination'
}, '1fr');
});
prefsSection.addRow(row => {
row.addDropdown('timeline', {
label: 'Timeline',
options: [
{ id: 'standard', name: 'Standard (2-3 weeks)' },
{ id: 'fast', name: 'Fast Track (1 week) +30%' },
{ id: 'rush', name: 'Rush (3-5 days) +50%' },
{ id: 'flexible', name: 'Flexible / No Rush' }
],
defaultValue: 'standard'
}, '1fr');
});
// Add-ons Section
const addonsSection = form.addSubform('addons', { title: 'โจ Additional Services' });
addonsSection.addRow(row => {
row.addCheckbox('businessCards', {
label: 'Business Card Design (+$150)',
defaultValue: false
}, '1fr');
row.addCheckbox('letterhead', {
label: 'Letterhead & Envelope (+$200)',
defaultValue: false
}, '1fr');
});
addonsSection.addRow(row => {
row.addCheckbox('socialMedia', {
label: 'Social Media Kit (+$250)',
defaultValue: false
}, '1fr');
row.addCheckbox('emailSignature', {
label: 'Email Signature (+$100)',
defaultValue: false
}, '1fr');
});
addonsSection.addRow(row => {
row.addCheckbox('favicon', {
label: 'Favicon/App Icon (+$100)',
defaultValue: false
}, '1fr');
row.addCheckbox('brandGuide', {
label: 'Extended Brand Guide (+$500)',
defaultValue: false
}, '1fr');
});
addonsSection.addRow(row => {
row.addCheckbox('animations', {
label: 'Logo Animation (+$400)',
defaultValue: false
}, '1fr');
row.addCheckbox('trademark', {
label: 'Trademark Research (+$200)',
defaultValue: false
}, '1fr');
});
form.addSpacer({ height: 20, showLine: true, lineStyle: 'dashed' });
// Results Section
const resultsSection = form.addSubform('results', { title: '๐ฐ Investment Summary', isCollapsible: false });
const getTimelineMultiplier = () => {
const timeline = prefsSection.dropdown('timeline')?.value() || 'standard';
const multipliers: Record<string, number> = {
'standard': 1.0,
'fast': 1.3,
'rush': 1.5,
'flexible': 0.95
};
return multipliers[timeline] || 1;
};
const getTypeMultiplier = () => {
const type = businessSection.dropdown('businessType')?.value() || 'small';
// Enterprise clients typically need more comprehensive work
if (type === 'enterprise') return 1.2;
if (type === 'nonprofit') return 0.85;
return 1;
};
resultsSection.addRow(row => {
row.addPriceDisplay('packagePrice', {
label: 'Package Price',
computedValue: () => {
const pkg = packageSection.radioButton('package')?.value() || 'standard';
const baseRate = packageRates[pkg] || 750;
return Math.round(baseRate * getTypeMultiplier());
},
variant: 'default'
}, '1fr');
row.addPriceDisplay('timelineAdjustment', {
label: 'Timeline Adjustment',
computedValue: () => {
const pkg = packageSection.radioButton('package')?.value() || 'standard';
const baseRate = packageRates[pkg] || 750;
const typeMult = getTypeMultiplier();
const timeMult = getTimelineMultiplier();
return Math.round(baseRate * typeMult * (timeMult - 1));
},
variant: () => {
const timeMult = getTimelineMultiplier();
return timeMult > 1 ? 'default' : 'success';
},
prefix: () => {
const timeMult = getTimelineMultiplier();
return timeMult >= 1 ? '+' : '';
}
}, '1fr');
});
resultsSection.addRow(row => {
row.addPriceDisplay('addonsTotal', {
label: 'Add-on Services',
computedValue: () => {
let total = 0;
if (addonsSection.checkbox('businessCards')?.value()) total += 150;
if (addonsSection.checkbox('letterhead')?.value()) total += 200;
if (addonsSection.checkbox('socialMedia')?.value()) total += 250;
if (addonsSection.checkbox('emailSignature')?.value()) total += 100;
if (addonsSection.checkbox('favicon')?.value()) total += 100;
if (addonsSection.checkbox('brandGuide')?.value()) total += 500;
if (addonsSection.checkbox('animations')?.value()) total += 400;
if (addonsSection.checkbox('trademark')?.value()) total += 200;
return total;
},
variant: 'default',
prefix: '+'
});
});
resultsSection.addSpacer({ showLine: true, lineStyle: 'solid', lineColor: '#e2e8f0' });
resultsSection.addRow(row => {
row.addPriceDisplay('totalPrice', {
label: 'Total Investment',
computedValue: () => {
const pkg = packageSection.radioButton('package')?.value() || 'standard';
const baseRate = packageRates[pkg] || 750;
let total = baseRate * getTypeMultiplier() * getTimelineMultiplier();
if (addonsSection.checkbox('businessCards')?.value()) total += 150;
if (addonsSection.checkbox('letterhead')?.value()) total += 200;
if (addonsSection.checkbox('socialMedia')?.value()) total += 250;
if (addonsSection.checkbox('emailSignature')?.value()) total += 100;
if (addonsSection.checkbox('favicon')?.value()) total += 100;
if (addonsSection.checkbox('brandGuide')?.value()) total += 500;
if (addonsSection.checkbox('animations')?.value()) total += 400;
if (addonsSection.checkbox('trademark')?.value()) total += 200;
return Math.round(total);
},
variant: 'large'
});
});
resultsSection.addRow(row => {
row.addTextPanel('deliverables', {
computedValue: () => {
const pkg = packageSection.radioButton('package')?.value() || 'standard';
const deliverables: Record<string, string> = {
'basic': 'Includes: PNG, JPG files in multiple sizes',
'standard': 'Includes: Vector files (AI, EPS, SVG), PNG, JPG, basic usage guide',
'premium': 'Includes: All file formats, color variations, brand guidelines document',
'enterprise': 'Includes: Complete brand package, multiple applications, comprehensive style guide'
};
return deliverables[pkg] || '';
},
customStyles: { 'font-size': '0.9rem', 'color': '#059669' }
});
});
resultsSection.addRow(row => {
row.addTextPanel('process', {
computedValue: () => {
const timeline = prefsSection.dropdown('timeline')?.value() || 'standard';
const times: Record<string, string> = {
'standard': 'Timeline: 2-3 weeks from kickoff to final files',
'fast': 'Timeline: 1 week (expedited review process)',
'rush': 'Timeline: 3-5 business days (priority handling)',
'flexible': 'Timeline: Flexible - we\'ll work at your pace'
};
return times[timeline] || '';
},
customStyles: { 'font-size': '0.9rem', 'color': '#475569' }
});
});
const finalSection = form.addSubform('final', {
title: '๐งพ Summary',
isCollapsible: false,
sticky: 'bottom'
});
finalSection.addRow(row => {
row.addPriceDisplay('totalPrice', {
label: 'Total Investment',
computedValue: () => {
const pkg = packageSection.radioButton('package')?.value() || 'standard';
const baseRate = packageRates[pkg] || 750;
let total = baseRate * getTypeMultiplier() * getTimelineMultiplier();
if (addonsSection.checkbox('businessCards')?.value()) total += 150;
if (addonsSection.checkbox('letterhead')?.value()) total += 200;
if (addonsSection.checkbox('socialMedia')?.value()) total += 250;
if (addonsSection.checkbox('emailSignature')?.value()) total += 100;
if (addonsSection.checkbox('favicon')?.value()) total += 100;
if (addonsSection.checkbox('brandGuide')?.value()) total += 500;
if (addonsSection.checkbox('animations')?.value()) total += 400;
if (addonsSection.checkbox('trademark')?.value()) total += 200;
return Math.round(total);
},
variant: 'large'
});
});
finalSection.addRow(row => {
row.addTextPanel('disclaimer', {
computedValue: () => '50% deposit required to begin work.',
customStyles: { 'font-size': '0.85rem', 'color': '#94a3b8', 'font-style': 'italic' }
});
});
form.configureSubmitButton({
label: 'Start My Project'
});
}