Product page: list prices and actual prices#3346
Open
annagav wants to merge 7 commits into
Open
Conversation
OpenAPI ChangesNo changes detected Unexpected changes? Ensure your branch is up-to-date with |
annagav
changed the title
Contributor
There was a problem hiding this comment.
Pull request overview
Adds a new program pricing display intended to show the current program price alongside a “list price” and computed savings, aligning with the requested “Program Savings Price” UI update.
Changes:
- Introduces new styled components to render an enhanced paid-program “Price” section (including savings + list price display).
- Updates
ProgramPriceRowto compute/display savings fromlist_pricevs current product price. - Adds a local
toNumericPricehelper for handlingnumber | stringprice inputs.
| <GrayText>(includes {program.certificate_type})</GrayText> | ||
| </> | ||
| ) : null | ||
| // if (enrollmentType === "none") return null |
Comment on lines
+891
to
+918
| const currentAmount = toNumericPrice(currentPrice) | ||
| const listAmount = toNumericPrice(listPrice) | ||
| const hasSavings = | ||
| currentAmount !== null && listAmount !== null && listAmount > currentAmount | ||
| const savingsAmount = hasSavings ? listAmount - currentAmount : null | ||
|
|
||
| const paidSection = | ||
| enrollmentType === "paid" && currentPrice ? ( | ||
| <ProgramPaySection> | ||
| <ProgramPayLabel>Price</ProgramPayLabel> | ||
| <ProgramPayContent> | ||
| <ProgramPriceLine> | ||
| <ProgramPriceAmount> | ||
| {formatPrice(currentPrice, { avoidCents: true })} | ||
| </ProgramPriceAmount> | ||
| <ProgramPriceSuffix>/ full program</ProgramPriceSuffix> | ||
| </ProgramPriceLine> | ||
| {hasSavings && savingsAmount !== null && listAmount !== null ? ( | ||
| <ProgramDiscountBlock> | ||
| <ProgramSavingsText> | ||
| Save {formatPrice(savingsAmount, { avoidCents: true })} | ||
| </ProgramSavingsText> | ||
| <ProgramListPriceText> | ||
| {formatPrice(listAmount, { avoidCents: true })} total for | ||
| courses purchased separately | ||
| </ProgramListPriceText> | ||
| </ProgramDiscountBlock> | ||
| ) : null} |
Comment on lines
+913
to
+915
| <ProgramListPriceText> | ||
| {formatPrice(listAmount, { avoidCents: true })} total for | ||
| courses purchased separately |
annagav
force-pushed
the
ag/add_list_price_to_prgram_page
branch
from
3513bd3 to
68a1860
Compare
Contributor
Author
|
Update: |
annagav
force-pushed
the
ag/add_list_price_to_prgram_page
branch
from
180883d to
cfa88c4
Compare
|
This looks great! thank you, design is approved. |
Copilot stopped work on behalf of
annagav due to an error
May 15, 2026 18:25
| ...theme.typography.body4, | ||
| fontSize: "12px", | ||
| lineHeight: "16px", | ||
| fontWeight: theme.typography.fontWeightMedium, |
Contributor
There was a problem hiding this comment.
This should just be theme.typography.subtitle3, I think
We should only need custom typography very rarely. (I don't see the letterspacing thing in figma, but i may have missed it.)
Comment on lines
+465
to
+467
| fontSize: "14px", | ||
| lineHeight: "18px", | ||
| fontWeight: theme.typography.fontWeightRegular, |
Contributor
There was a problem hiding this comment.
These 3 overrides are unnecessary. 14/18/regular is normal body2.
Comment on lines
+472
to
+474
| fontStyle: "normal", | ||
| fontSize: "14px", | ||
| lineHeight: "18px", |
Contributor
There was a problem hiding this comment.
you should be able to drop font style/size/weight and lien height and use subtitle2 here
| ...theme.typography.body4, | ||
| fontSize: "12px", | ||
| lineHeight: "16px", | ||
| fontWeight: theme.typography.fontWeightMedium, |
Contributor
There was a problem hiding this comment.
This should just be theme.typography.subtitle3, I think
We should only need custom typography very rarely. (I don't see the letterspacing thing in figma, but i may have missed it.)
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
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?
Fix https://github.com/mitodl/hq/issues/11119
Description (What does it do?)
Adds a new Price section with shows List and current price and the amount saved.
Screenshots (if appropriate):
If Audit is available, and FinAid:
Both, no FinAid:
Only Paid:
How can this be tested?