gated lessions
This commit is contained in:
@@ -1,4 +1,4 @@
|
|||||||
{
|
{
|
||||||
"users": {},
|
"users": {},
|
||||||
"updatedAt": "2026-06-03T19:07:22.282Z"
|
"updatedAt": "2026-06-03T20:07:22.259Z"
|
||||||
}
|
}
|
||||||
+13
-7
@@ -1284,12 +1284,15 @@ export function ColossiansStudyIndexPage({ content }: Props) {
|
|||||||
<h2>{study.title}</h2>
|
<h2>{study.title}</h2>
|
||||||
</div>
|
</div>
|
||||||
<div className="study-module-list">
|
<div className="study-module-list">
|
||||||
{sections.map(section => {
|
{sections.map((section, sectionIdx) => {
|
||||||
const lessonNumber = getLessonNumber(sections, section.id)
|
const lessonNumber = getLessonNumber(sections, section.id)
|
||||||
const isNew = isNewLesson(section)
|
const isNew = isNewLesson(section)
|
||||||
const coming = isComingSoon(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 (
|
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()}>
|
<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">
|
<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>}
|
{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 && <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>}
|
{!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>
|
<span style={{ backgroundColor: '#2196f3', color: '#fff', padding: '0.2rem 0.5rem', borderRadius: '3px', fontSize: '0.75rem', fontWeight: '600' }}>Completed</span>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
@@ -1836,10 +1840,12 @@ export function ColossiansStudySectionPage({ content }: Props) {
|
|||||||
{previousSection ? (
|
{previousSection ? (
|
||||||
<Link to={`/study/${study.slug}/${previousSection.id}`} className="btn-secondary">Previous Lesson</Link>
|
<Link to={`/study/${study.slug}/${previousSection.id}`} className="btn-secondary">Previous Lesson</Link>
|
||||||
) : <span className="study-nav-placeholder" />}
|
) : <span className="study-nav-placeholder" />}
|
||||||
{nextSection && isSectionReleased(nextSection) ? (
|
{nextSection && !isSectionReleased(nextSection) ? (
|
||||||
<Link to={`/study/${study.slug}/${nextSection.id}`} className="btn-secondary">Next Lesson</Link>
|
|
||||||
) : nextSection ? (
|
|
||||||
<span className="study-nav-placeholder">Available {getReleaseDateDisplay(nextSection)}</span>
|
<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" />}
|
) : <span className="study-nav-placeholder" />}
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
|
|||||||
Reference in New Issue
Block a user