From b4b3d39feed9c7198929fe16a98ea3dbe7f9cb88 Mon Sep 17 00:00:00 2001
From: pmakode-akamai <pmakode@akamai.com>
Date: Mon, 16 Sep 2024 18:15:18 +0530
Subject: [PATCH 1/8] Add allow sorting by amount on billing activity table

---
 .../BillingActivityPanel.tsx                  | 189 +++++++++---------
 1 file changed, 96 insertions(+), 93 deletions(-)

diff --git a/packages/manager/src/features/Billing/BillingPanels/BillingActivityPanel/BillingActivityPanel.tsx b/packages/manager/src/features/Billing/BillingPanels/BillingActivityPanel/BillingActivityPanel.tsx
index de4a54993dc..e09e09bee98 100644
--- a/packages/manager/src/features/Billing/BillingPanels/BillingActivityPanel/BillingActivityPanel.tsx
+++ b/packages/manager/src/features/Billing/BillingPanels/BillingActivityPanel/BillingActivityPanel.tsx
@@ -11,15 +11,16 @@ import { Currency } from 'src/components/Currency';
 import { DateTimeDisplay } from 'src/components/DateTimeDisplay';
 import { InlineMenuAction } from 'src/components/InlineMenuAction/InlineMenuAction';
 import { Link } from 'src/components/Link';
-import OrderBy from 'src/components/OrderBy';
-import Paginate from 'src/components/Paginate';
 import { PaginationFooter } from 'src/components/PaginationFooter/PaginationFooter';
 import { Table } from 'src/components/Table';
 import { TableBody } from 'src/components/TableBody';
 import { TableCell } from 'src/components/TableCell';
-import { TableContentWrapper } from 'src/components/TableContentWrapper/TableContentWrapper';
 import { TableHead } from 'src/components/TableHead';
 import { TableRow } from 'src/components/TableRow';
+import { TableRowEmpty } from 'src/components/TableRowEmpty/TableRowEmpty';
+import { TableRowError } from 'src/components/TableRowError/TableRowError';
+import { TableRowLoading } from 'src/components/TableRowLoading/TableRowLoading';
+import { TableSortCell } from 'src/components/TableSortCell';
 import { TextTooltip } from 'src/components/TextTooltip';
 import { Typography } from 'src/components/Typography';
 import { ISO_DATETIME_NO_TZ_FORMAT } from 'src/constants';
@@ -29,6 +30,8 @@ import {
   printPayment,
 } from 'src/features/Billing/PdfGenerator/PdfGenerator';
 import { useFlags } from 'src/hooks/useFlags';
+import { useOrder } from 'src/hooks/useOrder';
+import { usePagination } from 'src/hooks/usePagination';
 import { useSet } from 'src/hooks/useSet';
 import { useAccount } from 'src/queries/account/account';
 import {
@@ -168,6 +171,7 @@ const AkamaiBillingInvoiceText = (
 // =============================================================================
 // <BillingActivityPanel />
 // =============================================================================
+
 export interface Props {
   accountActiveSince?: string;
 }
@@ -177,6 +181,10 @@ export const BillingActivityPanel = React.memo((props: Props) => {
   const { data: profile } = useProfile();
   const { data: account } = useAccount();
   const { data: regions } = useRegionsQuery();
+
+  const pagination = usePagination(1, 'billing-activity');
+  const { handleOrderChange, order, orderBy } = useOrder();
+
   const isAkamaiCustomer = account?.billing_source === 'akamai';
   const { classes } = useStyles();
   const flags = useFlags();
@@ -302,6 +310,61 @@ export const BillingActivityPanel = React.memo((props: Props) => {
     );
   }, [selectedTransactionType, combinedData]);
 
+  const data =
+    selectedTransactionType.value === 'all' ? combinedData : filteredData;
+
+  const getOrderedPaginatedData = (data: ActivityFeedItem[]) => {
+    const orderedData = data.sort((a, b) => {
+      return order === 'asc' ? a.total - b.total : b.total - a.total;
+    });
+
+    const start = (pagination.page - 1) * pagination.pageSize;
+    const end = start + pagination.pageSize;
+
+    return orderedData.slice(start, end);
+  };
+
+  const orderedPaginatedData = getOrderedPaginatedData(data);
+
+  const renderTableContent = () => {
+    if (accountPaymentsLoading || accountInvoicesLoading) {
+      return <TableRowLoading columns={4} rows={1} />;
+    }
+    if (accountPaymentsError || accountInvoicesError) {
+      return (
+        <TableRowError
+          colSpan={5}
+          message={'There was an error retrieving your billing activity.'}
+        />
+      );
+    }
+    if (orderedPaginatedData.length == 0) {
+      return (
+        <TableRowEmpty
+          colSpan={5}
+          message="No Billing & Payment History found."
+        />
+      );
+    }
+    if (orderedPaginatedData.length > 0) {
+      return orderedPaginatedData.map((thisItem) => (
+        <ActivityFeedItem
+          downloadPDF={
+            thisItem.type === 'invoice'
+              ? downloadInvoicePDF
+              : downloadPaymentPDF
+          }
+          hasError={pdfErrors.has(`${thisItem.type}-${thisItem.id}`)}
+          isLoading={pdfLoading.has(`${thisItem.type}-${thisItem.id}`)}
+          key={`${thisItem.type}-${thisItem.id}`}
+          {...thisItem}
+        />
+      ));
+    }
+
+    return null;
+  };
+
   return (
     <Grid data-qa-billing-activity-panel xs={12}>
       <Paper variant="outlined">
@@ -368,96 +431,36 @@ export const BillingActivityPanel = React.memo((props: Props) => {
             />
           </div>
         </StyledBillingAndPaymentHistoryHeader>
-        <OrderBy
-          data={
-            selectedTransactionType.value === 'all'
-              ? combinedData
-              : filteredData
-          }
-          order={'desc'}
-          orderBy={'date'}
-        >
-          {({ data: orderedData }) => (
-            <Paginate data={orderedData} pageSize={25} shouldScroll={false}>
-              {({
-                count,
-                data: paginatedAndOrderedData,
-                handlePageChange,
-                handlePageSizeChange,
-                page,
-                pageSize,
-              }) => (
-                <>
-                  <Table aria-label="List of Invoices and Payments">
-                    <TableHead>
-                      <TableRow>
-                        <TableCell className={classes.descriptionColumn}>
-                          Description
-                        </TableCell>
-                        <TableCell className={classes.dateColumn}>
-                          Date
-                        </TableCell>
-                        <TableCell className={classes.totalColumn}>
-                          Amount
-                        </TableCell>
-                        <TableCell className={classes.pdfDownloadColumn} />
-                      </TableRow>
-                    </TableHead>
-                    <TableBody>
-                      <TableContentWrapper
-                        error={
-                          accountPaymentsError || accountInvoicesError
-                            ? [
-                                {
-                                  reason:
-                                    'There was an error retrieving your billing activity.',
-                                },
-                              ]
-                            : undefined
-                        }
-                        loading={
-                          accountPaymentsLoading || accountInvoicesLoading
-                        }
-                        loadingProps={{
-                          columns: 4,
-                        }}
-                        length={paginatedAndOrderedData.length}
-                      >
-                        {paginatedAndOrderedData.map((thisItem) => {
-                          return (
-                            <ActivityFeedItem
-                              downloadPDF={
-                                thisItem.type === 'invoice'
-                                  ? downloadInvoicePDF
-                                  : downloadPaymentPDF
-                              }
-                              hasError={pdfErrors.has(
-                                `${thisItem.type}-${thisItem.id}`
-                              )}
-                              isLoading={pdfLoading.has(
-                                `${thisItem.type}-${thisItem.id}`
-                              )}
-                              key={`${thisItem.type}-${thisItem.id}`}
-                              {...thisItem}
-                            />
-                          );
-                        })}
-                      </TableContentWrapper>
-                    </TableBody>
-                  </Table>
-                  <PaginationFooter
-                    count={count}
-                    eventCategory="Billing Activity Table"
-                    handlePageChange={handlePageChange}
-                    handleSizeChange={handlePageSizeChange}
-                    page={page}
-                    pageSize={pageSize}
-                  />
-                </>
-              )}
-            </Paginate>
-          )}
-        </OrderBy>
+        <Table aria-label="List of Invoices and Payments">
+          <TableHead>
+            <TableRow>
+              <TableCell className={classes.descriptionColumn}>
+                Description
+              </TableCell>
+              <TableCell className={classes.dateColumn}>Date</TableCell>
+              <TableSortCell
+                active={orderBy === 'total'}
+                className={classes.totalColumn}
+                direction={order}
+                handleClick={handleOrderChange}
+                label="total"
+              >
+                Amount
+              </TableSortCell>
+
+              <TableCell className={classes.pdfDownloadColumn} />
+            </TableRow>
+          </TableHead>
+          <TableBody>{renderTableContent()}</TableBody>
+        </Table>
+        <PaginationFooter
+          count={data.length}
+          eventCategory="Billing Activity Table"
+          handlePageChange={pagination.handlePageChange}
+          handleSizeChange={pagination.handlePageSizeChange}
+          page={pagination.page}
+          pageSize={pagination.pageSize}
+        />
       </Paper>
     </Grid>
   );

From 3e8e66d5de563b51f18e4a69690d2ad0fbd30880 Mon Sep 17 00:00:00 2001
From: pmakode-akamai <pmakode@akamai.com>
Date: Mon, 16 Sep 2024 18:43:57 +0530
Subject: [PATCH 2/8] Added changeset: Allow sorting by amount on billing
 activity table

---
 packages/manager/.changeset/pr-10941-added-1726492437722.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 packages/manager/.changeset/pr-10941-added-1726492437722.md

diff --git a/packages/manager/.changeset/pr-10941-added-1726492437722.md b/packages/manager/.changeset/pr-10941-added-1726492437722.md
new file mode 100644
index 00000000000..0260524daa2
--- /dev/null
+++ b/packages/manager/.changeset/pr-10941-added-1726492437722.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Added
+---
+
+Allow sorting by amount on billing activity table ([#10941](https://github.com/linode/manager/pull/10941))

From ada00ebeef89942ac1cfc5a19b917b8760277f7c Mon Sep 17 00:00:00 2001
From: pmakode-akamai <pmakode@akamai.com>
Date: Mon, 16 Sep 2024 19:27:12 +0530
Subject: [PATCH 3/8] Update getOrderedPaginatedData function

---
 .../BillingActivityPanel/BillingActivityPanel.tsx           | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/manager/src/features/Billing/BillingPanels/BillingActivityPanel/BillingActivityPanel.tsx b/packages/manager/src/features/Billing/BillingPanels/BillingActivityPanel/BillingActivityPanel.tsx
index e09e09bee98..6d53c6b66ac 100644
--- a/packages/manager/src/features/Billing/BillingPanels/BillingActivityPanel/BillingActivityPanel.tsx
+++ b/packages/manager/src/features/Billing/BillingPanels/BillingActivityPanel/BillingActivityPanel.tsx
@@ -315,7 +315,11 @@ export const BillingActivityPanel = React.memo((props: Props) => {
 
   const getOrderedPaginatedData = (data: ActivityFeedItem[]) => {
     const orderedData = data.sort((a, b) => {
-      return order === 'asc' ? a.total - b.total : b.total - a.total;
+      if (orderBy === 'total') {
+        return order === 'asc' ? a.total - b.total : b.total - a.total;
+      }
+      // If no valid 'orderBy' is provided, return the data as is.
+      return 0;
     });
 
     const start = (pagination.page - 1) * pagination.pageSize;

From dfa6fd327d0154d272c628405cc24dff1d835df4 Mon Sep 17 00:00:00 2001
From: pmakode-akamai <pmakode@akamai.com>
Date: Mon, 16 Sep 2024 22:05:39 +0530
Subject: [PATCH 4/8] refactor: use useMemo to optimize orderedPaginatedData

---
 .../BillingActivityPanel/BillingActivityPanel.tsx           | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/packages/manager/src/features/Billing/BillingPanels/BillingActivityPanel/BillingActivityPanel.tsx b/packages/manager/src/features/Billing/BillingPanels/BillingActivityPanel/BillingActivityPanel.tsx
index 6d53c6b66ac..25a529043f9 100644
--- a/packages/manager/src/features/Billing/BillingPanels/BillingActivityPanel/BillingActivityPanel.tsx
+++ b/packages/manager/src/features/Billing/BillingPanels/BillingActivityPanel/BillingActivityPanel.tsx
@@ -313,7 +313,7 @@ export const BillingActivityPanel = React.memo((props: Props) => {
   const data =
     selectedTransactionType.value === 'all' ? combinedData : filteredData;
 
-  const getOrderedPaginatedData = (data: ActivityFeedItem[]) => {
+  const orderedPaginatedData = React.useMemo(() => {
     const orderedData = data.sort((a, b) => {
       if (orderBy === 'total') {
         return order === 'asc' ? a.total - b.total : b.total - a.total;
@@ -326,9 +326,7 @@ export const BillingActivityPanel = React.memo((props: Props) => {
     const end = start + pagination.pageSize;
 
     return orderedData.slice(start, end);
-  };
-
-  const orderedPaginatedData = getOrderedPaginatedData(data);
+  }, [data, orderBy, order, pagination.page, pagination.pageSize]);
 
   const renderTableContent = () => {
     if (accountPaymentsLoading || accountInvoicesLoading) {

From 61549bf657f9e6e2ece4bac060568f61bd0007d2 Mon Sep 17 00:00:00 2001
From: pmakode-akamai <pmakode@akamai.com>
Date: Tue, 17 Sep 2024 00:11:52 +0530
Subject: [PATCH 5/8] Fix: Change colSpan 5 to 4

---
 .../BillingActivityPanel/BillingActivityPanel.tsx             | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/manager/src/features/Billing/BillingPanels/BillingActivityPanel/BillingActivityPanel.tsx b/packages/manager/src/features/Billing/BillingPanels/BillingActivityPanel/BillingActivityPanel.tsx
index 25a529043f9..b5bc5ba6e1a 100644
--- a/packages/manager/src/features/Billing/BillingPanels/BillingActivityPanel/BillingActivityPanel.tsx
+++ b/packages/manager/src/features/Billing/BillingPanels/BillingActivityPanel/BillingActivityPanel.tsx
@@ -335,7 +335,7 @@ export const BillingActivityPanel = React.memo((props: Props) => {
     if (accountPaymentsError || accountInvoicesError) {
       return (
         <TableRowError
-          colSpan={5}
+          colSpan={4}
           message={'There was an error retrieving your billing activity.'}
         />
       );
@@ -343,7 +343,7 @@ export const BillingActivityPanel = React.memo((props: Props) => {
     if (orderedPaginatedData.length == 0) {
       return (
         <TableRowEmpty
-          colSpan={5}
+          colSpan={4}
           message="No Billing & Payment History found."
         />
       );

From e1806f4decdbe3d62dc5faed0463351ecb6b443d Mon Sep 17 00:00:00 2001
From: pmakode-akamai <pmakode@akamai.com>
Date: Tue, 17 Sep 2024 00:36:55 +0530
Subject: [PATCH 6/8] Few fixes...

---
 .../BillingActivityPanel/BillingActivityPanel.tsx    | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/packages/manager/src/features/Billing/BillingPanels/BillingActivityPanel/BillingActivityPanel.tsx b/packages/manager/src/features/Billing/BillingPanels/BillingActivityPanel/BillingActivityPanel.tsx
index b5bc5ba6e1a..90b75673a7e 100644
--- a/packages/manager/src/features/Billing/BillingPanels/BillingActivityPanel/BillingActivityPanel.tsx
+++ b/packages/manager/src/features/Billing/BillingPanels/BillingActivityPanel/BillingActivityPanel.tsx
@@ -172,6 +172,8 @@ const AkamaiBillingInvoiceText = (
 // <BillingActivityPanel />
 // =============================================================================
 
+const NUM_COLS = 4;
+
 export interface Props {
   accountActiveSince?: string;
 }
@@ -330,20 +332,20 @@ export const BillingActivityPanel = React.memo((props: Props) => {
 
   const renderTableContent = () => {
     if (accountPaymentsLoading || accountInvoicesLoading) {
-      return <TableRowLoading columns={4} rows={1} />;
+      return <TableRowLoading columns={NUM_COLS} rows={1} />;
     }
     if (accountPaymentsError || accountInvoicesError) {
       return (
         <TableRowError
-          colSpan={4}
-          message={'There was an error retrieving your billing activity.'}
+          colSpan={NUM_COLS}
+          message="There was an error retrieving your billing activity."
         />
       );
     }
-    if (orderedPaginatedData.length == 0) {
+    if (orderedPaginatedData.length === 0) {
       return (
         <TableRowEmpty
-          colSpan={4}
+          colSpan={NUM_COLS}
           message="No Billing & Payment History found."
         />
       );

From 22d90e5fbb2eeefa843f62b805a29855c7c3e273 Mon Sep 17 00:00:00 2001
From: pmakode-akamai <pmakode@akamai.com>
Date: Wed, 18 Sep 2024 13:37:39 +0530
Subject: [PATCH 7/8] Add default case to order data by date in descending
 order

---
 .../BillingActivityPanel/BillingActivityPanel.tsx             | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/manager/src/features/Billing/BillingPanels/BillingActivityPanel/BillingActivityPanel.tsx b/packages/manager/src/features/Billing/BillingPanels/BillingActivityPanel/BillingActivityPanel.tsx
index 90b75673a7e..d3500b5d6e0 100644
--- a/packages/manager/src/features/Billing/BillingPanels/BillingActivityPanel/BillingActivityPanel.tsx
+++ b/packages/manager/src/features/Billing/BillingPanels/BillingActivityPanel/BillingActivityPanel.tsx
@@ -320,8 +320,8 @@ export const BillingActivityPanel = React.memo((props: Props) => {
       if (orderBy === 'total') {
         return order === 'asc' ? a.total - b.total : b.total - a.total;
       }
-      // If no valid 'orderBy' is provided, return the data as is.
-      return 0;
+      // Default: If no valid 'orderBy' is provided, sort the data by date in descending order.
+      return new Date(b.date).getTime() - new Date(a.date).getTime();
     });
 
     const start = (pagination.page - 1) * pagination.pageSize;

From 0b33cc16944c97d9837856c9893ba146c710fa5a Mon Sep 17 00:00:00 2001
From: pmakode-akamai <pmakode@akamai.com>
Date: Thu, 3 Oct 2024 13:17:23 +0530
Subject: [PATCH 8/8] Use createDisplayPage to paginate ordered data list

---
 .../BillingActivityPanel/BillingActivityPanel.tsx        | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/packages/manager/src/features/Billing/BillingPanels/BillingActivityPanel/BillingActivityPanel.tsx b/packages/manager/src/features/Billing/BillingPanels/BillingActivityPanel/BillingActivityPanel.tsx
index d3500b5d6e0..2ded859505b 100644
--- a/packages/manager/src/features/Billing/BillingPanels/BillingActivityPanel/BillingActivityPanel.tsx
+++ b/packages/manager/src/features/Billing/BillingPanels/BillingActivityPanel/BillingActivityPanel.tsx
@@ -11,6 +11,7 @@ import { Currency } from 'src/components/Currency';
 import { DateTimeDisplay } from 'src/components/DateTimeDisplay';
 import { InlineMenuAction } from 'src/components/InlineMenuAction/InlineMenuAction';
 import { Link } from 'src/components/Link';
+import { createDisplayPage } from 'src/components/Paginate';
 import { PaginationFooter } from 'src/components/PaginationFooter/PaginationFooter';
 import { Table } from 'src/components/Table';
 import { TableBody } from 'src/components/TableBody';
@@ -324,10 +325,12 @@ export const BillingActivityPanel = React.memo((props: Props) => {
       return new Date(b.date).getTime() - new Date(a.date).getTime();
     });
 
-    const start = (pagination.page - 1) * pagination.pageSize;
-    const end = start + pagination.pageSize;
+    const displayPage = createDisplayPage<ActivityFeedItem>(
+      pagination.page,
+      pagination.pageSize
+    );
 
-    return orderedData.slice(start, end);
+    return displayPage(orderedData);
   }, [data, orderBy, order, pagination.page, pagination.pageSize]);
 
   const renderTableContent = () => {