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

---

Author:    Glenn R. Martin <[email protected]>
Date:      Wed Feb 7 05:30:57 2024 -0500

On branch 2u/replatform-to-master
You are currently cherry-picking commit bb939ff.

 Changes to be committed:
	modified:   .env.development
	modified:   .env.test
	modified:   src/order-history/OrderHistoryPage.jsx
	modified:   src/order-history/service.js

.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,55 +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;
-  }
-
-  if (callCC) {
-    // REV-2577: enable_hoist_order_history flag is on, about to call commerce-coordinator
-    const newData = await httpClient.get(orderFetchingUrl, {
-      params: {
-        username,
-        page,
-        page_size: pageSize,
-      },
-    });
-    data = newData.data;
-  }
-  // [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,
@@ -73,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,
@@ -83,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,
   };
 }