export function creativeBriefFeedback(form: FormTs) {
// Creative Brief Feedback Form
// Demonstrates: MatrixQuestion, RatingScale (Likert), StarRating, RadioButton, ThumbRating, conditional visibility, dynamic labels
// ============================================
// HEADER
// ============================================
form.addRow(row => {
row.addTextPanel('header', {
label: 'Creative Brief Review',
computedValue: () => 'Your feedback ensures our creative work meets your expectations. Please review the brief carefully.',
customStyles: {
background: 'linear-gradient(135deg, #7c3aed 0%, #a855f7 100%)',
color: 'white',
padding: '28px',
borderRadius: '12px',
textAlign: 'center'
}
});
});
// ============================================
// SECTION 1: Brief Overview Approval
// ============================================
const overviewSection = form.addSubform('overviewSection', {
title: 'Overall Brief Assessment',
customStyles: { backgroundColor: '#faf5ff', padding: '16px', borderRadius: '8px' }
});
overviewSection.addRow(row => {
row.addThumbRating('briefApproval', {
label: 'Does this brief capture your project needs?',
showLabels: true,
upLabel: 'Yes, well captured',
downLabel: 'Needs revision',
alignment: 'center',
size: 'lg'
});
});
overviewSection.addRow(row => {
row.addStarRating('briefClarity', {
label: 'Overall clarity of the brief',
maxStars: 5,
size: 'lg',
alignment: 'center',
showConfettiOnMax: true
});
});
// ============================================
// SECTION 2: Brief Components Rating
// ============================================
const componentsSection = form.addSubform('componentsSection', {
title: 'Brief Components Assessment'
});
componentsSection.addRow(row => {
row.addMatrixQuestion('briefMatrix', {
label: 'Please rate the clarity and completeness of each section:',
rows: [
{ id: 'objectives', label: 'Project objectives & goals', isRequired: true },
{ id: 'audience', label: 'Target audience definition', isRequired: true },
{ id: 'message', label: 'Key messages & tone' },
{ id: 'deliverables', label: 'Deliverables & formats' },
{ id: 'timeline', label: 'Timeline & milestones' },
{ id: 'budget', label: 'Budget & resources' },
{ id: 'success', label: 'Success metrics / KPIs' },
{ id: 'brand', label: 'Brand guidelines & assets' }
],
columns: [
{ id: 'unclear', label: 'Unclear' },
{ id: 'needs-work', label: 'Needs Work' },
{ id: 'acceptable', label: 'Acceptable' },
{ id: 'good', label: 'Good' },
{ id: 'excellent', label: 'Excellent' }
],
striped: true,
fullWidth: true
});
});
// ============================================
// SECTION 3: Strategic Alignment
// ============================================
const alignmentSection = form.addSubform('alignmentSection', {
title: 'Strategic Alignment'
});
alignmentSection.addRow(row => {
row.addRatingScale('brandAlignment', {
preset: 'likert-5',
label: 'The brief aligns with our brand strategy and values',
lowLabel: 'Strongly Disagree',
highLabel: 'Strongly Agree',
alignment: 'center'
});
});
alignmentSection.addRow(row => {
row.addRatingScale('audienceRelevance', {
preset: 'likert-5',
label: 'The proposed approach will resonate with our target audience',
lowLabel: 'Strongly Disagree',
highLabel: 'Strongly Agree',
alignment: 'center'
});
});
alignmentSection.addRow(row => {
row.addRatingScale('differentiation', {
preset: 'likert-5',
label: 'The creative direction will differentiate us from competitors',
lowLabel: 'Strongly Disagree',
highLabel: 'Strongly Agree',
alignment: 'center'
});
});
// ============================================
// SECTION 4: Concerns (if any)
// ============================================
const concernsSection = form.addSubform('concernsSection', {
title: 'Areas of Concern',
isVisible: () => {
const approval = overviewSection.thumbRating('briefApproval')?.value();
const clarity = overviewSection.starRating('briefClarity')?.value();
return approval === 'down' || (clarity !== null && clarity !== undefined && clarity <= 3);
},
customStyles: { backgroundColor: '#fef3c7', padding: '16px', borderRadius: '8px' }
});
concernsSection.addRow(row => {
row.addCheckboxList('concernAreas', {
label: 'What areas need clarification or revision?',
options: [
{ id: 'objectives', name: 'Project objectives unclear' },
{ id: 'audience', name: 'Target audience not well defined' },
{ id: 'tone', name: 'Tone/messaging needs refinement' },
{ id: 'deliverables', name: 'Deliverables list incomplete' },
{ id: 'timeline', name: 'Timeline concerns' },
{ id: 'budget', name: 'Budget/scope mismatch' },
{ id: 'brand', name: 'Brand guidelines missing' },
{ id: 'approval', name: 'Approval process unclear' },
{ id: 'other', name: 'Other concerns' }
],
orientation: 'vertical'
});
});
concernsSection.addSpacer({ height: '12px' });
concernsSection.addRow(row => {
row.addTextarea('concernDetails', {
label: 'Please describe your concerns in detail',
placeholder: 'Specific details help us address your concerns quickly...',
rows: 4,
autoExpand: true,
isRequired: true
});
});
// ============================================
// SECTION 5: Positive Feedback (High ratings)
// ============================================
const positiveSection = form.addSubform('positiveSection', {
title: 'What We Got Right',
isVisible: () => {
const clarity = overviewSection.starRating('briefClarity')?.value();
return clarity !== null && clarity !== undefined && clarity >= 4;
},
customStyles: { backgroundColor: '#dcfce7', padding: '16px', borderRadius: '8px' }
});
positiveSection.addRow(row => {
row.addSuggestionChips('strengths', {
label: 'What stood out positively in this brief?',
suggestions: [
{ id: 'clear-goals', name: 'Clear goals' },
{ id: 'good-research', name: 'Good audience research' },
{ id: 'creative-direction', name: 'Strong creative direction' },
{ id: 'realistic-timeline', name: 'Realistic timeline' },
{ id: 'complete-assets', name: 'Complete brand assets' },
{ id: 'measurable-kpis', name: 'Measurable KPIs' },
{ id: 'competitive-insight', name: 'Good competitive insight' },
{ id: 'well-structured', name: 'Well structured' }
],
max: 4,
alignment: 'center'
});
});
// ============================================
// SECTION 6: Timeline & Budget
// ============================================
const resourcesSection = form.addSubform('resourcesSection', {
title: 'Timeline & Budget Review'
});
resourcesSection.addRow(row => {
row.addRadioButton('timelineFeasibility', {
label: 'Is the proposed timeline realistic?',
options: [
{ id: 'too-tight', name: 'Too tight - needs more time' },
{ id: 'challenging', name: 'Challenging but achievable' },
{ id: 'realistic', name: 'Realistic and well planned' },
{ id: 'generous', name: 'Has buffer - could accelerate' }
],
orientation: 'vertical'
}, '1fr');
row.addRadioButton('budgetAlignment', {
label: 'Does the budget align with deliverables?',
options: [
{ id: 'under', name: 'Under-budgeted for scope' },
{ id: 'tight', name: 'Tight but workable' },
{ id: 'appropriate', name: 'Appropriately budgeted' },
{ id: 'over', name: 'Could achieve more with budget' }
],
orientation: 'vertical'
}, '1fr');
});
resourcesSection.addRow(row => {
row.addTextarea('resourceComments', {
label: 'Any comments on timeline or budget?',
placeholder: 'Suggest adjustments or highlight risks...',
rows: 2,
autoExpand: true,
isVisible: () => {
const timeline = resourcesSection.radioButton('timelineFeasibility')?.value();
const budget = resourcesSection.radioButton('budgetAlignment')?.value();
return timeline === 'too-tight' || budget === 'under';
}
});
});
// ============================================
// SECTION 7: Approval Decision
// ============================================
const decisionSection = form.addSubform('decisionSection', {
title: 'Your Decision',
customStyles: { backgroundColor: '#f8fafc', padding: '16px', borderRadius: '8px' }
});
decisionSection.addRow(row => {
row.addRadioButton('approvalDecision', {
label: 'Based on your review, this brief is:',
options: [
{ id: 'approved', name: 'Approved - Ready to proceed' },
{ id: 'approved-minor', name: 'Approved with minor changes' },
{ id: 'revisions', name: 'Needs revisions before approval' },
{ id: 'major-rework', name: 'Requires significant rework' }
],
orientation: 'vertical',
isRequired: true
});
});
decisionSection.addSpacer({ height: '12px' });
decisionSection.addRow(row => {
row.addTextarea('revisionNotes', {
label: () => {
const decision = decisionSection.radioButton('approvalDecision')?.value();
if (decision === 'approved-minor') return 'What minor changes are needed?';
if (decision === 'revisions') return 'What revisions are required before you can approve?';
if (decision === 'major-rework') return 'Please describe the issues that need to be addressed';
return 'Any additional notes for the creative team?';
},
placeholder: () => {
const decision = decisionSection.radioButton('approvalDecision')?.value();
if (decision === 'approved') return 'Optional: Share any additional guidance for the team...';
return 'Please be specific so the team can address your feedback...';
},
rows: 4,
autoExpand: true,
isRequired: () => {
const decision = decisionSection.radioButton('approvalDecision')?.value();
return decision === 'revisions' || decision === 'major-rework';
}
});
});
// ============================================
// SECTION 8: Reviewer Information
// ============================================
const reviewerSection = form.addSubform('reviewerSection', {
title: 'Reviewer Information'
});
reviewerSection.addRow(row => {
row.addTextbox('reviewerName', {
label: 'Your name',
placeholder: 'First and last name',
isRequired: true
}, '1fr');
row.addDropdown('reviewerRole', {
label: 'Your role',
options: [
{ id: 'marketing-lead', name: 'Marketing Lead' },
{ id: 'brand-manager', name: 'Brand Manager' },
{ id: 'product-manager', name: 'Product Manager' },
{ id: 'executive', name: 'Executive Sponsor' },
{ id: 'legal', name: 'Legal/Compliance' },
{ id: 'other', name: 'Other Stakeholder' }
],
placeholder: 'Select role'
}, '1fr');
});
reviewerSection.addRow(row => {
row.addEmail('reviewerEmail', {
label: 'Email',
placeholder: 'your@company.com',
isRequired: true
}, '1fr');
row.addCheckbox('scheduleDiscussion', {
label: 'I would like to schedule a brief discussion call'
}, '1fr');
});
// ============================================
// SECTION 9: Summary
// ============================================
const summarySection = form.addSubform('summary', {
title: 'Review Summary',
isVisible: () => decisionSection.radioButton('approvalDecision')?.value() !== null
});
summarySection.addRow(row => {
row.addTextPanel('summaryContent', {
computedValue: () => {
const clarity = overviewSection.starRating('briefClarity')?.value();
const approval = overviewSection.thumbRating('briefApproval')?.value();
const decision = decisionSection.radioButton('approvalDecision')?.value();
const timeline = resourcesSection.radioButton('timelineFeasibility')?.value();
const budget = resourcesSection.radioButton('budgetAlignment')?.value();
const strengths = positiveSection.suggestionChips('strengths')?.value() || [];
if (!decision) return '';
const decisionEmojis: Record<string, string> = {
'approved': '✅',
'approved-minor': '✏️',
'revisions': '🔄',
'major-rework': '⚠️'
};
const decisionLabels: Record<string, string> = {
'approved': 'Approved',
'approved-minor': 'Approved with minor changes',
'revisions': 'Revisions needed',
'major-rework': 'Major rework required'
};
let summary = `${decisionEmojis[decision] || '📋'} Brief Review Summary\n`;
summary += `${'═'.repeat(28)}\n\n`;
summary += `📝 Decision: ${decisionLabels[decision] || decision}\n`;
if (clarity) {
summary += `⭐ Brief Clarity: ${clarity}/5\n`;
}
if (approval) {
summary += `👍 Captures needs: ${approval === 'up' ? 'Yes' : 'Needs work'}\n`;
}
if (timeline) {
const timelineLabels: Record<string, string> = {
'too-tight': '⏰ Timeline: Too tight',
'challenging': '⏰ Timeline: Challenging',
'realistic': '⏰ Timeline: Realistic',
'generous': '⏰ Timeline: Has buffer'
};
summary += `\n${timelineLabels[timeline] || timeline}`;
}
if (budget) {
const budgetLabels: Record<string, string> = {
'under': '💰 Budget: Under-scoped',
'tight': '💰 Budget: Tight',
'appropriate': '💰 Budget: Appropriate',
'over': '💰 Budget: Has room'
};
summary += `\n${budgetLabels[budget] || budget}`;
}
if (strengths.length > 0) {
summary += `\n\n✨ Strengths highlighted: ${strengths.length}`;
}
return summary;
},
customStyles: () => {
const decision = decisionSection.radioButton('approvalDecision')?.value();
const baseStyles = {
padding: '16px',
borderRadius: '8px',
whiteSpace: 'pre-wrap',
fontFamily: 'monospace',
fontSize: '14px'
};
if (decision === 'approved') {
return { ...baseStyles, backgroundColor: '#d1fae5', borderLeft: '4px solid #10b981' };
} else if (decision === 'approved-minor') {
return { ...baseStyles, backgroundColor: '#dbeafe', borderLeft: '4px solid #3b82f6' };
} else if (decision === 'revisions') {
return { ...baseStyles, backgroundColor: '#fef3c7', borderLeft: '4px solid #f59e0b' };
} else if (decision === 'major-rework') {
return { ...baseStyles, backgroundColor: '#fee2e2', borderLeft: '4px solid #ef4444' };
}
return baseStyles;
}
});
});
// ============================================
// FORM CONFIGURATION
// ============================================
form.configureSubmitButton({
label: 'Submit Brief Review',
isVisible: () => decisionSection.radioButton('approvalDecision')?.value() !== null
});
form.configureCompletionScreen({
type: 'text',
title: 'Thank You for Your Review!',
message: 'Your feedback has been recorded. The creative team will review your comments and follow up if clarification is needed.'
});
}