Patterns
Enroll with the right context
Preserve the course destination through availability, authentication, and payment.
On this page
Task sequence
- Resolve whether registration is open and whether the visitor is the owner.
- Keep the header action aligned with the enrollment panel.
- For a guest, carry the course destination through registration/sign-in.
- For a free class, enroll through the appropriate app request.
- For a paid class, proceed to the checkout destination returned by the app.
Data and persistence boundary
SignupSidebar controls free versus paid behavior; EmailCodeAuth restores a safe callback and can continue a free enrollment. Displayed price and countdown do not authorize payment or determine access by themselves.
Failure and recovery
Pending and error states belong beside the enrollment action. Closed registration should not be bypassed by an out-of-date header CTA.
Source references
| File | Responsibility |
|---|---|
| src/components/courses-public/logged-out/SignupSidebar.tsx | Enrollment branches |
| src/components/CourseHeaderAction.tsx | Header synchronization |
| src/components/EmailCodeAuth.tsx | Authentication continuation |
Interface examples
Native TeachKit interfaces with fictional course, account, and learner records. Service responses and media are isolated demonstrations; no customer data or live changes. Captured at 2× resolution or higher. Select an image to inspect it full size.
Related topics
Source audit: 2026-10-22 · Revision 903bbf05ca9d · Documentation v2.0.0