From d457357b184f7e72330e8745b165abec8dc0f4e7 Mon Sep 17 00:00:00 2001
From: Adam Stankiewicz <agstanki@gmail.com>
Date: Thu, 1 Feb 2024 12:28:47 -0500
Subject: [PATCH] fix: ensure subs plans are sorted alphabetically, when
 appropriate (#1165)

---
 src/components/subscriptions/data/utils.js    | 47 ++++++++++++-------
 .../subscriptions/tests/data/utils.test.js    | 31 ++++++++----
 2 files changed, 52 insertions(+), 26 deletions(-)

diff --git a/src/components/subscriptions/data/utils.js b/src/components/subscriptions/data/utils.js
index 77343f53c0..a387773647 100644
--- a/src/components/subscriptions/data/utils.js
+++ b/src/components/subscriptions/data/utils.js
@@ -34,24 +34,39 @@ export const getSubscriptionStatus = (subscription) => {
   return ACTIVE;
 };
 
-// Sort plans by statuses, active -> scheduled -> ended.
-export const sortSubscriptionsByStatus = (subscriptions) => subscriptions.slice().sort(
-  (sub1, sub2) => {
-    const orderByStatus = {
-      [ACTIVE]: 0,
-      [SCHEDULED]: 1,
-      [ENDED]: 2,
-    };
-    const sub1Status = getSubscriptionStatus(sub1);
-    const sub2Status = getSubscriptionStatus(sub2);
+/**
+ * Sort subscription plans by:
+ *   - Statuses (active -> scheduled -> ended)
+ *   - Plans within same status, sorted by expiration date (ascending)
+ *   - Plans within same status and expiration date, sorted by title (ascending)
+ *
+ * @param {Array} subscriptions - List of subscription plans.
+ *
+ * @returns Ordered list of subscription plans.
+ */
+export const sortSubscriptionsByStatus = (subscriptions) => {
+  const statusOrder = {
+    [ACTIVE]: 0,
+    [SCHEDULED]: 1,
+    [ENDED]: 2,
+  };
+  return subscriptions.slice().sort(
+    (sub1, sub2) => {
+      const sub1Status = getSubscriptionStatus(sub1);
+      const sub2Status = getSubscriptionStatus(sub2);
+
+      if (statusOrder[sub1Status] !== statusOrder[sub2Status]) {
+        return statusOrder[sub1Status] - statusOrder[sub2Status];
+      }
 
-    if (sub1Status === sub2Status) {
-      return dayjs(sub1.startDate) - dayjs(sub2.startDate);
-    }
+      if (sub1.expirationDate !== sub2.expirationDate) {
+        return sub1.expirationDate.localeCompare(sub2.expirationDate);
+      }
 
-    return orderByStatus[sub1Status] - orderByStatus[sub2Status];
-  },
-);
+      return sub1.title.localeCompare(sub2.title);
+    },
+  );
+};
 
 export const transformFiltersForRequest = (filters) => {
   const nameMappings = {
diff --git a/src/components/subscriptions/tests/data/utils.test.js b/src/components/subscriptions/tests/data/utils.test.js
index 27a23a9061..0b8d8481eb 100644
--- a/src/components/subscriptions/tests/data/utils.test.js
+++ b/src/components/subscriptions/tests/data/utils.test.js
@@ -4,16 +4,19 @@ import { sortSubscriptionsByStatus, getSubscriptionStatus } from '../../data/uti
 
 describe('utils', () => {
   const scheduledSub = {
-    startDate: dayjs().add(1, 'days'),
-    expirationDate: dayjs().add(10, 'days'),
+    startDate: dayjs().add(1, 'days').toISOString(),
+    expirationDate: dayjs().add(10, 'days').toISOString(),
+    title: 'Test Scheduled Plan',
   };
   const activeSub = {
-    startDate: dayjs().subtract(1, 'days'),
-    expirationDate: dayjs().add(10, 'days'),
+    startDate: dayjs().subtract(1, 'days').toISOString(),
+    expirationDate: dayjs().add(10, 'days').toISOString(),
+    title: 'Test Active Plan',
   };
   const expiredSub = {
-    startDate: dayjs().subtract(10, 'days'),
-    expirationDate: dayjs().subtract(1, 'days'),
+    startDate: dayjs().subtract(10, 'days').toISOString(),
+    expirationDate: dayjs().subtract(1, 'days').toISOString(),
+    title: 'Test Expired Plan',
   };
 
   describe('getSubscriptionStatus', () => {
@@ -28,18 +31,26 @@ describe('utils', () => {
     it('should sort subscriptions by status', () => {
       const initialOrder = [expiredSub, activeSub, scheduledSub];
       const expectedOrder = [activeSub, scheduledSub, expiredSub];
-
       expect(sortSubscriptionsByStatus(initialOrder)).toEqual(expectedOrder);
     });
 
-    it('should sort subscriptions by start date after status', () => {
+    it('should sort subscriptions by expiration date after status', () => {
       const activeSub2 = {
-        startDate: dayjs().subtract(2, 'days'),
-        expirationDate: dayjs().add(10, 'days'),
+        ...activeSub,
+        expirationDate: dayjs().add(1, 'days').toISOString(), // expires sooner than other active subs plan
       };
       const initialOrder = [expiredSub, activeSub, scheduledSub, activeSub2];
       const expectedOrder = [activeSub2, activeSub, scheduledSub, expiredSub];
+      expect(sortSubscriptionsByStatus(initialOrder)).toEqual(expectedOrder);
+    });
 
+    it('should sort subscriptions by plan title after status and date', () => {
+      const activeSub2 = {
+        ...activeSub,
+        title: 'Another Active Plan', // title alphabetically comes before other active subs plan title
+      };
+      const initialOrder = [expiredSub, activeSub, scheduledSub, activeSub2];
+      const expectedOrder = [activeSub2, activeSub, scheduledSub, expiredSub];
       expect(sortSubscriptionsByStatus(initialOrder)).toEqual(expectedOrder);
     });
   });