Skip to content

feat: render CMS-managed testimonials on course and program pages - #3969

Merged
zamanafzal merged 1 commit into
mainfrom
zafzal/13286-testimonials-product-pages
Sep 24, 2026
Merged

zamanafzal merged 1 commit into
mainfrom
zafzal/13286-testimonials-product-pages

Conversation

@zamanafzal

@zamanafzal zamanafzal commented Sep 22, 2026 •

Copy link
Copy Markdown
Contributor

What are the relevant tickets?

https://github.com/mitodl/hq/issues/13286

Related PRs:

Description (What does it do?)

Renders author-managed testimonials on MIT Learn course & program product pages, from data added to the MITx Online Wagtail CMS in mitxonline#3987.

  • Adds a "What learners are saying" section showing the quote, avatar, name, and title.
  • Prev/next arrows appear only when there is more than one testimonial; moving between quotes cross-fades and the card height adjusts to each quote (respects prefers-reduced-motion).
  • Renders on CoursePage, ProgramPage, and ProgramAsCoursePage, after the FAQ section (Figma order: instructors → FAQs → testimonials); hidden entirely when there are no testimonials.
  • A testimonial without an image shows just the name and title (no avatar), matching the Figma design. No new colors — only existing theme tokens.

Screenshots (if appropriate):

Desktop:
Screenshot 2026-09-23 at 4 51 40 PM
Mobile:
Screenshot 2026-09-23 at 4 51 56 PM

How can this be tested?

The backend (mitxonline#3987) is merged — make sure your MIT Learn environment points at a MITx Online that includes it (current main).

  1. In MITx Online Wagtail admin, open a Course or Program page → Testimonials → add 2–3 entries (quote, name, title; leave one without an image) → Publish.
  2. Open that page on MIT Learn and scroll to What learners are saying.
  3. Click prev/next → the quote cross-fades and the card resizes to fit each quote. Prev is disabled on the first, next on the last.
  4. Keyboard/a11y: Tab to an arrow and page to a boundary (first or last). Focus stays on the still-enabled arrow rather than dropping to the page body.
  5. Check the entry with no image → no avatar is shown, just the name and title.
  6. Publish a page with one testimonial → no arrows. Publish one with none → the section is absent.

Additional Context

Uses the published @mitodl/mitxonline-api-axios@2026.9.23, which includes the testimonials field.

@github-actions

github-actions Bot commented Sep 22, 2026 •

Copy link
Copy Markdown

OpenAPI Changes

No changes detected

View full changelog

Unexpected changes? Ensure your branch is up-to-date with main (consider rebasing).

@zamanafzal
zamanafzal force-pushed the zafzal/13286-testimonials-product-pages branch from 977cb97 to ac47a31 Compare September 23, 2026 12:06
@zamanafzal
zamanafzal marked this pull request as ready for review September 23, 2026 12:22
@zamanafzal
zamanafzal requested a review from a team as a code owner September 23, 2026 12:22
Copilot AI balanced review requested due to automatic review settings September 23, 2026 12:22

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copilot review overview

🟡 Changes recommended

The implementation does not use the documented shared carousel and places testimonials after FAQs instead of before them.

Get a fresh assessment by requesting another Copilot review.

Review effort: Balanced
Findings: 4 Medium severity · 1 Low severity

Open (5)
What changed in this PR

Adds CMS-managed testimonials to MITx Online course and program product pages.

Changes:

  • Adds a testimonial display with navigation, animation, avatars, and accessibility labels.
  • Integrates testimonials into all three product-page variants with test factories and coverage.
  • Updates the MITx Online API client dependency.
File Description
yarn.lock Locks the testimonial-enabled API client.
frontends/​main/​src/​app-pages/​ProductPages/​util.ts Adds the testimonials heading anchor.
frontends/​main/​src/​app-pages/​ProductPages/​TestimonialsSection.tsx Implements testimonial rendering and navigation.
frontends/​main/​src/​app-pages/​ProductPages/​TestimonialsSection.test.tsx Tests testimonial presentation and controls.
frontends/​main/​src/​app-pages/​ProductPages/​ProgramPage.tsx Adds testimonials to program pages.
frontends/​main/​src/​app-pages/​ProductPages/​ProgramPage.test.tsx Updates program heading expectations.
frontends/​main/​src/​app-pages/​ProductPages/​ProgramAsCoursePage.tsx Adds testimonials to course-framed programs.
frontends/​main/​src/​app-pages/​ProductPages/​ProgramAsCoursePage.test.tsx Updates heading expectations.
frontends/​main/​src/​app-pages/​ProductPages/​FaqsSection.tsx Removes a styling comment.
frontends/​main/​src/​app-pages/​ProductPages/​CoursePage.tsx Adds testimonials to course pages.
frontends/​main/​src/​app-pages/​ProductPages/​CoursePage.test.tsx Updates course heading expectations.
frontends/​main/​package.json Pins the updated API client archive.
frontends/​api/​src/​mitxonline/​test-utils/​factories/​pages.ts Adds testimonial factories and page data.
frontends/​api/​package.json Pins the updated API client archive.

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

Comment thread frontends/main/src/app-pages/ProductPages/CoursePage.tsx
Comment thread frontends/main/src/app-pages/ProductPages/ProgramAsCoursePage.tsx
Comment thread frontends/main/src/app-pages/ProductPages/ProgramPage.tsx
Comment thread frontends/main/src/app-pages/ProductPages/TestimonialsSection.tsx
Comment thread frontends/main/src/app-pages/ProductPages/TestimonialsSection.test.tsx Outdated
@zamanafzal
zamanafzal force-pushed the zafzal/13286-testimonials-product-pages branch from ac47a31 to 3bef596 Compare September 23, 2026 12:26
@zamanafzal zamanafzal added the Needs Review An open Pull Request that is ready for review label Sep 23, 2026
@zamanafzal
zamanafzal force-pushed the zafzal/13286-testimonials-product-pages branch 2 times, most recently from 84503ea to ff95797 Compare September 23, 2026 17:33

@daniellefrappier18 daniellefrappier18 left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The PR says:

A testimonial without an image falls back to a default avatar icon

But this doesn't seem to be the case.

Image

Comment thread frontends/main/src/app-pages/ProductPages/TestimonialsSection.tsx
Comment thread frontends/main/src/app-pages/ProductPages/TestimonialsSection.tsx
@zamanafzal
zamanafzal force-pushed the zafzal/13286-testimonials-product-pages branch from ff95797 to 2acb897 Compare September 24, 2026 06:58

@daniellefrappier18 daniellefrappier18 left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@zamanafzal
zamanafzal enabled auto-merge (squash) September 24, 2026 18:12
@zamanafzal
zamanafzal disabled auto-merge September 24, 2026 18:12
@zamanafzal
zamanafzal merged commit 5d5dd75 into main Sep 24, 2026
14 checks passed
@zamanafzal
zamanafzal deleted the zafzal/13286-testimonials-product-pages branch September 24, 2026 18:16
@odlbot odlbot mentioned this pull request Sep 24, 2026
2 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Needs Review An open Pull Request that is ready for review

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants