WIP receipt page - #3717
Conversation
OpenAPI ChangesNo changes detected Unexpected changes? Ensure your branch is up-to-date with |
There was a problem hiding this comment.
Pull request overview
Adds a new MITx Online receipt experience to the Next.js frontend, including dedicated receipt routes and dashboard “Receipt” links that resolve an order ID from order history before navigating to the receipt.
Changes:
- Introduces
/receipt/[orderId]and resolver routes (/receipt/by-run/[runId],/receipt/by-program/[programId]) plus URL helpers. - Adds receipt UI components/utilities (detail list, order summary, formatting) and redirect logic to resolve an order ID via
orders/history. - Updates dashboard enrollment cards and test utilities to use resolved internal receipt links instead of opening MITx Online legacy URLs, with extensive test coverage and API test factory support.
Reviewed changes
Copilot reviewed 27 out of 27 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| frontends/main/src/common/urls.ts | Adds receipt route constants and path helpers. |
| frontends/main/src/common/mitxonline/useOrderIdForResource.ts | New hook to resolve latest fulfilled order ID for a run/program from order history. |
| frontends/main/src/app/(site)/receipt/[orderId]/page.tsx | New receipt route entrypoint (validates param, renders receipt page). |
| frontends/main/src/app/(site)/receipt/by-run/[runId]/page.tsx | New resolver route: run → order → receipt redirect. |
| frontends/main/src/app/(site)/receipt/by-program/[programId]/page.tsx | New resolver route: program → order → receipt redirect. |
| frontends/main/src/app-pages/ReceiptPage/receiptUtils.ts | Receipt formatting utilities (money, dates, address, payment method, discount code). |
| frontends/main/src/app-pages/ReceiptPage/ReceiptRedirect.tsx | Client redirect component that replaces history entry with resolved receipt route. |
| frontends/main/src/app-pages/ReceiptPage/ReceiptRedirect.test.tsx | Tests for resolver redirect behavior and matching logic. |
| frontends/main/src/app-pages/ReceiptPage/ReceiptPage.tsx | Client receipt page fetching order + user, rendering receipt sections and error/404 states. |
| frontends/main/src/app-pages/ReceiptPage/ReceiptPage.test.tsx | Tests for receipt rendering, formatting, conditional sections, and error handling. |
| frontends/main/src/app-pages/ReceiptPage/ReceiptOrderSummary.tsx | Order summary sidebar (discount/quantity totals, total paid). |
| frontends/main/src/app-pages/ReceiptPage/ReceiptDetailList.tsx | Shared receipt detail list rendering + filtering helper. |
| frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/test-utils.ts | Adds setupOrderHistory helper for tests rendering verified enrollment cards. |
| frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/receiptMenuItem.ts | Switches receipt menu item to internal href using resolved order ID. |
| frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/receiptMenuItem.test.ts | Updates receipt menu item tests for new behavior. |
| frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/ProgramEnrollmentDisplay.test.tsx | Ensures order-history calls are mocked for verified cards. |
| frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/ProgramEnrollmentCard.tsx | Resolves program receipt order ID client-side and conditionally shows receipt menu item. |
| frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/ProgramEnrollmentCard.test.tsx | Updates tests to assert internal receipt link and hidden state when no order resolves. |
| frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/HomeEnrollmentsDisplay.test.tsx | Ensures order-history calls are mocked for verified cards. |
| frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/EnrolledCourseCard.tsx | Resolves run receipt order ID client-side and conditionally shows receipt menu item. |
| frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/EnrolledCourseCard.test.tsx | Updates tests to assert internal receipt link and hidden state when no order resolves. |
| frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/DashboardDialogs.test.tsx | Ensures order-history calls are mocked for verified cards. |
| frontends/main/src/app-pages/DashboardPage/ContractContent.test.tsx | Ensures order-history calls are mocked for verified cards. |
| frontends/main/next.config.js | Adds a Turbopack memory limit configuration. |
| frontends/api/src/mitxonline/test-utils/urls.ts | Adds test util URL builder for orders/history. |
| frontends/api/src/mitxonline/test-utils/factories/orders.ts | Expands order-related factories to support order history and receipt needs. |
| frontends/api/src/mitxonline/hooks/orders/queries.ts | Adds react-query historyList query for MITx Online orders history. |
| const formatPaymentMethod = (order: Order): string | null => { | ||
| const transaction = order.transactions | ||
| if (!transaction) return null | ||
| if (transaction.payment_method === "paypal") return "Paypal" | ||
| const parts = [transaction.card_type, transaction.card_number].filter(Boolean) | ||
| return parts.length > 0 ? parts.join(" | ") : null | ||
| } |
| historyList: (opts: OrdersApiOrdersHistoryListRequest = {}) => | ||
| queryOptions({ | ||
| queryKey: orderKeys.historyList(opts), | ||
| queryFn: async (): Promise<PaginatedOrderHistoryList> => { | ||
| return ordersApi.ordersHistoryList(opts).then((res) => res.data) | ||
| }, | ||
| }), |
| <MainColumn> | ||
| <Typography variant="body1"> | ||
| We could not load this receipt.{" "} | ||
| <SupportLink href={`mailto:${SUPPORT_EMAIL}`}> |
|
Some upstream changes we should make in MITx Online before continuing work on the frontend:
|
2e3fcdd to
68df7a2
Compare
…404, more concise and accurate comments
68df7a2 to
aa1f14c
Compare
What are the relevant tickets?
Description (What does it do?)
Screenshots (if appropriate):
How can this be tested?
Additional Context