From 0b83b2d4755bdda62ae8669b5691d04982cae41c Mon Sep 17 00:00:00 2001
From: Wender Lima <wender.lima@vtex.com.br>
Date: Wed, 3 Jul 2024 10:00:50 -0400
Subject: [PATCH 1/2] Added sorting to variations

---
 .../src/molecules/SkuSelector/SkuSelector.tsx | 24 ++++++++++++++++---
 1 file changed, 21 insertions(+), 3 deletions(-)

diff --git a/packages/components/src/molecules/SkuSelector/SkuSelector.tsx b/packages/components/src/molecules/SkuSelector/SkuSelector.tsx
index 74805af1f6..8bc1364aa1 100644
--- a/packages/components/src/molecules/SkuSelector/SkuSelector.tsx
+++ b/packages/components/src/molecules/SkuSelector/SkuSelector.tsx
@@ -5,7 +5,6 @@ import { Label, SROnly, Link, LinkProps, LinkElementType } from '../..'
 import { useDefineVariant, Variant } from './useDefineVariant'
 import { useSkuSlug } from './useSkuSlug'
 
-
 // TODO: Change by ImageComponent when it be right
 const ImageComponentFallback: SkuSelectorProps['ImageComponent'] = ({
   src,
@@ -108,8 +107,27 @@ const SkuSelector = forwardRef<HTMLDivElement, SkuSelectorProps>(
 
     const variant = useDefineVariant(options, variantProp)
 
-    const { getItemHref } = useSkuSlug(activeVariations, slugsMap, skuPropertyName, getItemHrefProp)
+    const { getItemHref } = useSkuSlug(
+      activeVariations,
+      slugsMap,
+      skuPropertyName,
+      getItemHrefProp
+    )
+
+    const isNumeric = (value) => {
+      return !isNaN(value - parseFloat(value))
+    }
+
+    const sortOptions = (options) => {
+      return options.sort((a, b) => {
+        if (isNumeric(a.value) && isNumeric(b.value)) {
+          return parseFloat(a.value) - parseFloat(b.value)
+        }
+        return a.value.localeCompare(b.value)
+      })
+    }
 
+    const sortedOptions = sortOptions(options)
     return (
       <div
         ref={ref}
@@ -124,7 +142,7 @@ const SkuSelector = forwardRef<HTMLDivElement, SkuSelectorProps>(
           </Label>
         )}
         <ul data-fs-sku-selector-list>
-          {options.map((option, index) => {
+          {sortedOptions.map((option, index) => {
             return (
               <li
                 key={String(index)}

From 28e7ed3c2c6ee1c6d606b06e6c8b243bbf6ddeac Mon Sep 17 00:00:00 2001
From: Wender Lima <wender.lima@vtex.com.br>
Date: Wed, 3 Jul 2024 10:04:38 -0400
Subject: [PATCH 2/2] Simplifying the parameter to avoid conflict

---
 packages/components/src/molecules/SkuSelector/SkuSelector.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/components/src/molecules/SkuSelector/SkuSelector.tsx b/packages/components/src/molecules/SkuSelector/SkuSelector.tsx
index 8bc1364aa1..298a7980df 100644
--- a/packages/components/src/molecules/SkuSelector/SkuSelector.tsx
+++ b/packages/components/src/molecules/SkuSelector/SkuSelector.tsx
@@ -118,8 +118,8 @@ const SkuSelector = forwardRef<HTMLDivElement, SkuSelectorProps>(
       return !isNaN(value - parseFloat(value))
     }
 
-    const sortOptions = (options) => {
-      return options.sort((a, b) => {
+    const sortOptions = (opt) => {
+      return opt.sort((a, b) => {
         if (isNumeric(a.value) && isNumeric(b.value)) {
           return parseFloat(a.value) - parseFloat(b.value)
         }