export function pricingFeedbackSurvey(form: FormTs) {
// Pricing Perception Survey - Van Westendorp Price Sensitivity Analysis
// Demonstrates: Slider, RatingScale, StarRating, RadioButton, MatrixQuestion, PriceDisplay, dynamic computed values
// ============================================
// HEADER
// ============================================
form.addRow(row => {
row.addTextPanel('header', {
label: 'Pricing Perception Survey',
computedValue: () => 'Help us understand what pricing feels right to you.',
customStyles: {
background: 'linear-gradient(135deg, #059669 0%, #10b981 100%)',
color: 'white',
padding: '24px',
borderRadius: '12px',
textAlign: 'center'
}
});
});
// ============================================
// SECTION 1: Product Context
// ============================================
const contextSection = form.addSubform('contextSection', {
title: 'About the Product',
customStyles: { backgroundColor: '#f0fdf4', padding: '16px', borderRadius: '8px' }
});
contextSection.addRow(row => {
row.addTextPanel('productInfo', {
computedValue: () => 'Consider a professional software tool that helps teams collaborate, track projects, and automate workflows. It includes real-time chat, file sharing, task management, and integrations with 100+ other tools.',
customStyles: {
backgroundColor: 'white',
padding: '16px',
borderRadius: '8px',
border: '1px solid #d1fae5',
lineHeight: '1.6'
}
});
});
// ============================================
// SECTION 2: Van Westendorp Price Questions
// ============================================
const priceSection = form.addSubform('priceSection', {
title: 'Price Perception (Van Westendorp)',
customStyles: { padding: '16px', borderRadius: '8px', border: '2px solid #10b981' }
});
priceSection.addRow(row => {
row.addTextPanel('priceInstructions', {
computedValue: () => 'Think about a monthly subscription price per user. Move the sliders to indicate your price thresholds.',
customStyles: { color: '#6b7280', fontSize: '14px', marginBottom: '8px' }
});
});
// Too Cheap
priceSection.addRow(row => {
row.addSlider('tooCheap', {
label: 'At what price would this seem TOO CHEAP, making you doubt its quality?',
min: 0,
max: 100,
step: 5,
defaultValue: 5,
showValue: true,
unit: '$/month'
});
});
// Cheap (Good Deal)
priceSection.addRow(row => {
row.addSlider('cheap', {
label: 'At what price would this be a BARGAIN - a great deal for the value?',
min: 0,
max: 100,
step: 5,
defaultValue: 15,
showValue: true,
unit: '$/month'
});
});
// Expensive
priceSection.addRow(row => {
row.addSlider('expensive', {
label: 'At what price would this start to seem EXPENSIVE, but still worth considering?',
min: 0,
max: 100,
step: 5,
defaultValue: 35,
showValue: true,
unit: '$/month'
});
});
// Too Expensive
priceSection.addRow(row => {
row.addSlider('tooExpensive', {
label: 'At what price would this be TOO EXPENSIVE to ever consider?',
min: 0,
max: 100,
step: 5,
defaultValue: 60,
showValue: true,
unit: '$/month'
});
});
// Price Range Analysis
priceSection.addRow(row => {
row.addTextPanel('priceAnalysis', {
label: 'Your Price Range Analysis',
computedValue: () => {
const tooCheap = priceSection.slider('tooCheap')?.value() ?? 5;
const cheap = priceSection.slider('cheap')?.value() ?? 15;
const expensive = priceSection.slider('expensive')?.value() ?? 35;
const tooExpensive = priceSection.slider('tooExpensive')?.value() ?? 60;
const range = expensive - cheap;
const midpoint = Math.round((cheap + expensive) / 2);
let analysis = 'Price Thresholds:\n';
analysis += ` Quality concern below: $${tooCheap}/mo\n`;
analysis += ` Good deal at: $${cheap}/mo\n`;
analysis += ` Getting expensive at: $${expensive}/mo\n`;
analysis += ` Won't consider above: $${tooExpensive}/mo\n\n`;
analysis += `Your acceptable range: $${cheap} - $${expensive}/mo\n`;
analysis += `Sweet spot (midpoint): $${midpoint}/mo`;
return analysis;
},
customStyles: () => {
const cheap = priceSection.slider('cheap')?.value() ?? 15;
const expensive = priceSection.slider('expensive')?.value() ?? 35;
return {
backgroundColor: cheap < expensive ? '#d1fae5' : '#fee2e2',
padding: '16px',
borderRadius: '8px',
whiteSpace: 'pre-wrap',
fontFamily: 'monospace',
fontSize: '13px'
};
}
});
});
// ============================================
// SECTION 3: Willingness to Pay
// ============================================
const wtpSection = form.addSubform('wtpSection', {
title: 'Willingness to Pay'
});
wtpSection.addRow(row => {
row.addRadioButton('purchaseIntent', {
label: 'At $25/month per user, how likely are you to subscribe?',
options: [
{ id: 'definitely', name: 'Definitely would subscribe' },
{ id: 'probably', name: 'Probably would subscribe' },
{ id: 'maybe', name: 'Might or might not' },
{ id: 'probably_not', name: 'Probably would not subscribe' },
{ id: 'definitely_not', name: 'Definitely would not subscribe' }
],
orientation: 'vertical'
});
});
// Follow-up for unlikely buyers
wtpSection.addRow(row => {
row.addTextarea('priceBarrier', {
label: 'What would make this price more acceptable?',
placeholder: 'More features, longer trial, team discounts...',
rows: 2,
isVisible: () => {
const intent = wtpSection.radioButton('purchaseIntent')?.value();
return intent === 'probably_not' || intent === 'definitely_not';
}
});
});
// ============================================
// SECTION 4: Feature Value Matrix
// ============================================
const valueSection = form.addSubform('valueSection', {
title: 'Feature Value Assessment'
});
valueSection.addRow(row => {
row.addMatrixQuestion('featureValue', {
label: 'How much would you pay extra for these features?',
rows: [
{ id: 'analytics', label: 'Advanced analytics dashboard' },
{ id: 'integrations', label: 'Premium integrations' },
{ id: 'support', label: 'Priority support (24/7)' },
{ id: 'storage', label: 'Unlimited storage' },
{ id: 'security', label: 'Enterprise security features' }
],
columns: [
{ id: 'nothing', label: 'Nothing' },
{ id: 'little', label: '+$5/mo' },
{ id: 'moderate', label: '+$10/mo' },
{ id: 'significant', label: '+$20/mo' }
],
striped: true,
fullWidth: true
});
});
// ============================================
// SECTION 5: Value Perception
// ============================================
const perceptionSection = form.addSubform('perceptionSection', {
title: 'Value Perception'
});
perceptionSection.addRow(row => {
row.addRatingScale('valueForMoney', {
preset: 'likert-7',
label: 'At $25/month, this product would be good value for money',
lowLabel: 'Strongly Disagree',
highLabel: 'Strongly Agree',
alignment: 'center'
});
});
perceptionSection.addRow(row => {
row.addStarRating('overallValue', {
label: 'Overall value rating compared to competitors',
maxStars: 5,
size: 'lg',
alignment: 'center'
});
});
// ============================================
// SECTION 6: Comparison & Competition
// ============================================
const compSection = form.addSubform('compSection', {
title: 'Competitive Context'
});
compSection.addRow(row => {
row.addDropdown('currentSpend', {
label: 'How much do you currently spend on similar tools?',
options: [
{ id: 'nothing', name: 'Nothing (not using any)' },
{ id: 'under10', name: 'Under $10/month' },
{ id: '10to25', name: '$10-25/month' },
{ id: '25to50', name: '$25-50/month' },
{ id: '50to100', name: '$50-100/month' },
{ id: 'over100', name: 'Over $100/month' }
],
placeholder: 'Select your current spend...'
});
});
compSection.addRow(row => {
row.addRadioButton('switchLikelihood', {
label: 'How likely would you be to switch from your current tool to this one at $25/month?',
options: [
{ id: 'very_likely', name: 'Very likely - better value' },
{ id: 'somewhat', name: 'Somewhat likely - would consider' },
{ id: 'neutral', name: 'Neutral - need more info' },
{ id: 'unlikely', name: 'Unlikely - happy with current tool' },
{ id: 'na', name: 'N/A - not using any tool currently' }
],
orientation: 'vertical',
isVisible: () => compSection.dropdown('currentSpend')?.value() !== 'nothing'
});
});
// ============================================
// SECTION 7: Final Thoughts
// ============================================
const finalSection = form.addSubform('finalSection', {
title: 'Final Thoughts'
});
finalSection.addRow(row => {
row.addTextarea('pricingFeedback', {
label: 'Any other thoughts on pricing or value?',
placeholder: 'Share what would make this product worth more to you, or any pricing concerns...',
rows: 3,
autoExpand: true
});
});
// ============================================
// SECTION 8: Summary
// ============================================
const summarySection = form.addSubform('summarySection', {
title: 'Your Pricing Profile',
isVisible: () => {
const cheap = priceSection.slider('cheap')?.value();
return cheap !== null && cheap !== undefined;
}
});
summarySection.addRow(row => {
row.addTextPanel('summary', {
computedValue: () => {
const tooCheap = priceSection.slider('tooCheap')?.value() ?? 5;
const cheap = priceSection.slider('cheap')?.value() ?? 15;
const expensive = priceSection.slider('expensive')?.value() ?? 35;
const tooExpensive = priceSection.slider('tooExpensive')?.value() ?? 60;
const intent = wtpSection.radioButton('purchaseIntent')?.value();
const value = perceptionSection.ratingScale('valueForMoney')?.value();
const rating = perceptionSection.starRating('overallValue')?.value();
const midpoint = Math.round((cheap + expensive) / 2);
let summary = 'Pricing Profile Summary\n';
summary += '═'.repeat(30) + '\n\n';
summary += `Acceptable Range: $${cheap} - $${expensive}/mo\n`;
summary += `Sweet Spot: $${midpoint}/mo\n`;
summary += `Quality Floor: $${tooCheap}/mo\n`;
summary += `Price Ceiling: $${tooExpensive}/mo\n`;
if (intent) {
const intentLabels: Record<string, string> = {
'definitely': 'Very High',
'probably': 'High',
'maybe': 'Medium',
'probably_not': 'Low',
'definitely_not': 'Very Low'
};
summary += `\nPurchase Intent @$25: ${intentLabels[intent] || intent}`;
}
if (value) {
summary += `\nValue Rating: ${value}/7`;
}
if (rating && rating > 0) {
summary += `\nCompetitive Value: ${'★'.repeat(rating)}${'☆'.repeat(5 - rating)}`;
}
return summary;
},
customStyles: {
backgroundColor: '#f0fdf4',
padding: '16px',
borderRadius: '8px',
whiteSpace: 'pre-wrap',
fontFamily: 'monospace',
fontSize: '13px',
borderLeft: '4px solid #10b981'
}
});
});
// ============================================
// FORM CONFIGURATION
// ============================================
form.configureSubmitButton({
label: 'Submit Pricing Feedback'
});
form.configureCompletionScreen({
type: 'text',
title: 'Thank you for your pricing feedback!',
message: 'Your input helps us set fair prices that reflect the value we provide. We appreciate your time and thoughtful responses.'
});
}