[SFS-2085] 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

@@ -84,6 +84,19 @@ function isSkuAvailable(item?: SelectorProductItem) {
   return seller.commertialOffer?.AvailableQuantity > 0
 }
 
+function sortOptionsNumerically(options: DisplayOption[]) {
+  return options.sort((a, b) => parseFloat(a.label) - parseFloat(b.label))
+}
+
+function sortOptionsAlphabetically(options: DisplayOption[]) {
+  return options.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,
@@ -281,17 +294,15 @@ const variationNameToDisplayVariation =
       .filter(Boolean) as DisplayOption[]
 
     if (sortVariationsByLabel) {
-      const allNumbers = options.every(
-        (option: any) => !Number.isNaN(option.label)
+      const areAllNumbers = options.every(
+        (option: DisplayOption) => !Number.isNaN(Number(option.label))
       )
 
-      options.sort((a: any, b: any) => {
-        if (allNumbers) {
-          return a.label - b.label
-        }
+      const sortedOptions = areAllNumbers
+        ? sortOptionsNumerically([...options])
+        : sortOptionsAlphabetically([...options])
 
-        return a.label < b.label ? -1 : a.label > b.label ? 1 : 0
-      })
+      options = [...sortedOptions]
     }
 
     return { name, originalName, options }