feat: Add Receipt Page from ecommerce to MFE #189

julianajlk · 2022-06-10T16:47:34Z

REV-2683.
We're moving the Receipt Page from ecommerce repo to this MFE for the Theseus Project.
Current receipt page template: https://github.com/edx/ecommerce/blob/947c9068928281d24a54a86ea6df3340309a4f57/ecommerce/templates/edx/checkout/receipt.html#L1
Related backend PRs:
openedx/ecommerce#3748
openedx/ecommerce#3778
openedx/ecommerce#3781

Note: for screenshots of all the different versions, pls refer to https://2u-internal.atlassian.net/l/cp/N8fuc5Py

Receipt page before:

Receipt page after:

Order History update tag-along:
This is not part of this ticket, but Paragon's Table component will be deprecated, I'm updating the Order History page to use DataTable so that both Order History and Receipt Page have the same look for tables.

This PR:

Creates the receipt page
Updates Order History to use the new DataTable Paragon component
Adds unit/snapshot tests

This PR is dependent on the backend work in https://2u-internal.atlassian.net/browse/REV-2788

To test locally:

Enroll in a course, upgrade and make a purchase
Go to http://localhost:1996/orders to make sure you have orders
Choose an order number (ie. EDX-100005) and go to http://localhost:1996/receipt/?order_number={order-number}
To see a discount, a coupon must be created here http://localhost:18130/coupons/ and applied at checkout
This page CANNOT be accessed yet through the "View Order Details" link on Order History, this contains our current ecommerce receipt page

codecov · 2022-07-27T17:14:03Z

Codecov Report

Base: 48.78% // Head: 50.35% // Increases project coverage by +1.57% 🎉

Coverage data is based on head (fea1b62) compared to base (6934c12).
Patch coverage: 52.06% of modified lines in pull request are covered.

❗ Current head fea1b62 differs from pull request most recent head bf86fe5. Consider uploading reports for the commit bf86fe5 to get more accurate results

Additional details and impacted files

@@            Coverage Diff             @@
##           master     #189      +/-   ##
==========================================
+ Coverage   48.78%   50.35%   +1.57%     
==========================================
  Files          15       22       +7     
  Lines         164      284     +120     
  Branches       28       66      +38     
==========================================
+ Hits           80      143      +63     
- Misses         79      130      +51     
- Partials        5       11       +6

Impacted Files	Coverage Δ
src/components/NotFoundPage.jsx	`0.00% <0.00%> (ø)`
src/index.jsx	`0.00% <ø> (ø)`
src/order-history/OrderHistoryPage.jsx	`78.04% <ø> (ø)`
src/receipt/reducer.js	`0.00% <0.00%> (ø)`
src/receipt/saga.js	`0.00% <0.00%> (ø)`
src/receipt/service.js	`0.00% <0.00%> (ø)`
src/reducers.js	`0.00% <ø> (ø)`
src/sagas.js	`0.00% <ø> (ø)`
src/receipt/ReceiptPage.jsx	`71.62% <71.62%> (ø)`
src/receipt/ReceiptPage.messages.jsx	`100.00% <100.00%> (ø)`
... and 2 more

Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here.

☔ View full report at Codecov.
📢 Do you have feedback about the report comment? Let us know in this issue.

src/receipt/__snapshots__/ReceiptPage.test.jsx.snap

dianekaplan · 2022-07-28T14:40:20Z

(junk comment, can delete)

public/index.html

dianekaplan · 2022-07-28T14:52:56Z

src/receipt/saga.js

+    yield put(fetchOrderBegin());
+    const result = yield call(OrderApiService.getOrder, orderToFetch);
+    yield put(fetchOrderSuccess(result));
+  } catch (error) {


^ are there pieces that can move out of the try and into the else block, so it's clearer which bit we're targetting? Or could any of these fail separately/differently?

julianajlk · 2022-08-16T14:39:05Z

src/receipt/ReceiptPage.jsx

+            data-order-id={order.number}
+            data-total-amount={order.total_before_discounts_incl_tax}
+            data-product-ids={order.order_product_ids}
+            // data-back-button="{{ disable_back_button | default:0 }}"


Intentional comment - will remove soon

adamstankiewicz

Left some feedback. Also, curious, were you intending to have tests cover the placed where Codecov says there is no test coverage?

src/components/NotFoundPage.jsx

adamstankiewicz · 2022-08-25T18:09:38Z

src/components/NotFoundPage.jsx

@@ -10,7 +12,16 @@ export default function NotFoundPage() {
          defaultMessage="The page you're looking for is unavailable or there's an error in the URL. Please check the URL and try again."
          description="error message when a page does not exist"
        />
+        <span>{error}</span>


If error is optional (looks like it defaults to null), we should avoid rendering the span if there is no error provided otherwise its an empty span in the DOM that serves no purpose.

This page will only render if there is error in fetching the order (in src/receipt/saga.js). But I see your point, better to be safe than render an empty element.

Although now that I think about it, the actual error in this case is not very useful to the end learner? Following the original but I am likely going to remove it from here

adamstankiewicz · 2022-08-25T18:13:25Z

src/order-history/OrderHistoryPage.jsx

        className="order-history table-bordered"
+        itemCount={this.props.orders.length}
        data={this.getTableData()}


Looking at this.getTableData above, it looks like the data is formatted to include JSX elements inside of the data array itself in order to customize how the displayed is rendered in the table cell. However, by formatting the data passed to the data prop in DataTable with JSX elements, it'd prevent the table from supporting client-side sorting/filtering/etc. since it no longer has access to the underlying data itself. DataTable only has access to the JSX elements instead.

Alternatively, the proper way to format the cell data in DataTable is by overriding the Cell attribute within the columns definition. See these docs as an example.

I've done that in ReceiptPage.jsx when I learned about Cell from you 😬, I will update this here, good catch because I was just updating the deprecated table component to use DataTable, thanks!

adamstankiewicz · 2022-08-25T18:14:21Z

src/receipt/ReceiptPage.jsx

+const { LMS_BASE_URL } = getConfig();
+const DASHBOARD_URL = `${LMS_BASE_URL}/dashboard`;
+const FIND_COURSES_URL = `${LMS_BASE_URL}/courses`;
+class ReceiptPage extends React.Component {


[curious] Is the reason you're using a class component here because this is based on some other page component? Typically, we tend to prefer functional components over class components now.

Reason is likely that I am rusty in React and still use class components 😅 For state I will useState() hooks, assuming that's the way to go?

You should totally make the jump to functional React components 😉 It's refreshing haha!

But yes, if you want to change this to a functional component, useState is how you'd implement state, yes. That said, the decision on whether to change it from class -> functional is up to you :) I was just curious.

src/receipt/ReceiptPage.jsx

adamstankiewicz · 2022-08-25T19:39:57Z

src/receipt/_style.scss

+}
+
+.page__receipt {
+    h2 {


[curious/confirmation] Are the styles here relevant for all h2 on the page?

They should be, but weirdly I am modifying the size of 1 out of the 2 h2's with a specific px size.

I think this is another case of "following the original" which is not a good explanation but I will change them to be different heading levels since they are different.

adamstankiewicz · 2022-08-25T19:41:57Z

src/receipt/_style.scss

+    }
+
+    .thank-you {
+        font-size: 38px;


[curious] Why 38px here? It's not a font size in our design system's type ramp. See https://paragon-openedx.netlify.app/foundations/typography.

If we do need a custom font size here, we should use convert this to rem.

The aforementioned px specific size 😅 - will update to Paragon friendly size! Thanks for asking!

And preferably using a SCSS variable or CSS utility class, too (not hardcoded) 😉

adamstankiewicz · 2022-08-25T19:44:23Z

src/receipt/_style.scss

+
+    .copy {
+        > div {
+            margin-bottom: 1rem;


Generally, it's preferred to use Paragon's SCSS spacer or utility classes than hard coded rem values for margins, e.g. mb-3 or map-get($spacers, 3).

Not for this specifically, but sometimes I come across a case where I want a specific size that is not the same as bootstrap utility margin class spacer value, would I just revert to using a pixel or a fraction of a rem here?

Why is it preferred to use utility classes, because they render with the component as opposed to being compiled in a separate SCSS file? Just curious.

@julianajlk

sometimes I come across a case where I want a specific size that is not the same as bootstrap utility margin class spacer value, would I just revert to using a pixel or a fraction of a rem here?

Personally, I find the closest existing spacer value to the pixel value I'm given. In an ideal world, the handoff from design -> engineering wouldn't refer to any hard coded pixel/rem values and would instead refer to an existing spacer value.

Why is it preferred to use utility classes, because they render with the component as opposed to being compiled in a separate SCSS file? Just curious.

If spacing throughout the UI is using the same spacer values, it's trivial to update our spacing definitions in once place and have it apply everywhere. If we only use hard coded values for spacing, and our foundation spacing design tokens change (e.g., maybe mb-3 is equivalent to 1rem now, but 2rem in the future), that change wouldn't propagate where spacing is hardcoded, leading to inconsistency in the UI.

adamstankiewicz · 2022-08-25T19:45:09Z

src/receipt/_style.scss

+    }
+
+    .order-total {
+        font-size: 0.875rem;


This is the small type ramp in our design system. This could be replaced with $font-size-sm or use a small utility class name on the element itself.

adamstankiewicz · 2022-08-25T19:49:13Z

src/receipt/_style.scss

+        margin: 2rem 0 4rem 0;
+
+        .dashboard-link {
+            margin-right: 2.5rem;


Related to other feedback, if we treat these links at button links instead of Hyperlinks, I believe ActionRow should handle the spacing between the two action buttons already without needing explicit custom spacing.

Example (see default spacing between action buttons in ActionRow):

Makes sense now that I understand ActionRow better! Someone in fedex recommended this and I didn't stop to think that it needs an action by the name of the component (for the other case I used it for just text formatting)

…Order History

…rder with try block

…mail

julianajlk force-pushed the julianajlk/REV-2683/receipt-page branch from 41ca02e to 8a88ebb Compare June 10, 2022 16:58

julianajlk mentioned this pull request Jul 20, 2022

feat: Add receipt page info to Orders API openedx/ecommerce#3748

Merged

julianajlk force-pushed the julianajlk/REV-2683/receipt-page branch 4 times, most recently from 7152add to 328ee6b Compare July 27, 2022 17:13

openedx deleted a comment from codecov bot Jul 27, 2022

julianajlk force-pushed the julianajlk/REV-2683/receipt-page branch 2 times, most recently from 870f807 to 0cc9490 Compare July 27, 2022 19:14

julianajlk commented Jul 27, 2022

View reviewed changes

src/receipt/__snapshots__/ReceiptPage.test.jsx.snap Outdated Show resolved Hide resolved

julianajlk force-pushed the julianajlk/REV-2683/receipt-page branch 2 times, most recently from 46f483b to 9d7d7b3 Compare July 27, 2022 20:27

dianekaplan reviewed Jul 28, 2022

View reviewed changes

public/index.html Show resolved Hide resolved

dianekaplan reviewed Jul 28, 2022

View reviewed changes

julianajlk force-pushed the julianajlk/REV-2683/receipt-page branch 11 times, most recently from 46b7926 to 7c16f3a Compare August 16, 2022 14:21

julianajlk commented Aug 16, 2022

View reviewed changes

julianajlk requested review from adamstankiewicz and colinbrash August 18, 2022 19:45

adamstankiewicz reviewed Aug 25, 2022

View reviewed changes

julianajlk added 9 commits August 30, 2022 11:16

fix: Replace soon to be deprecated Table with DataTable component in …

e372e27

…Order History

feat: Add Receipt Page from ecommerce to ecommerce MFE

018271e

fix: Add fetchOrderFailure for error handling and modify handleFetchO…

35dad33

…rder with try block

feat: Add Enterprise Message banner, update DataTable and other

68f60e5

feat: Install react-helmet to be used in adding script tag

3f9d206

test: Add test and snapshot for ReceiptPage

06d1dee

fix: Modify NotFoundPage error span conditional

1c14418

fix: Use MailtoLink instead of Hyperlink Paragon Component for user e…

951f159

…mail

fix: Add Hyperlink component i/o link tag

1d13a50

julianajlk force-pushed the julianajlk/REV-2683/receipt-page branch from 7c16f3a to 1d13a50 Compare August 30, 2022 16:51

julianajlk added 2 commits August 30, 2022 19:20

fix: Remove ternary operators with null

15d135b

fix: WIP DataTable updates renderOrderTable itemCount

bf86fe5

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: Add Receipt Page from ecommerce to MFE #189

feat: Add Receipt Page from ecommerce to MFE #189

julianajlk commented Jun 10, 2022 •

edited

Loading

codecov bot commented Jul 27, 2022 •

edited

Loading

dianekaplan commented Jul 28, 2022 •

edited

Loading

dianekaplan Jul 28, 2022

julianajlk Aug 16, 2022

adamstankiewicz left a comment

adamstankiewicz Aug 25, 2022

julianajlk Aug 30, 2022

adamstankiewicz Aug 25, 2022

julianajlk Aug 30, 2022

adamstankiewicz Aug 25, 2022

julianajlk Aug 30, 2022

adamstankiewicz Aug 31, 2022

adamstankiewicz Aug 31, 2022

adamstankiewicz Aug 25, 2022

julianajlk Aug 30, 2022

adamstankiewicz Aug 25, 2022

julianajlk Aug 30, 2022

adamstankiewicz Aug 31, 2022

adamstankiewicz Aug 25, 2022

julianajlk Aug 30, 2022

adamstankiewicz Aug 31, 2022 •

edited

Loading

adamstankiewicz Aug 25, 2022

adamstankiewicz Aug 25, 2022

julianajlk Aug 30, 2022 •

edited

Loading

feat: Add Receipt Page from ecommerce to MFE #189

Are you sure you want to change the base?

feat: Add Receipt Page from ecommerce to MFE #189

Conversation

julianajlk commented Jun 10, 2022 • edited Loading

codecov bot commented Jul 27, 2022 • edited Loading

Codecov Report

dianekaplan commented Jul 28, 2022 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

adamstankiewicz left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

adamstankiewicz Aug 31, 2022 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

julianajlk Aug 30, 2022 • edited Loading

Choose a reason for hiding this comment

julianajlk commented Jun 10, 2022 •

edited

Loading

codecov bot commented Jul 27, 2022 •

edited

Loading

dianekaplan commented Jul 28, 2022 •

edited

Loading

adamstankiewicz Aug 31, 2022 •

edited

Loading

julianajlk Aug 30, 2022 •

edited

Loading