From 7f83b303260284fded8b3682d49535be9df887a3 Mon Sep 17 00:00:00 2001
From: Abdullah Waheed <abdullah.waheed@arbisoft.com>
Date: Thu, 16 Jun 2022 15:49:07 +0500
Subject: [PATCH 1/6] refactor: changed derecated table component to datatable

---
 src/order-history/OrderHistoryPage.jsx | 24 ++++++++++++------------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/order-history/OrderHistoryPage.jsx b/src/order-history/OrderHistoryPage.jsx
index 0415e781..a4af8776 100644
--- a/src/order-history/OrderHistoryPage.jsx
+++ b/src/order-history/OrderHistoryPage.jsx
@@ -10,7 +10,7 @@ import {
   FormattedDate,
   FormattedNumber,
 } from '@edx/frontend-platform/i18n';
-import { Table, Hyperlink, Pagination } from '@edx/paragon';
+import { DataTable, Hyperlink, Pagination } from '@edx/paragon';
 import MediaQuery from 'react-responsive';
 
 import messages from './OrderHistoryPage.messages';
@@ -91,29 +91,29 @@ class OrderHistoryPage extends React.Component {
 
   renderOrdersTable() {
     return (
-      <Table
+      <DataTable
         className="order-history table-bordered"
         data={this.getTableData()}
         columns={[
           {
-            label: this.props.intl.formatMessage(messages['ecommerce.order.history.table.column.items']),
-            key: 'description',
+            Header: this.props.intl.formatMessage(messages['ecommerce.order.history.table.column.items']),
+            accessor: 'description',
           },
           {
-            label: this.props.intl.formatMessage(messages['ecommerce.order.history.table.column.date.placed']),
-            key: 'datePlaced',
+            Header: this.props.intl.formatMessage(messages['ecommerce.order.history.table.column.date.placed']),
+            accessor: 'datePlaced',
           },
           {
-            label: this.props.intl.formatMessage(messages['ecommerce.order.history.table.column.total.cost']),
-            key: 'total',
+            Header: this.props.intl.formatMessage(messages['ecommerce.order.history.table.column.total.cost']),
+            accessor: 'total',
           },
           {
-            label: this.props.intl.formatMessage(messages['ecommerce.order.history.table.column.order.number']),
-            key: 'orderId',
+            Header: this.props.intl.formatMessage(messages['ecommerce.order.history.table.column.order.number']),
+            accessor: 'orderId',
           },
           {
-            label: this.props.intl.formatMessage(messages['ecommerce.order.history.table.column.order.details']),
-            key: 'receiptUrl',
+            Header: this.props.intl.formatMessage(messages['ecommerce.order.history.table.column.order.details']),
+            accessor: 'receiptUrl',
           },
         ]}
       />

From 78479ff1a231150bed5332f6f67afad83a3f0e10 Mon Sep 17 00:00:00 2001
From: Abdullah Waheed <abdullah.waheed@arbisoft.com>
Date: Thu, 16 Jun 2022 15:55:34 +0500
Subject: [PATCH 2/6] refactor: fixed warning of missing props

---
 src/order-history/OrderHistoryPage.jsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/order-history/OrderHistoryPage.jsx b/src/order-history/OrderHistoryPage.jsx
index a4af8776..3058bff3 100644
--- a/src/order-history/OrderHistoryPage.jsx
+++ b/src/order-history/OrderHistoryPage.jsx
@@ -94,6 +94,7 @@ class OrderHistoryPage extends React.Component {
       <DataTable
         className="order-history table-bordered"
         data={this.getTableData()}
+        itemCount={this.props.orders.length}
         columns={[
           {
             Header: this.props.intl.formatMessage(messages['ecommerce.order.history.table.column.items']),

From cbaf32a01e562efb1abbb55f49844711503ecfd5 Mon Sep 17 00:00:00 2001
From: Abdullah Waheed <abdullah.waheed@arbisoft.com>
Date: Wed, 29 Jun 2022 15:22:19 +0500
Subject: [PATCH 3/6] refactor: changed DataTable to DataTable.Table as
 suggested in code review

---
 src/order-history/OrderHistoryPage.jsx | 21 ++++++++++-----------
 1 file changed, 10 insertions(+), 11 deletions(-)

diff --git a/src/order-history/OrderHistoryPage.jsx b/src/order-history/OrderHistoryPage.jsx
index 3058bff3..94a95283 100644
--- a/src/order-history/OrderHistoryPage.jsx
+++ b/src/order-history/OrderHistoryPage.jsx
@@ -91,30 +91,29 @@ class OrderHistoryPage extends React.Component {
 
   renderOrdersTable() {
     return (
-      <DataTable
+      <DataTable.Table
         className="order-history table-bordered"
         data={this.getTableData()}
-        itemCount={this.props.orders.length}
         columns={[
           {
-            Header: this.props.intl.formatMessage(messages['ecommerce.order.history.table.column.items']),
-            accessor: 'description',
+            label: this.props.intl.formatMessage(messages['ecommerce.order.history.table.column.items']),
+            key: 'description',
           },
           {
-            Header: this.props.intl.formatMessage(messages['ecommerce.order.history.table.column.date.placed']),
-            accessor: 'datePlaced',
+            label: this.props.intl.formatMessage(messages['ecommerce.order.history.table.column.date.placed']),
+            key: 'datePlaced',
           },
           {
-            Header: this.props.intl.formatMessage(messages['ecommerce.order.history.table.column.total.cost']),
-            accessor: 'total',
+            label: this.props.intl.formatMessage(messages['ecommerce.order.history.table.column.total.cost']),
+            key: 'total',
           },
           {
-            Header: this.props.intl.formatMessage(messages['ecommerce.order.history.table.column.order.number']),
+            label: this.props.intl.formatMessage(messages['ecommerce.order.history.table.column.order.number']),
             accessor: 'orderId',
           },
           {
-            Header: this.props.intl.formatMessage(messages['ecommerce.order.history.table.column.order.details']),
-            accessor: 'receiptUrl',
+            label: this.props.intl.formatMessage(messages['ecommerce.order.history.table.column.order.details']),
+            key: 'receiptUrl',
           },
         ]}
       />

From 12e96b27447e8732bc8e2c103d684765b249c68f Mon Sep 17 00:00:00 2001
From: Abdullah Waheed <abdullah.waheed@arbisoft.com>
Date: Wed, 13 Jul 2022 12:51:24 +0500
Subject: [PATCH 4/6] refactor: used DataTable.Table directly to remove count

---
 src/order-history/OrderHistoryPage.jsx | 27 +++++++++++++++-----------
 1 file changed, 16 insertions(+), 11 deletions(-)

diff --git a/src/order-history/OrderHistoryPage.jsx b/src/order-history/OrderHistoryPage.jsx
index 94a95283..eeb81a72 100644
--- a/src/order-history/OrderHistoryPage.jsx
+++ b/src/order-history/OrderHistoryPage.jsx
@@ -91,32 +91,35 @@ class OrderHistoryPage extends React.Component {
 
   renderOrdersTable() {
     return (
-      <DataTable.Table
+      <DataTable
         className="order-history table-bordered"
         data={this.getTableData()}
+        itemCount={this.props.count}
         columns={[
           {
-            label: this.props.intl.formatMessage(messages['ecommerce.order.history.table.column.items']),
-            key: 'description',
+            Header: this.props.intl.formatMessage(messages['ecommerce.order.history.table.column.items']),
+            accessor: 'description',
           },
           {
-            label: this.props.intl.formatMessage(messages['ecommerce.order.history.table.column.date.placed']),
-            key: 'datePlaced',
+            Header: this.props.intl.formatMessage(messages['ecommerce.order.history.table.column.date.placed']),
+            accessor: 'datePlaced',
           },
           {
-            label: this.props.intl.formatMessage(messages['ecommerce.order.history.table.column.total.cost']),
-            key: 'total',
+            Header: this.props.intl.formatMessage(messages['ecommerce.order.history.table.column.total.cost']),
+            accessor: 'total',
           },
           {
-            label: this.props.intl.formatMessage(messages['ecommerce.order.history.table.column.order.number']),
+            Header: this.props.intl.formatMessage(messages['ecommerce.order.history.table.column.order.number']),
             accessor: 'orderId',
           },
           {
-            label: this.props.intl.formatMessage(messages['ecommerce.order.history.table.column.order.details']),
-            key: 'receiptUrl',
+            Header: this.props.intl.formatMessage(messages['ecommerce.order.history.table.column.order.details']),
+            accessor: 'receiptUrl',
           },
         ]}
-      />
+      >
+        <DataTable.Table />
+      </DataTable>
     );
   }
 
@@ -222,6 +225,7 @@ OrderHistoryPage.propTypes = {
     })),
   })),
   pageCount: PropTypes.number,
+  count: PropTypes.number,
   currentPage: PropTypes.number,
   loading: PropTypes.bool,
   loadingError: PropTypes.string,
@@ -233,6 +237,7 @@ OrderHistoryPage.defaultProps = {
   loadingError: null,
   loading: false,
   pageCount: 0,
+  count: 0,
   currentPage: null,
 };
 

From 39bbe1597e5edffd3887f3c54ceb6ff6822e2e63 Mon Sep 17 00:00:00 2001
From: Abdullah Waheed <abdullah.waheed@arbisoft.com>
Date: Fri, 3 Feb 2023 20:37:25 +0500
Subject: [PATCH 5/6] fix: fixed pagination styling issue

---
 src/order-history/OrderHistoryPage.jsx | 2 +-
 src/order-history/_style.scss          | 5 ++++-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/order-history/OrderHistoryPage.jsx b/src/order-history/OrderHistoryPage.jsx
index 20836b3d..fb7762fc 100644
--- a/src/order-history/OrderHistoryPage.jsx
+++ b/src/order-history/OrderHistoryPage.jsx
@@ -70,6 +70,7 @@ class OrderHistoryPage extends React.Component {
     return (
       <Pagination
         paginationLabel="pagination navigation"
+        className="pagination-margin"
         pageCount={pageCount}
         currentPage={currentPage}
         onPageSelect={this.handlePageSelect}
@@ -92,7 +93,6 @@ class OrderHistoryPage extends React.Component {
   renderOrdersTable() {
     return (
       <DataTable
-        className="order-history table-bordered"
         data={this.getTableData()}
         itemCount={this.props.count}
         columns={[
diff --git a/src/order-history/_style.scss b/src/order-history/_style.scss
index 83879f2c..353574d5 100644
--- a/src/order-history/_style.scss
+++ b/src/order-history/_style.scss
@@ -1,5 +1,5 @@
 .page__order-history {
-  table.order-history {
+  table {
     thead th,
     tbody td {
       width: 4em;
@@ -11,3 +11,6 @@
     }
   }
 }
+.pagination-margin {
+  margin-top: 1rem;
+}

From 40b8d4246fcc683c3621481b9d0b332507d83727 Mon Sep 17 00:00:00 2001
From: Abdullah Waheed <abdullah.waheed@arbisoft.com>
Date: Fri, 3 Feb 2023 20:40:41 +0500
Subject: [PATCH 6/6] fix: fixed snapshot test

---
 src/order-history/__snapshots__/OrderHistoryPage.test.jsx.snap | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/order-history/__snapshots__/OrderHistoryPage.test.jsx.snap b/src/order-history/__snapshots__/OrderHistoryPage.test.jsx.snap
index 72dc1816..275ec55a 100644
--- a/src/order-history/__snapshots__/OrderHistoryPage.test.jsx.snap
+++ b/src/order-history/__snapshots__/OrderHistoryPage.test.jsx.snap
@@ -9,7 +9,7 @@ exports[`<OrderHistoryPage /> Renders correctly in various states renders orders
   </h1>
   <nav
     aria-label="pagination navigation"
-    className="pagination-default"
+    className="pagination-margin pagination-default"
   >
     <div
       aria-atomic={true}