Unified Order History for Ecommerce and Commercetools (#370)

* feat: Unified order history

* fix: number formatting issues for order history table

We now mostly trust the server and if its a pure decimal number,
we assume its USD (this is to support legacy system)

* fix: npx update-browserslist-db@latest

.env.development

@@ -17,7 +17,7 @@ LANGUAGE_PREFERENCE_COOKIE_NAME=openedx-language-preference
 SITE_NAME=localhost
 MARKETING_SITE_BASE_URL=http://localhost:18000
 SUPPORT_URL=http://localhost:18000/support
-ORDER_HISTORY_URL=http://localhost:1996/orders
+ORDER_HISTORY_URL=http://localhost:8140/orders/unified/order_history/
 LOGO_URL=https://edx-cdn.org/v3/default/logo.svg
 LOGO_TRADEMARK_URL=https://edx-cdn.org/v3/default/logo-trademark.svg
 LOGO_WHITE_URL=https://edx-cdn.org/v3/default/logo-white.svg

.env.test

@@ -17,7 +17,7 @@ LANGUAGE_PREFERENCE_COOKIE_NAME=openedx-language-preference
 SITE_NAME=localhost
 MARKETING_SITE_BASE_URL=http://localhost:18000
 SUPPORT_URL=http://localhost:18000/support
-ORDER_HISTORY_URL=https://localhost:1996/orders
+ORDER_HISTORY_URL=http://localhost:8140/orders/unified/order_history/
 LOGO_URL=https://edx-cdn.org/v3/default/logo.svg
 LOGO_TRADEMARK_URL=https://edx-cdn.org/v3/default/logo-trademark.svg
 LOGO_WHITE_URL=https://edx-cdn.org/v3/default/logo-white.svg

src/order-history/OrderHistoryPage.jsx

@@ -6,7 +6,6 @@ import {
  injectIntl,
  intlShape,
  FormattedDate,
- FormattedNumber,
 } from '@edx/frontend-platform/i18n';
 import { DataTable, Hyperlink, Pagination } from '@edx/paragon';
 import MediaQuery from 'react-responsive';
@@ -36,14 +35,13 @@ class OrderHistoryPage extends React.Component {
  lineItems,
  datePlaced,
  total,
- currency,
  orderId,
  receiptUrl,
  }) => ({
  description: this.renderLineItems(lineItems),
  datePlaced: <FormattedDate value={new Date(datePlaced)} />,
  // eslint-disable-next-line react/style-prop-object
- total: <FormattedNumber value={total} style="currency" currency={currency} />,
+ total,
  receiptUrl: (
  <Hyperlink destination={receiptUrl}>
  {this.props.intl.formatMessage(messages['ecommerce.order.history.view.order.detail'])}

src/order-history/service.js

@@ -6,58 +6,33 @@ import { getConfig } from '@edx/frontend-platform';
 
 const { ECOMMERCE_BASE_URL } = getConfig();
 
-const ECOMMERCE_API_BASE_URL = `${ECOMMERCE_BASE_URL}/api/v2`;
 const ECOMMERCE_RECEIPT_BASE_URL = `${ECOMMERCE_BASE_URL}/checkout/receipt/`;
 
+const decimalishMatcher = /^([0-9]*[.,]*)+[0-9]*$/;
+
+function isNotDecimalish(num) {
+ if (Number.isNaN(num)) {
+ return true;
+ }
+
+ return !decimalishMatcher.test(num);
+}
+
 // eslint-disable-next-line import/prefer-default-export
 export async function getOrders(page = 1, pageSize = 20) {
  const httpClient = getAuthenticatedHttpClient();
  const { username } = getAuthenticatedUser();
- const { COMMERCE_COORDINATOR_BASE_URL } = getConfig();
- const orderFetchingUrl = `${COMMERCE_COORDINATOR_BASE_URL}/orders/order_history/`;
+ const { ORDER_HISTORY_URL } = getConfig();
 
- // [START] TEMPORARY CODE for rollout testing/confirmation===========
- // Call ecommerce for order info including waffle flag
- let { data } = await httpClient.get(`${ECOMMERCE_API_BASE_URL}/orders/`, {
+ const { data } = await httpClient.get(`${ORDER_HISTORY_URL}`, {
  params: {
  username,
  page,
  page_size: pageSize,
  },
  });
 
- let callCC = false;
- if (data.count > 0) {
- callCC = data.results[0].enable_hoist_order_history;
- console.log('REV-2577 LOG: ecommerce data.results', data.results);
- }
- console.log('REV-2577 LOG: enable_hoist_order_history flag is: ', callCC);
-
- if (callCC) {
- console.log('REV-2577 LOG: about to call commerce-coordinator');
- const newData = await httpClient.get(orderFetchingUrl, {
- params: {
- username,
- page,
- page_size: pageSize,
- },
- });
- data = newData.data;
- console.log('REV-2577 LOG: CC response.data.results', data.results);
- }
- // [END] TEMPORARY CODE for rollout testing/confirmation===========
-
- // @TODO: after we've confirmed the above works in prod, we can replace with this:
- // let { data } = await httpClient.get(orderFetchingUrl, {
- // params: {
- // username,
- // page,
- // page_size: pageSize,
- // },
- // });
- // data = newData.data;
-
- const transformedResults = data.results.map(({
+ const transformedResults = data.map(({
  total_excl_tax, // eslint-disable-line camelcase
  lines,
  number,
@@ -76,7 +51,7 @@ export async function getOrders(page = 1, pageSize = 20) {
 
  return {
  datePlaced: date_placed, // eslint-disable-line camelcase
- total: total_excl_tax, // eslint-disable-line camelcase
+ total: isNotDecimalish(total_excl_tax) ? total_excl_tax : `$${total_excl_tax}`, // eslint-disable-line camelcase
  orderId: number,
  currency,
  lineItems,
@@ -86,10 +61,10 @@ export async function getOrders(page = 1, pageSize = 20) {
 
  return {
  count: data.count,
- pageCount: Math.ceil(data.count / pageSize),
- currentPage: page,
- next: data.next,
- previous: data.previous,
+ pageCount: 0, // Math.ceil(data.count / pageSize),
+ currentPage: 1,
+ next: false,
+ previous: false,
  orders: transformedResults,
  };
 }