export function peerRecognitionForm(form: FormTs) {
// Peer Recognition Form - Employee Appreciation
// Demonstrates: StarRating, SuggestionChips, RadioButton, Textarea, Dropdown, MatrixQuestion, Checkbox
// ============================================
// HEADER
// ============================================
form.addRow(row => {
row.addTextPanel('header', {
label: 'Recognize a Colleague',
computedValue: () => 'Celebrate someone who made a difference. Your recognition means more than you know!',
customStyles: {
backgroundColor: '#f97316',
color: 'white',
padding: '24px',
borderRadius: '12px',
textAlign: 'center'
}
});
});
// ============================================
// SECTION 1: Who Are You Recognizing?
// ============================================
const recipientSection = form.addSubform('recipient', {
title: 'Who Deserves Recognition?'
});
recipientSection.addRow(row => {
row.addTextbox('nomineeName', {
label: 'Colleague\'s Name',
placeholder: 'Enter their full name',
isRequired: true
}, '1fr');
row.addDropdown('department', {
label: 'Their Department',
options: [
{ id: 'engineering', name: 'Engineering' },
{ id: 'product', name: 'Product' },
{ id: 'design', name: 'Design' },
{ id: 'marketing', name: 'Marketing' },
{ id: 'sales', name: 'Sales' },
{ id: 'customer_success', name: 'Customer Success' },
{ id: 'hr', name: 'People & HR' },
{ id: 'finance', name: 'Finance' },
{ id: 'operations', name: 'Operations' },
{ id: 'leadership', name: 'Leadership' },
{ id: 'other', name: 'Other' }
],
placeholder: 'Select department',
isRequired: true
}, '1fr');
});
// ============================================
// SECTION 2: Type of Recognition
// ============================================
const typeSection = form.addSubform('type', {
title: 'What Are You Recognizing?'
});
typeSection.addRow(row => {
row.addRadioButton('recognitionType', {
label: 'Recognition Category',
options: [
{ id: 'above_beyond', name: 'Going Above & Beyond' },
{ id: 'teamwork', name: 'Outstanding Teamwork' },
{ id: 'innovation', name: 'Innovation & Creativity' },
{ id: 'customer_focus', name: 'Customer Focus' },
{ id: 'mentorship', name: 'Mentorship & Support' },
{ id: 'milestone', name: 'Achievement/Milestone' },
{ id: 'everyday', name: 'Everyday Helpfulness' },
{ id: 'other', name: 'Other' }
],
orientation: 'vertical',
isRequired: true
});
});
// ============================================
// SECTION 3: Company Values Alignment
// ============================================
const valuesSection = form.addSubform('values', {
title: 'Values Demonstrated',
customStyles: { backgroundColor: '#fff7ed', padding: '16px', borderRadius: '8px' }
});
valuesSection.addRow(row => {
row.addSuggestionChips('valuesChips', {
label: 'Which company values did they exemplify? (select all that apply)',
suggestions: [
{ id: 'integrity', name: 'Integrity' },
{ id: 'collaboration', name: 'Collaboration' },
{ id: 'excellence', name: 'Excellence' },
{ id: 'innovation', name: 'Innovation' },
{ id: 'customer_first', name: 'Customer First' },
{ id: 'ownership', name: 'Ownership' },
{ id: 'respect', name: 'Respect' },
{ id: 'transparency', name: 'Transparency' }
],
alignment: 'center',
min: 1
});
});
// ============================================
// SECTION 4: Impact Rating
// ============================================
const impactSection = form.addSubform('impact', {
title: 'Rate the Impact'
});
impactSection.addRow(row => {
row.addStarRating('impactRating', {
label: 'How significant was their contribution?',
maxStars: 5,
size: 'lg',
showCounter: true,
alignment: 'center',
showConfettiOnMax: true
});
});
// Show matrix for high impact (4-5 stars)
impactSection.addSpacer({ height: '16px', isVisible: () => {
const rating = impactSection.starRating('impactRating')?.value();
return rating !== null && rating !== undefined && rating >= 4;
}});
impactSection.addRow(row => {
row.addMatrixQuestion('impactAreas', {
label: 'Rate their impact in specific areas:',
rows: [
{ id: 'quality', label: 'Quality of work' },
{ id: 'timeliness', label: 'Timeliness' },
{ id: 'collaboration', label: 'Team collaboration' },
{ id: 'attitude', label: 'Positive attitude' }
],
columns: [
{ id: 'good', label: 'Good' },
{ id: 'great', label: 'Great' },
{ id: 'exceptional', label: 'Exceptional' }
],
striped: true,
isVisible: () => {
const rating = impactSection.starRating('impactRating')?.value();
return rating !== null && rating !== undefined && rating >= 4;
}
});
});
// ============================================
// SECTION 5: The Story
// ============================================
const storySection = form.addSubform('story', {
title: 'Tell the Story'
});
storySection.addRow(row => {
row.addTextarea('whatHappened', {
label: 'What did they do that deserves recognition?',
placeholder: 'Describe the situation, their actions, and the impact...\n\nExample: "During last week\'s product launch, Sarah stayed late to help the engineering team debug a critical issue. Her positive attitude kept everyone motivated, and her solution-oriented approach helped us ship on time."',
rows: 5,
autoExpand: true,
isRequired: true
});
});
storySection.addSpacer({ height: '12px' });
storySection.addRow(row => {
row.addTextarea('whyMatters', {
label: 'Why does this recognition matter to you personally? (optional)',
placeholder: 'Share how their actions affected you or the team...',
rows: 3,
autoExpand: true
});
});
// ============================================
// SECTION 6: Visibility & Sharing
// ============================================
const visibilitySection = form.addSubform('visibility', {
title: 'Visibility Settings'
});
visibilitySection.addRow(row => {
row.addRadioButton('visibility', {
label: 'How would you like to share this recognition?',
options: [
{ id: 'public', name: 'Public - Share in company channel for everyone to see' },
{ id: 'team', name: 'Team Only - Share with their team and manager' },
{ id: 'private', name: 'Private - Only they and HR will see this' }
],
orientation: 'vertical',
defaultValue: 'public'
});
});
visibilitySection.addRow(row => {
row.addCheckbox('notifyManager', {
label: 'Also notify their manager about this recognition',
defaultValue: true
});
});
visibilitySection.addRow(row => {
row.addCheckbox('nominateAward', {
label: 'Nominate for monthly Employee Recognition Award',
isVisible: () => {
const rating = impactSection.starRating('impactRating')?.value();
return rating !== null && rating !== undefined && rating >= 4;
}
});
});
// ============================================
// SECTION 7: About You
// ============================================
const nominatorSection = form.addSubform('nominator', {
title: 'About You'
});
nominatorSection.addRow(row => {
row.addTextbox('yourName', {
label: 'Your Name',
placeholder: 'Enter your name',
isRequired: true
}, '1fr');
row.addDropdown('yourDepartment', {
label: 'Your Department',
options: [
{ id: 'engineering', name: 'Engineering' },
{ id: 'product', name: 'Product' },
{ id: 'design', name: 'Design' },
{ id: 'marketing', name: 'Marketing' },
{ id: 'sales', name: 'Sales' },
{ id: 'customer_success', name: 'Customer Success' },
{ id: 'hr', name: 'People & HR' },
{ id: 'finance', name: 'Finance' },
{ id: 'operations', name: 'Operations' },
{ id: 'leadership', name: 'Leadership' },
{ id: 'other', name: 'Other' }
],
placeholder: 'Select department'
}, '1fr');
});
nominatorSection.addRow(row => {
row.addRadioButton('relationship', {
label: 'Your relationship to the nominee',
options: [
{ id: 'peer', name: 'Peer/Colleague' },
{ id: 'manager', name: 'Their Manager' },
{ id: 'direct_report', name: 'Their Direct Report' },
{ id: 'cross_team', name: 'Cross-functional Partner' },
{ id: 'other', name: 'Other' }
],
orientation: 'horizontal'
});
});
// ============================================
// SECTION 8: Summary
// ============================================
const summarySection = form.addSubform('summary', {
title: 'Recognition Preview',
isVisible: () => {
const name = recipientSection.textbox('nomineeName')?.value();
const rating = impactSection.starRating('impactRating')?.value();
return !!name && rating !== null && rating !== undefined;
}
});
summarySection.addRow(row => {
row.addTextPanel('summaryContent', {
computedValue: () => {
const nomineeName = recipientSection.textbox('nomineeName')?.value();
const department = recipientSection.dropdown('department')?.value();
const recognitionType = typeSection.radioButton('recognitionType')?.value();
const values = valuesSection.suggestionChips('valuesChips')?.value() || [];
const rating = impactSection.starRating('impactRating')?.value();
const visibility = visibilitySection.radioButton('visibility')?.value();
const nominatorName = nominatorSection.textbox('yourName')?.value();
if (!nomineeName) return '';
const typeLabels: Record<string, string> = {
'above_beyond': 'Going Above & Beyond',
'teamwork': 'Outstanding Teamwork',
'innovation': 'Innovation & Creativity',
'customer_focus': 'Customer Focus',
'mentorship': 'Mentorship & Support',
'milestone': 'Achievement/Milestone',
'everyday': 'Everyday Helpfulness',
'other': 'Other'
};
const deptLabels: Record<string, string> = {
'engineering': 'Engineering', 'product': 'Product', 'design': 'Design',
'marketing': 'Marketing', 'sales': 'Sales', 'customer_success': 'Customer Success',
'hr': 'People & HR', 'finance': 'Finance', 'operations': 'Operations',
'leadership': 'Leadership', 'other': 'Other'
};
const stars = rating ? '⭐'.repeat(rating) : '';
let summary = `🏆 Recognition for ${nomineeName}\n`;
summary += `${'═'.repeat(30)}\n\n`;
if (department) {
summary += `📍 Department: ${deptLabels[department] || department}\n`;
}
if (recognitionType) {
summary += `🎯 Category: ${typeLabels[recognitionType] || recognitionType}\n`;
}
if (rating) {
summary += `⭐ Impact: ${stars} (${rating}/5)\n`;
}
if (values.length > 0) {
summary += `💎 Values: ${values.length} demonstrated\n`;
}
if (visibility) {
const visLabels: Record<string, string> = {
'public': '🌐 Public',
'team': '👥 Team Only',
'private': '🔒 Private'
};
summary += `\n👁️ Visibility: ${visLabels[visibility] || visibility}`;
}
if (nominatorName) {
summary += `\n\n✍️ Recognized by: ${nominatorName}`;
}
return summary;
},
customStyles: {
padding: '16px',
borderRadius: '8px',
backgroundColor: '#fff7ed',
borderLeft: '4px solid #f97316',
whiteSpace: 'pre-wrap',
fontFamily: 'monospace',
fontSize: '14px'
}
});
});
// ============================================
// FORM CONFIGURATION
// ============================================
form.configureSubmitButton({
label: () => {
const visibility = visibilitySection.radioButton('visibility')?.value();
if (visibility === 'public') return 'Send Recognition';
return 'Submit Recognition';
},
isVisible: () => {
const name = recipientSection.textbox('nomineeName')?.value();
const rating = impactSection.starRating('impactRating')?.value();
return !!name && rating !== null && rating !== undefined;
}
});
form.configureCompletionScreen({
type: 'text',
title: 'Recognition Sent!',
message: () => {
const nomineeName = recipientSection.textbox('nomineeName')?.value();
const visibility = visibilitySection.radioButton('visibility')?.value();
if (visibility === 'public') {
return `Your recognition for ${nomineeName || 'your colleague'} has been shared with the company! They'll be notified shortly.`;
}
if (visibility === 'team') {
return `Your recognition for ${nomineeName || 'your colleague'} has been shared with their team. They'll be notified shortly.`;
}
return `Your private recognition for ${nomineeName || 'your colleague'} has been sent. Only they and HR will see it.`;
}
});
}