Advertise parent programs on course product pages#3026
Closed
ChristopherChudzicki wants to merge 28 commits intomainfrom
Closed
Advertise parent programs on course product pages#3026ChristopherChudzicki wants to merge 28 commits intomainfrom
ChristopherChudzicki wants to merge 28 commits intomainfrom
Conversation
Reorder the sidebar card so the enroll button appears after the summary info rows rather than before them, matching the Figma design. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Replace the "Course is part of the following programs" info row with a ProgramBundleUpsell component that fetches each parent program's details and shows a bundle pricing card with a "View Program" link, ordered after the enroll button. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…borders/padding Replace three separate DOM structures (desktop/tablet/mobile) in the product page info box with a single HTML structure using CSS grid for responsive layout. Fixes program bundle upsell border on tablet by resetting bleed margins and adding direct border; adjusts SummaryRoot padding per breakpoint; adds AskTIM placeholder button. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
… AskTIM placeholder - Split SummaryRoot into SummaryCard (border/shadow wrapper) and SummaryContent (padded metadata area) so the bundle upsell can span edge-to-edge without negative margins - Delete unused ProductNavbar.tsx - Add temporary AskTIM button placeholder using smoot-design Button - Add TODO comment for hardcoded 1.2x strike price - Add comment explaining per-program detail fetches Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
…psell - Remove grid-based tablet layout (RightCol, ActionsArea) from template - Enrollment button desktop-only via DesktopEnrollArea; AskTIM outside card - SummaryContent is now just a padding wrapper; gap/layout owned by SummaryRows - SummaryRows: flex-column on desktop/mobile, column-count:2 on tablet - Bundle upsell: row layout on tablet (text left, button right), skip if no price - Add separator borders between multiple upsell items Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Sticky position on SummaryCol so AskTIM scrolls with the card - align-self: flex-start required for sticky in flex parent - Replace magic top offset with HEADER_HEIGHT constant - Add column-rule divider between tablet metadata columns Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Use avoidCents for bundle price formatting (whole dollars)
- Show required course count in upsell title ("Get all 5 ...")
- Bold program title, normal weight for rest of upsell text
- Replace strikethrough price with static "(19% off)" discount
- Replace "Want a program certificate?" with "Best value"
- Make AskTIM button full width, match Figma shadow opacity
- Adjust bundle spacing to match Figma (8px header gap, 24px item gap)
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Replace DesktopEnrollArea (md-only) with EnrollArea (always visible)
- Tablet enrollment button: max-width 50%, center-aligned
- Update ProgramBundleUpsell tests for new copy ("Best value", course
count, avoidCents price, "(19% off)") and add no-price test case
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- ProgramBundleUpsell waits for all queries to load and filters to
programs with prices before rendering, preventing an empty "Best
value" header
- AskTIM button text uses productNoun prop ("course" or "program")
- enrollButton is now a required prop on ProductPageTemplate
- Remove console.log placeholder from AskTIM onClick
- Clean up BundleUpsellContainer border styles per breakpoint
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Use monthsFromNow() helper so tests don't rot as calendar time passes. Past dates for "Anytime" logic use negative offsets; ordering tests use spaced-out future offsets; display-only tests let the factory decide. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
…ises Add test verifying the upsell renders nothing when the program detail fetch fails. Use Promise.withResolvers() to control mock response timing in both no-price and error tests, replacing the fragile queryClient.isFetching() polling pattern. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Show structured skeleton placeholders (title, price, button) while program details load, then render real content or unmount if no priced programs. Tests now verify the full loading→removed lifecycle using waitForElementToBeRemoved and use distinct prices for multi-program assertions. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Replace sidebarSummary, enrollButton, programUpsell, summaryTitle, and productNoun props with a single infoBox prop. CoursePage uses CourseInfoBox, ProgramPage uses ProgramInfoBox. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Rather than silently returning null when all program detail fetches fail, log a console.warn to aid debugging. Add allowConsoleErrors() to the error-state test to accommodate jest-fail-on-console. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Rename CourseInfoBox → InfoBoxCourse, ProgramInfoBox → InfoBoxProgram for alphabetical grouping with InfoBoxParts. Extract shared styled components (now InfoBoxCard, InfoBoxContent, InfoBoxEnrollArea, AskTimButton) into InfoBoxParts so InfoBoxProgram no longer depends on InfoBoxCourse for shared primitives. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Move ProgramBundleUpsell component and all its styled components out of ProductSummary.tsx into ProgramBundleUpsell.tsx, with tests moved to ProgramBundleUpsell.test.tsx. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Remove dedicated InfoBoxCourse and InfoBoxProgram test files — their coverage is better placed at the page level. Rename section headings to "Course Information" / "Program Information". Add a CoursePage test asserting the program bundle upsell renders when the course belongs to a program. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Remove redundant fragment wrappers in InfoBoxCourse and InfoBoxProgram
- Use V2ProgramDetail instead of V2Program for RequirementsSection prop type
- Remove no-op `& {}` intersection on CourseCertificateBox
- Clarify bundle upsell smoke test name in CoursePage.test
- Fix misleading `courses` variable name in ProgramPage 404 test
- Batch program detail fetches into single programsList query
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
ChristopherChudzicki
added
the
Needs Review
On tablet, use flex + justify-end instead of centering the enrollment button. Also remove unnecessary width: 100% and WideButtonLink wrapper from enrollment button components. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Remove "Best value" header, use h5 bold for full title line, and regroup price + button into BundleUpsellActions so price sits above the button on tablet (single HTML structure, CSS-only responsive). Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
OpenAPI ChangesShow/hide 175 changes: 53 error, 72 warning, 50 infoUnexpected changes? Ensure your branch is up-to-date with |
![sentry[bot]](https://avatars.githubusercontent.com/in/12637?s=60&v=4){kind=small}
Comment on lines
251
to
258
| </TopContainer> | ||
| </BannerBackground> | ||
| <BottomContainer> | ||
| {/* | ||
| * The summary section is rendered 3 times (desktop, tablet, mobile) | ||
| * with different layouts, but only one is visible at a time via CSS. | ||
| * A single visually-hidden heading serves all three. | ||
| */} | ||
| <VisuallyHidden> | ||
| <h2 id={HeadingIds.Summary}>{summaryTitle}</h2> | ||
| </VisuallyHidden> | ||
| <SidebarCol showAbove="md"> | ||
| <SummaryRoot as="section" aria-labelledby={HeadingIds.Summary}> | ||
| {enrollButton} | ||
| {sidebarSummary} | ||
| </SummaryRoot> | ||
| </SidebarCol> | ||
| <SummaryCol>{infoBox}</SummaryCol> | ||
| <MainCol> | ||
| {navbar} | ||
| <Show showBetween={["sm", "md"]}> | ||
| <SummaryRoot as="section" aria-labelledby={HeadingIds.Summary}> | ||
| {sidebarSummary} | ||
| <Stack gap="16px"> | ||
| <SidebarMedia | ||
| videoUrl={videoUrl} | ||
| imageSrc={imageSrc} | ||
| title={title} | ||
| /> | ||
| {enrollButton} | ||
| </Stack> | ||
| </SummaryRoot> | ||
| </Show> | ||
| <SidebarCol showBelow="sm" alignSelf="center"> | ||
| <SummaryRoot as="section" aria-labelledby={HeadingIds.Summary}> | ||
| <SidebarMedia | ||
| videoUrl={videoUrl} | ||
| imageSrc={imageSrc} | ||
| title={title} | ||
| /> | ||
| {enrollButton} | ||
| {sidebarSummary} | ||
| </SummaryRoot> | ||
| </SidebarCol> | ||
| <SectionsWrapper>{children}</SectionsWrapper> | ||
| </MainCol> | ||
| </BottomContainer> |
There was a problem hiding this comment.
Bug: The refactored ProductPageTemplate no longer renders the SidebarMedia component on tablet and mobile breakpoints, causing the product video or image to be missing on smaller screens.
Severity: HIGH
Suggested Fix
Re-introduce the rendering of the SidebarMedia component for tablet and mobile breakpoints. This can be achieved by adding back the conditional rendering blocks for these screen sizes, such as using <Show showBetween={["sm", "md"]}> and <SidebarCol showBelow="sm"> to wrap the <SidebarMedia /> component.
Prompt for AI Agent
Review the code at the location below. A potential bug has been identified by an AI
agent.
Verify if this is a real issue. If it is, propose a fix; if not, explain why it's not
valid.
Location: frontends/main/src/app-pages/ProductPages/ProductPageTemplate.tsx#L251-L258
Potential issue: The `SidebarMedia` component, which displays a product's video or
image, is now only rendered on desktop views (`showAbove="md"`). The refactoring removed
the rendering logic for tablet (`showBetween=["sm", "md"]`) and mobile
(`showBelow="sm"`) breakpoints. As a result, the product's associated video or image
will be missing on tablet and mobile devices. This is a functional regression, as the
media was previously displayed across all breakpoints.
Did we get this right? 👍 / 👎 to inform future reviews.
Contributor
Author
There was a problem hiding this comment.
This is true. The media (image/video) no longer renders on mobile/tablet.
This will be resolved in
Contributor
Author
|
Closing in favor of #3029 because github has been "processing updates" for an hour, but a new branch got the updates right away 🤷 
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What are the relevant tickets?
Closes https://github.com/mitodl/hq/issues/10434
Description (What does it do?)
Program Bundle Upsell: When a course belongs to one or more MITx programs, shows a "Best value" upsell below the course metadata with the program price, required course count, and a "View Program" link.
Unified HTML structure: The info box sidebar uses a single HTML structure with CSS-only responsive behavior instead of separate DOM trees per breakpoint.
InfoBox refactor: Introduced
InfoBoxCourseandInfoBoxProgramwrapper components that own the full sidebar card composition (summary + enrollment button + upsell), with shared styled primitives inInfoBoxParts.ProductPageTemplatenow takes a singleinfoBoxprop instead of separate sidebar-related props.Screenshots (if appropriate):
How can this be tested?
Prerequisites:
NEXT_PUBLIC_MITX_ONLINE_BASE_URL=https://api.rc.learn.mit.edu/mitxonline./manage.py create_courseware,./manage.py create_courseware_page, use--helpfor more info). In Django Admin, add courses as a requirement for a program; create products for the program. Ensure all of the data is live and wagtail pages published. Wagtail pages also needinclude_in_learn_catalog.Now:
Additional Context