refactor: sortVariationsByLabel logic when not numbers and redability

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+### Changed
+
+- Fully refactor of `sortVariationsByLabel` property
+
 ## [3.176.1] - 2024-11-08
 
 ## [3.176.0] - 2024-11-06

react/components/SKUSelector/components/SKUSelector.tsx

@@ -46,6 +46,7 @@ function getShowValueForVariation(
   )
 }
 
+
 interface Props {
   seeMoreLabel: string
   maxItems: number
@@ -84,6 +85,18 @@ function isSkuAvailable(item?: SelectorProductItem) {
   return seller.commertialOffer?.AvailableQuantity > 0
 }
 
+function sortOptionsNumerically(options: DisplayOption[]) {
+  return options.slice().sort((a, b) => parseFloat(a.label) - parseFloat(b.label));
+}
+
+function sortOptionsAlphabetically(options: DisplayOption[]) {
+  return options.slice().sort((a, b) => {
+    if (a.label < b.label) return -1;
+    if (a.label > b.label) return 1;
+    return 0;
+  });
+}
+
 const showItemAsAvailable = ({
   possibleItems,
   selectedVariations,
@@ -265,7 +278,7 @@ const variationNameToDisplayVariation =
   (variationName: string): DisplayVariation => {
     const name = variationName
     const { values, originalName } = variations[variationName]
-    const options = values
+    let options = values
       .map(
         parseOptionNameToDisplayOption({
           selectedVariations,
@@ -279,19 +292,20 @@ const variationNameToDisplayVariation =
         })
       )
       .filter(Boolean) as DisplayOption[]
+
 
     if (sortVariationsByLabel) {
-      const allNumbers = options.every(
-        (option: any) => !Number.isNaN(option.label)
+
+      const areAllNumbers = options.every(
+        (option: DisplayOption) => !isNaN(Number(option.label))
       )
 
-      options.sort((a: any, b: any) => {
-        if (allNumbers) {
-          return a.label - b.label
-        }
+      const sortedOptions = areAllNumbers
+      ? sortOptionsNumerically({...options})
+      : sortOptionsAlphabetically({...options});
+
+      options = {...sortedOptions}
 
-        return a.label < b.label ? -1 : a.label > b.label ? 1 : 0
-      })
     }
 
     return { name, originalName, options }