From 4fb9b69c95cb772deb9c9427828f10c7a3863641 Mon Sep 17 00:00:00 2001
From: matthew collins <lewis52ravens@gmail.com>
Date: Thu, 6 May 2021 10:07:40 -0400
Subject: [PATCH] Added a sort to the options before displaying

---
 components/cart/CartItem/CartItem.tsx | 37 ++++++++++++++++++++-------
 1 file changed, 28 insertions(+), 9 deletions(-)

diff --git a/components/cart/CartItem/CartItem.tsx b/components/cart/CartItem/CartItem.tsx
index e6820d32c..3d0240f92 100644
--- a/components/cart/CartItem/CartItem.tsx
+++ b/components/cart/CartItem/CartItem.tsx
@@ -116,15 +116,34 @@ const CartItem = ({
         </Link>
         {options && options.length > 0 ? (
           <div className="">
-            {options.map((option: ItemOption, i: number) => (
-              <span
-                key={`${item.id}-${option.name}`}
-                className="text-sm font-semibold text-accents-7"
-              >
-                {option.value}
-                {i === options.length - 1 ? '' : ', '}
-              </span>
-            ))}
+            {/** attempt to sort the options array alphabetically by option name, that way options will always appear in the same order */}
+            {options
+              .sort((first: any, second: any) => {
+                if (first.name && second.name) {
+                  return first.name < second.name
+                    ? -1
+                    : first.name > second.name
+                    ? 1
+                    : 0
+                } else {
+                  if (JSON.stringify(first) < JSON.stringify(second)) {
+                    return -1
+                  } else if (JSON.stringify(first) > JSON.stringify(second)) {
+                    return 1
+                  } else {
+                    return 0
+                  }
+                }
+              })
+              .map((option: ItemOption, i: number) => (
+                <span
+                  key={`${item.id}-${option.name}`}
+                  className="text-sm font-semibold text-accents-7"
+                >
+                  {option.value}
+                  {i === options.length - 1 ? '' : ', '}
+                </span>
+              ))}
           </div>
         ) : null}
         <div className="flex items-center mt-3">