export function storeLocatorFeedbackForm(form: FormTs) {
// Store Locator Feedback - Evaluate store finder usability and accuracy
// Demonstrates: EmojiRating, StarRating, ThumbRating, RatingScale, CheckboxList, MatrixQuestion, conditional logic
// ============================================
// HEADER
// ============================================
form.addRow(row => {
row.addTextPanel('header', {
label: 'Store Finder Feedback',
computedValue: () => 'Help us improve how you find our stores.',
customStyles: {
backgroundColor: '#059669',
color: 'white',
padding: '28px',
borderRadius: '12px',
textAlign: 'center'
}
});
});
// ============================================
// SECTION 1: Search Experience
// ============================================
const searchSection = form.addSubform('search', {
title: 'Your Search Experience'
});
searchSection.addRow(row => {
row.addRadioButton('searchMethod', {
label: 'How did you search for a store?',
options: [
{ id: 'zip', name: 'By zip/postal code' },
{ id: 'city', name: 'By city name' },
{ id: 'address', name: 'By address' },
{ id: 'current', name: 'Use my current location' },
{ id: 'browse', name: 'Browsed the map' }
],
orientation: 'vertical'
});
});
searchSection.addRow(row => {
row.addEmojiRating('searchEase', {
label: 'How easy was it to find a store?',
preset: 'effort',
size: 'lg',
alignment: 'center',
showLabels: true
});
});
searchSection.addRow(row => {
row.addThumbRating('foundStore', {
label: 'Did you find a store near you?',
showLabels: true,
upLabel: 'Yes',
downLabel: 'No',
alignment: 'center'
});
});
// If didn't find store
searchSection.addRow(row => {
row.addTextPanel('noStoreMessage', {
computedValue: () => "We're sorry you couldn't find a nearby store. Help us understand what happened.",
customStyles: {
backgroundColor: '#fef3c7',
color: '#92400e',
padding: '12px',
borderRadius: '6px',
fontSize: '14px',
marginTop: '8px'
},
isVisible: () => searchSection.thumbRating('foundStore')?.value() === 'down'
});
});
searchSection.addRow(row => {
row.addRadioButton('noStoreReason', {
label: 'Why could you not find a store?',
options: [
{ id: 'none-nearby', name: 'No stores in my area' },
{ id: 'too-far', name: 'Nearest store was too far' },
{ id: 'search-failed', name: 'Search did not work properly' },
{ id: 'confusing', name: 'Interface was confusing' },
{ id: 'other', name: 'Other reason' }
],
orientation: 'vertical',
isVisible: () => searchSection.thumbRating('foundStore')?.value() === 'down'
});
});
// ============================================
// SECTION 2: Results Quality (if found store)
// ============================================
const resultsSection = form.addSubform('results', {
title: 'Search Results Quality',
isVisible: () => searchSection.thumbRating('foundStore')?.value() === 'up'
});
resultsSection.addRow(row => {
row.addStarRating('resultsRelevance', {
label: 'How relevant were the search results?',
maxStars: 5,
size: 'lg',
alignment: 'center',
showCounter: true
});
});
resultsSection.addRow(row => {
row.addRadioButton('resultsCount', {
label: 'Did you see the right number of results?',
options: [
{ id: 'too-few', name: 'Too few options shown' },
{ id: 'just-right', name: 'Just right' },
{ id: 'too-many', name: 'Too many to browse through' }
],
orientation: 'horizontal'
});
});
resultsSection.addRow(row => {
row.addRatingScale('locationAccuracy', {
label: 'How accurate was the distance/location information?',
preset: 'likert-5',
lowLabel: 'Inaccurate',
highLabel: 'Very Accurate',
alignment: 'center'
});
});
// ============================================
// SECTION 3: Store Information
// ============================================
const infoSection = form.addSubform('info', {
title: 'Store Information Quality',
isVisible: () => searchSection.thumbRating('foundStore')?.value() === 'up'
});
infoSection.addRow(row => {
row.addMatrixQuestion('infoCompleteness', {
label: 'Rate the information provided for stores:',
rows: [
{ id: 'address', label: 'Address/directions', isRequired: true },
{ id: 'hours', label: 'Store hours', isRequired: true },
{ id: 'phone', label: 'Phone number', isRequired: false },
{ id: 'services', label: 'Services available', isRequired: false },
{ id: 'photos', label: 'Store photos', isRequired: false }
],
columns: [
{ id: 'missing', label: 'Missing' },
{ id: 'poor', label: 'Poor' },
{ id: 'ok', label: 'OK' },
{ id: 'good', label: 'Good' },
{ id: 'great', label: 'Great' }
],
fullWidth: true,
striped: true
});
});
infoSection.addRow(row => {
row.addCheckboxList('missingInfo', {
label: 'What information was missing or would be helpful?',
options: [
{ id: 'parking', name: 'Parking availability' },
{ id: 'accessibility', name: 'Accessibility features' },
{ id: 'inventory', name: 'Product availability/inventory' },
{ id: 'wait-times', name: 'Current wait times' },
{ id: 'special-hours', name: 'Holiday/special hours' },
{ id: 'appointments', name: 'Appointment booking' },
{ id: 'curbside', name: 'Curbside pickup info' },
{ id: 'photos', name: 'More/better photos' }
],
orientation: 'vertical'
});
});
// ============================================
// SECTION 4: Map & Directions
// ============================================
const mapSection = form.addSubform('map', {
title: 'Map & Directions',
isVisible: () => searchSection.thumbRating('foundStore')?.value() === 'up'
});
mapSection.addRow(row => {
row.addStarRating('mapUsability', {
label: 'How easy was the map to use?',
maxStars: 5,
size: 'lg',
alignment: 'center',
showCounter: true
});
});
mapSection.addRow(row => {
row.addThumbRating('usedDirections', {
label: 'Did you get directions to a store?',
showLabels: true,
upLabel: 'Yes',
downLabel: 'No',
alignment: 'center'
});
});
mapSection.addRow(row => {
row.addRadioButton('directionsQuality', {
label: 'How were the directions?',
options: [
{ id: 'excellent', name: 'Excellent - got there easily' },
{ id: 'good', name: 'Good - minor issues' },
{ id: 'poor', name: 'Poor - had trouble finding it' },
{ id: 'wrong', name: 'Wrong - led me to wrong location' }
],
orientation: 'vertical',
isVisible: () => mapSection.thumbRating('usedDirections')?.value() === 'up'
});
});
// ============================================
// SECTION 5: Visit Outcome
// ============================================
const visitSection = form.addSubform('visit', {
title: 'Your Visit',
isVisible: () => searchSection.thumbRating('foundStore')?.value() === 'up'
});
visitSection.addRow(row => {
row.addRadioButton('visitIntent', {
label: 'Do you plan to visit the store you found?',
options: [
{ id: 'already-visited', name: 'Already visited' },
{ id: 'will-visit', name: 'Yes, will visit soon' },
{ id: 'maybe', name: 'Maybe/undecided' },
{ id: 'no', name: 'No, will not visit' }
],
orientation: 'vertical'
});
});
visitSection.addRow(row => {
row.addEmojiRating('visitExperience', {
label: 'How was your store visit?',
preset: 'satisfaction',
size: 'lg',
alignment: 'center',
showLabels: true,
isVisible: () => visitSection.radioButton('visitIntent')?.value() === 'already-visited'
});
});
visitSection.addRow(row => {
row.addRadioButton('noVisitReason', {
label: 'Why will you not visit?',
options: [
{ id: 'too-far', name: 'Store is too far' },
{ id: 'hours', name: 'Store hours do not work for me' },
{ id: 'prefer-online', name: 'Prefer to shop online instead' },
{ id: 'no-stock', name: 'Product I need is not available' },
{ id: 'other', name: 'Other reason' }
],
orientation: 'vertical',
isVisible: () => visitSection.radioButton('visitIntent')?.value() === 'no'
});
});
// ============================================
// SECTION 6: Device Experience
// ============================================
const deviceSection = form.addSubform('device', {
title: 'Device & Overall Experience'
});
deviceSection.addRow(row => {
row.addRadioButton('deviceUsed', {
label: 'What device did you use?',
options: [
{ id: 'phone', name: 'Smartphone' },
{ id: 'tablet', name: 'Tablet' },
{ id: 'computer', name: 'Computer' }
],
orientation: 'horizontal'
});
});
deviceSection.addRow(row => {
row.addStarRating('overallRating', {
label: 'Overall, how would you rate the store finder?',
maxStars: 5,
size: 'lg',
alignment: 'center',
showCounter: true,
showConfettiOnMax: true
});
});
deviceSection.addRow(row => {
row.addThumbRating('wouldUseAgain', {
label: 'Would you use our store finder again?',
showLabels: true,
upLabel: 'Yes',
downLabel: 'No',
alignment: 'center'
});
});
// ============================================
// SECTION 7: Improvements
// ============================================
const improvementsSection = form.addSubform('improvements', {
title: 'Suggestions'
});
improvementsSection.addSpacer({ height: '10px' });
improvementsSection.addRow(row => {
row.addTextarea('improvementSuggestions', {
label: 'How can we improve the store finder?',
placeholder: 'Share any suggestions for features, information, or usability improvements...',
rows: 4,
autoExpand: true
});
});
improvementsSection.addRow(row => {
row.addTextarea('reportedIssues', {
label: 'Did you notice any errors or issues?',
placeholder: 'Report incorrect addresses, hours, phone numbers, or other errors...',
rows: 3,
autoExpand: true
});
});
// ============================================
// SECTION 8: Summary
// ============================================
const summarySection = form.addSubform('summary', {
title: 'Feedback Summary',
isVisible: () => searchSection.thumbRating('foundStore')?.value() !== null
});
summarySection.addRow(row => {
row.addTextPanel('summaryContent', {
computedValue: () => {
const foundStore = searchSection.thumbRating('foundStore')?.value();
const searchEase = searchSection.emojiRating('searchEase')?.value();
const resultsRating = resultsSection.starRating('resultsRelevance')?.value();
const mapRating = mapSection.starRating('mapUsability')?.value();
const overallRating = deviceSection.starRating('overallRating')?.value();
const visitIntent = visitSection.radioButton('visitIntent')?.value();
const wouldUseAgain = deviceSection.thumbRating('wouldUseAgain')?.value();
const easeLabels: Record<string, string> = {
'very-hard': 'Very Difficult',
'hard': 'Difficult',
'neutral': 'Moderate',
'easy': 'Easy',
'very-easy': 'Very Easy'
};
const intentLabels: Record<string, string> = {
'already-visited': 'Already visited',
'will-visit': 'Planning to visit',
'maybe': 'Undecided',
'no': 'Will not visit'
};
let statusIcon = foundStore === 'up' ? 'π’' : 'π΄';
let summary = `${statusIcon} Store Finder Feedback\n`;
summary += `${'β'.repeat(28)}\n\n`;
summary += `π Store Found: ${foundStore === 'up' ? 'Yes' : 'No'}\n`;
if (searchEase) {
summary += `π Search Ease: ${easeLabels[searchEase] || searchEase}\n`;
}
if (resultsRating) {
summary += `β Results Quality: ${resultsRating}/5\n`;
}
if (mapRating) {
summary += `πΊοΈ Map Usability: ${mapRating}/5\n`;
}
if (overallRating) {
summary += `\nπ Overall Rating: ${overallRating}/5 stars\n`;
}
if (visitIntent) {
summary += `πͺ Visit Status: ${intentLabels[visitIntent] || visitIntent}\n`;
}
if (wouldUseAgain) {
summary += `π Would Use Again: ${wouldUseAgain === 'up' ? 'Yes' : 'No'}`;
}
return summary;
},
customStyles: () => {
const foundStore = searchSection.thumbRating('foundStore')?.value();
const overallRating = deviceSection.starRating('overallRating')?.value();
const baseStyles = {
padding: '20px',
borderRadius: '8px',
whiteSpace: 'pre-wrap',
fontFamily: 'monospace',
fontSize: '14px'
};
if (foundStore === 'down') {
return { ...baseStyles, backgroundColor: '#fee2e2', borderLeft: '4px solid #ef4444' };
} else if (overallRating && overallRating >= 4) {
return { ...baseStyles, backgroundColor: '#d1fae5', borderLeft: '4px solid #10b981' };
} else if (overallRating && overallRating >= 3) {
return { ...baseStyles, backgroundColor: '#fef3c7', borderLeft: '4px solid #f59e0b' };
} else if (overallRating) {
return { ...baseStyles, backgroundColor: '#fee2e2', borderLeft: '4px solid #ef4444' };
}
return { ...baseStyles, backgroundColor: '#f1f5f9', borderLeft: '4px solid #94a3b8' };
}
});
});
// ============================================
// FORM CONFIGURATION
// ============================================
form.configureSubmitButton({
label: 'Submit Feedback'
});
form.configureCompletionScreen({
type: 'text',
title: 'Thank You for Your Feedback!',
message: 'Your insights help us make it easier for customers to find our stores. We appreciate you taking the time to share your experience.'
});
}