gated lessions

This commit is contained in:
nmemmert
2026-06-03 16:07:54 -04:00
parent a7dc3ede21
commit e11858c2f3
2 changed files with 14 additions and 8 deletions
+1 -1
View File
@@ -1,4 +1,4 @@
{
"users": {},
"updatedAt": "2026-06-03T19:07:22.282Z"
"updatedAt": "2026-06-03T20:07:22.259Z"
}
+13 -7
View File
@@ -1284,12 +1284,15 @@ export function ColossiansStudyIndexPage({ content }: Props) {
<h2>{study.title}</h2>
</div>
<div className="study-module-list">
{sections.map(section => {
{sections.map((section, sectionIdx) => {
const lessonNumber = getLessonNumber(sections, section.id)
const isNew = isNewLesson(section)
const coming = isComingSoon(section)
const isDisabled = coming || !enrolled
const prevSection = sectionIdx > 0 ? sections[sectionIdx - 1] : null
const prevCompleted = !prevSection || studyProgress.completedSectionIds.includes(prevSection.id)
const lockedByProgress = enrolled && !coming && sectionIdx > 0 && !prevCompleted && !studyProgress.completedSectionIds.includes(section.id)
const isDisabled = coming || !enrolled || lockedByProgress
return (
<Link key={section.id} to={isDisabled ? '#' : `/study/${study.slug}/${section.id}`} className={`study-module-row${isDisabled ? ' study-module-row--disabled' : ''}`} onClick={e => isDisabled && e.preventDefault()}>
<div className="study-module-row-left">
@@ -1298,7 +1301,8 @@ export function ColossiansStudyIndexPage({ content }: Props) {
{isNew && <span style={{ backgroundColor: '#4caf50', color: '#fff', padding: '0.2rem 0.5rem', borderRadius: '3px', fontSize: '0.75rem', fontWeight: '600' }}>New</span>}
{coming && <span style={{ backgroundColor: '#ffb74d', color: '#333', padding: '0.2rem 0.5rem', borderRadius: '3px', fontSize: '0.75rem', fontWeight: '600' }}>Coming {getReleaseDateDisplay(section)}</span>}
{!coming && !enrolled && <span style={{ backgroundColor: '#ef5350', color: '#fff', padding: '0.2rem 0.5rem', borderRadius: '3px', fontSize: '0.75rem', fontWeight: '600' }}>Enroll to open</span>}
{enrolled && studyProgress.completedSectionIds.includes(section.id) && (
{lockedByProgress && <span style={{ backgroundColor: '#5a5440', color: '#f0e9cc', padding: '0.2rem 0.5rem', borderRadius: '3px', fontSize: '0.75rem', fontWeight: '600' }}>Complete previous lesson</span>}
{enrolled && !lockedByProgress && studyProgress.completedSectionIds.includes(section.id) && (
<span style={{ backgroundColor: '#2196f3', color: '#fff', padding: '0.2rem 0.5rem', borderRadius: '3px', fontSize: '0.75rem', fontWeight: '600' }}>Completed</span>
)}
</div>
@@ -1836,10 +1840,12 @@ export function ColossiansStudySectionPage({ content }: Props) {
{previousSection ? (
<Link to={`/study/${study.slug}/${previousSection.id}`} className="btn-secondary">Previous Lesson</Link>
) : <span className="study-nav-placeholder" />}
{nextSection && isSectionReleased(nextSection) ? (
<Link to={`/study/${study.slug}/${nextSection.id}`} className="btn-secondary">Next Lesson</Link>
) : nextSection ? (
{nextSection && !isSectionReleased(nextSection) ? (
<span className="study-nav-placeholder">Available {getReleaseDateDisplay(nextSection)}</span>
) : nextSection && !lessonCompleted ? (
<span className="study-nav-placeholder" title="Complete this lesson's checkpoint to unlock the next one">🔒 Complete checkpoint first</span>
) : nextSection ? (
<Link to={`/study/${study.slug}/${nextSection.id}`} className="btn-secondary">Next Lesson</Link>
) : <span className="study-nav-placeholder" />}
</div>
</article>