From f1890de82c42dba7d52a46014adb1ee1520dd07c Mon Sep 17 00:00:00 2001
From: beatrizmaselli <beatriz.maselli@vtex.com.br>
Date: Mon, 21 Oct 2024 10:38:50 +0200
Subject: [PATCH 01/10] update sku selector logic + fix tests

---
 react/__mocks__/vtex.render-runtime.js        |  8 +++
 .../__tests__/components/SKUSelector.test.tsx | 27 +++++--
 .../__snapshots__/InfoCard.test.js.snap       |  2 +
 .../__snapshots__/SKUSelector.test.tsx.snap   | 10 +--
 .../__snapshots__/SearchBar.test.js.snap      |  1 +
 .../SKUSelector/components/SKUSelector.tsx    | 11 ++-
 react/package.json                            | 23 +++---
 react/yarn.lock                               | 70 ++++++++++---------
 8 files changed, 96 insertions(+), 56 deletions(-)

diff --git a/react/__mocks__/vtex.render-runtime.js b/react/__mocks__/vtex.render-runtime.js
index 7646d6f43..632b22456 100644
--- a/react/__mocks__/vtex.render-runtime.js
+++ b/react/__mocks__/vtex.render-runtime.js
@@ -10,6 +10,14 @@ const runtime = {
   culture: { currency: 'USD' },
   query: 'foo',
   navigate: jest.fn(),
+  getSettings: () => ({
+    'vtex.store': {
+      storeName: 'Store Theme - VTEX Base Store',
+      titleTag: 'Store Theme - VTEX Base Store',
+      metaTagDescription: 'Store Theme - VTEX Base Store',
+      metaTagKeywords: 'store theme, vtex, store, vtex io, base store, vtex',
+    },
+  }),
 }
 
 export const withRuntimeContext = Comp =>
diff --git a/react/__tests__/components/SKUSelector.test.tsx b/react/__tests__/components/SKUSelector.test.tsx
index 96899bf69..eeb1fc9b3 100644
--- a/react/__tests__/components/SKUSelector.test.tsx
+++ b/react/__tests__/components/SKUSelector.test.tsx
@@ -33,7 +33,10 @@ describe('<SKUSelector />', () => {
   })
 
   it('should render the options an select one', async () => {
-    const defaultSeller = { commertialOffer: { Price: 15 } }
+    const defaultSeller = {
+      commertialOffer: { Price: 15, AvailableQuantity: 1 },
+    }
+
     const skuItems = [
       {
         itemId: '1',
@@ -109,7 +112,10 @@ describe('<SKUSelector />', () => {
   })
 
   it('should render only three main variations', async () => {
-    const defaultSeller = { commertialOffer: { Price: 15 } }
+    const defaultSeller = {
+      commertialOffer: { Price: 15, AvailableQuantity: 1 },
+    }
+
     const skuItems = [
       {
         itemId: '1',
@@ -173,7 +179,10 @@ describe('<SKUSelector />', () => {
   })
 
   it('should render show 8 items for variation and see more button', async () => {
-    const defaultSeller = { commertialOffer: { Price: 15 } }
+    const defaultSeller = {
+      commertialOffer: { Price: 15, AvailableQuantity: 1 },
+    }
+
     const skuItems = [
       {
         itemId: '1',
@@ -637,7 +646,10 @@ describe('<SKUSelector />', () => {
   })
 
   it('should show all variations when count is inside threshold', async () => {
-    const defaultSeller = { commertialOffer: { Price: 15 } }
+    const defaultSeller = {
+      commertialOffer: { Price: 15, AvailableQuantity: 1 },
+    }
+
     const skuItems = [
       {
         itemId: '1',
@@ -1410,6 +1422,10 @@ describe('<SKUSelector />', () => {
   })
 
   it('must order sku specification to be sorted in alphabetical order', async () => {
+    const defaultSeller = {
+      commertialOffer: { Price: 15, AvailableQuantity: 1 },
+    }
+
     const skuItems = [
       {
         itemId: '1',
@@ -1419,6 +1435,7 @@ describe('<SKUSelector />', () => {
           { name: 'Color', values: ['Gray'] },
         ],
         images: [],
+        sellers: [defaultSeller],
       },
       {
         itemId: '4',
@@ -1431,6 +1448,7 @@ describe('<SKUSelector />', () => {
           { name: 'Color', values: ['Gray'] },
         ],
         images: [],
+        sellers: [defaultSeller],
       },
       {
         itemId: '4',
@@ -1443,6 +1461,7 @@ describe('<SKUSelector />', () => {
           { name: 'Color', values: ['Gray'] },
         ],
         images: [],
+        sellers: [defaultSeller],
       },
     ]
 
diff --git a/react/__tests__/components/__snapshots__/InfoCard.test.js.snap b/react/__tests__/components/__snapshots__/InfoCard.test.js.snap
index 99c5f4fb2..bcd6a7a24 100644
--- a/react/__tests__/components/__snapshots__/InfoCard.test.js.snap
+++ b/react/__tests__/components/__snapshots__/InfoCard.test.js.snap
@@ -236,6 +236,7 @@ exports[`<InfoCard /> should render with image and text side by side 1`] = `
         alt="CLICK HERE"
         class="infoCardImage"
         data-testid="half-image"
+        fetchpriority="auto"
         src="my-image.com/image.png"
         style="object-fit: cover;"
       />
@@ -315,6 +316,7 @@ exports[`<InfoCard /> should wrap half image in a link with imageActionUrl 1`] =
           alt="CLICK HERE"
           class="infoCardImage"
           data-testid="half-image"
+          fetchpriority="auto"
           src="my-image.com/image.png"
           style="object-fit: cover;"
         />
diff --git a/react/__tests__/components/__snapshots__/SKUSelector.test.tsx.snap b/react/__tests__/components/__snapshots__/SKUSelector.test.tsx.snap
index c6aa3133a..08efc53c0 100644
--- a/react/__tests__/components/__snapshots__/SKUSelector.test.tsx.snap
+++ b/react/__tests__/components/__snapshots__/SKUSelector.test.tsx.snap
@@ -24,7 +24,7 @@ exports[`<SKUSelector /> should consider order from skuSpecifications 1`] = `
           class="skuSelectorOptionsList w-100 inline-flex flex-wrap ml2 items-center"
         >
           <div
-            class="skuSelectorItem skuSelectorItem--black relative di pointer flex items-center outline-0 ma2 skuSelectorItemImage"
+            class="skuSelectorItem skuSelectorItem--black relative di pointer flex items-center outline-0 ma2 skuSelectorItemImage valueWrapper"
             role="button"
             tabindex="0"
           >
@@ -45,7 +45,7 @@ exports[`<SKUSelector /> should consider order from skuSpecifications 1`] = `
             </div>
           </div>
           <div
-            class="skuSelectorItem skuSelectorItem--gray skuSelectorItem--selected relative di pointer flex items-center outline-0 ma2 skuSelectorItemImage"
+            class="skuSelectorItem skuSelectorItem--gray skuSelectorItem--selected relative di pointer flex items-center outline-0 ma2 skuSelectorItemImage valueWrapper"
             role="button"
             tabindex="0"
           >
@@ -66,7 +66,7 @@ exports[`<SKUSelector /> should consider order from skuSpecifications 1`] = `
             </div>
           </div>
           <div
-            class="skuSelectorItem skuSelectorItem--blue relative di pointer flex items-center outline-0 ma2 skuSelectorItemImage"
+            class="skuSelectorItem skuSelectorItem--blue relative di pointer flex items-center outline-0 ma2 skuSelectorItemImage valueWrapper"
             role="button"
             tabindex="0"
           >
@@ -108,7 +108,7 @@ exports[`<SKUSelector /> should consider order from skuSpecifications 1`] = `
           class="skuSelectorOptionsList w-100 inline-flex flex-wrap ml2 items-center"
         >
           <div
-            class="skuSelectorItem skuSelectorItem--42 relative di pointer flex items-center outline-0 ma2"
+            class="skuSelectorItem skuSelectorItem--42 relative di pointer flex items-center outline-0 ma2 valueWrapper"
             role="button"
             tabindex="0"
           >
@@ -129,7 +129,7 @@ exports[`<SKUSelector /> should consider order from skuSpecifications 1`] = `
             </div>
           </div>
           <div
-            class="skuSelectorItem skuSelectorItem--41 skuSelectorItem--selected relative di pointer flex items-center outline-0 ma2"
+            class="skuSelectorItem skuSelectorItem--41 skuSelectorItem--selected relative di pointer flex items-center outline-0 ma2 valueWrapper"
             role="button"
             tabindex="0"
           >
diff --git a/react/__tests__/components/__snapshots__/SearchBar.test.js.snap b/react/__tests__/components/__snapshots__/SearchBar.test.js.snap
index 67348110f..ce83af81e 100644
--- a/react/__tests__/components/__snapshots__/SearchBar.test.js.snap
+++ b/react/__tests__/components/__snapshots__/SearchBar.test.js.snap
@@ -35,6 +35,7 @@ exports[`<SearchBar /> should match snapshot 1`] = `
                 class="suffixWrapper flex h-100"
               >
                 <button
+                  aria-label="Search Products"
                   class=" searchBarIcon searchBarIcon--search flex items-center pointer bn bg-transparent outline-0 pv0 pl0 pr3"
                 >
                   <div
diff --git a/react/components/SKUSelector/components/SKUSelector.tsx b/react/components/SKUSelector/components/SKUSelector.tsx
index daeab3ea9..c29df202b 100644
--- a/react/components/SKUSelector/components/SKUSelector.tsx
+++ b/react/components/SKUSelector/components/SKUSelector.tsx
@@ -161,13 +161,15 @@ const parseOptionNameToDisplayOption =
 
     if (possibleItems.length > 0) {
       // This is a valid combination option
-      const [item] = possibleItems
+      const availableItems = possibleItems.filter(isSkuAvailable)
+      const [item] = availableItems || possibleItems
+
       const callbackFn = onSelectItemMemo({
         name: variationName,
         value: variationValue.name,
         skuId: item.itemId,
         isMainAndImpossible: false,
-        possibleItems,
+        possibleItems: availableItems ?? possibleItems,
       })
 
       return {
@@ -176,7 +178,7 @@ const parseOptionNameToDisplayOption =
         onSelectItem: callbackFn,
         image,
         available: showItemAsAvailable({
-          possibleItems,
+          possibleItems: availableItems ?? possibleItems,
           selectedVariations,
           variationCount,
           isSelected,
@@ -248,13 +250,16 @@ const variationNameToDisplayVariation =
       const allNumbers = options.every(
         (option: any) => !Number.isNaN(option.label)
       )
+
       options.sort((a: any, b: any) => {
         if (allNumbers) {
           return a.label - b.label
         }
+
         return a.label < b.label ? -1 : a.label > b.label ? 1 : 0
       })
     }
+
     return { name, originalName, options }
   }
 
diff --git a/react/package.json b/react/package.json
index a185d3eab..bb4e16bf1 100644
--- a/react/package.json
+++ b/react/package.json
@@ -47,9 +47,9 @@
     "apollo-cache-inmemory": "^1.4.3",
     "babel-eslint": "^10.1.0",
     "typescript": "3.9.7",
-    "vtex.address-form": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.address-form@4.22.8/public/@types/vtex.address-form",
-    "vtex.apps-graphql": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.apps-graphql@3.15.0/public/@types/vtex.apps-graphql",
-    "vtex.checkout-resources": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.checkout-resources@0.49.0/public/@types/vtex.checkout-resources",
+    "vtex.address-form": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.address-form@4.25.5/public/@types/vtex.address-form",
+    "vtex.apps-graphql": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.apps-graphql@3.17.4/public/@types/vtex.apps-graphql",
+    "vtex.checkout-resources": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.checkout-resources@0.50.0/public/@types/vtex.checkout-resources",
     "vtex.css-handles": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.css-handles@1.0.1/public/@types/vtex.css-handles",
     "vtex.device-detector": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.device-detector@0.2.6/public/@types/vtex.device-detector",
     "vtex.format-currency": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.format-currency@0.4.1/public/@types/vtex.format-currency",
@@ -61,17 +61,18 @@
     "vtex.pixel-manager": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.pixel-manager@1.9.0/public/@types/vtex.pixel-manager",
     "vtex.product-context": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.product-context@0.10.1/public/@types/vtex.product-context",
     "vtex.react-portal": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.react-portal@0.4.1/public/@types/vtex.react-portal",
-    "vtex.render-runtime": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.render-runtime@8.134.2/public/@types/vtex.render-runtime",
+    "vtex.render-runtime": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.render-runtime@8.134.11/public/@types/vtex.render-runtime",
     "vtex.responsive-values": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.responsive-values@0.4.2/public/@types/vtex.responsive-values",
     "vtex.rich-text": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.rich-text@0.16.0/public/@types/vtex.rich-text",
-    "vtex.search-graphql": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.search-graphql@0.58.0/public/@types/vtex.search-graphql",
-    "vtex.shipping-estimate-translator": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.shipping-estimate-translator@2.2.3/public/@types/vtex.shipping-estimate-translator",
-    "vtex.slider-layout": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.slider-layout@0.24.4/public/@types/vtex.slider-layout",
-    "vtex.store-graphql": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store-graphql@2.170.1/public/@types/vtex.store-graphql",
+    "vtex.search-graphql": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.search-graphql@0.64.0/public/@types/vtex.search-graphql",
+    "vtex.shipping-estimate-translator": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.shipping-estimate-translator@2.3.0/public/@types/vtex.shipping-estimate-translator",
+    "vtex.slider-layout": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.slider-layout@0.24.6/public/@types/vtex.slider-layout",
+    "vtex.store-components": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store-components@3.175.1/public/@types/vtex.store-components",
+    "vtex.store-graphql": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store-graphql@2.172.1/public/@types/vtex.store-graphql",
     "vtex.store-icons": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store-icons@0.18.0/public/@types/vtex.store-icons",
-    "vtex.store-image": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store-image@0.20.0/public/@types/vtex.store-image",
-    "vtex.store-resources": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store-resources@0.93.0/public/@types/vtex.store-resources",
-    "vtex.styleguide": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.styleguide@9.146.9/public/@types/vtex.styleguide"
+    "vtex.store-image": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store-image@0.22.3/public/@types/vtex.store-image",
+    "vtex.store-resources": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store-resources@0.100.0/public/@types/vtex.store-resources",
+    "vtex.styleguide": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.styleguide@9.146.13/public/@types/vtex.styleguide"
   },
   "resolutions": {
     "json-schema": "^0.4.0",
diff --git a/react/yarn.lock b/react/yarn.lock
index 7d596fee2..93decf841 100644
--- a/react/yarn.lock
+++ b/react/yarn.lock
@@ -5292,17 +5292,17 @@ validate-npm-package-license@^3.0.1:
     spdx-correct "^3.0.0"
     spdx-expression-parse "^3.0.0"
 
-"vtex.address-form@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.address-form@4.22.8/public/@types/vtex.address-form":
-  version "4.22.8"
-  resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.address-form@4.22.8/public/@types/vtex.address-form#3df049602b25e54cffe543a9f61f9b01043d9413"
+"vtex.address-form@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.address-form@4.25.5/public/@types/vtex.address-form":
+  version "4.25.5"
+  resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.address-form@4.25.5/public/@types/vtex.address-form#482c473a8979bc10956764515084346b112efcca"
 
-"vtex.apps-graphql@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.apps-graphql@3.15.0/public/@types/vtex.apps-graphql":
-  version "3.15.0"
-  resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.apps-graphql@3.15.0/public/@types/vtex.apps-graphql#eae9419b63948f1162541e71f90292a3bae07d6a"
+"vtex.apps-graphql@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.apps-graphql@3.17.4/public/@types/vtex.apps-graphql":
+  version "3.17.4"
+  resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.apps-graphql@3.17.4/public/@types/vtex.apps-graphql#0e0abc699713a7113f1ec4948456bcd9e330d0f9"
 
-"vtex.checkout-resources@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.checkout-resources@0.49.0/public/@types/vtex.checkout-resources":
-  version "0.49.0"
-  resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.checkout-resources@0.49.0/public/@types/vtex.checkout-resources#a7d7620fce143e5dc7a9075ce2fc74727ab132c4"
+"vtex.checkout-resources@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.checkout-resources@0.50.0/public/@types/vtex.checkout-resources":
+  version "0.50.0"
+  resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.checkout-resources@0.50.0/public/@types/vtex.checkout-resources#753cbf0e0b2ed7030312ecea40e85a6cd7feccf4"
 
 "vtex.css-handles@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.css-handles@1.0.1/public/@types/vtex.css-handles":
   version "1.0.1"
@@ -5348,9 +5348,9 @@ validate-npm-package-license@^3.0.1:
   version "0.4.1"
   resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.react-portal@0.4.1/public/@types/vtex.react-portal#781ce4b53ba576a6365306531d8be0f1ad114769"
 
-"vtex.render-runtime@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.render-runtime@8.134.2/public/@types/vtex.render-runtime":
-  version "8.134.2"
-  resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.render-runtime@8.134.2/public/@types/vtex.render-runtime#ae69e2b2a471291c6c6b155e17510150fbfc2d0e"
+"vtex.render-runtime@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.render-runtime@8.134.11/public/@types/vtex.render-runtime":
+  version "8.134.11"
+  resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.render-runtime@8.134.11/public/@types/vtex.render-runtime#0e42a00ac9b26c34b5b18b7a080f7dc3a5ac9959"
 
 "vtex.responsive-values@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.responsive-values@0.4.2/public/@types/vtex.responsive-values":
   version "0.4.2"
@@ -5360,37 +5360,41 @@ validate-npm-package-license@^3.0.1:
   version "0.16.0"
   resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.rich-text@0.16.0/public/@types/vtex.rich-text#0cdcaccffb37ae0d025894ba7055f69bc3c9aa30"
 
-"vtex.search-graphql@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.search-graphql@0.58.0/public/@types/vtex.search-graphql":
-  version "0.58.0"
-  resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.search-graphql@0.58.0/public/@types/vtex.search-graphql#e0227a47b862277d2b9b4744f114e241afa158e4"
+"vtex.search-graphql@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.search-graphql@0.64.0/public/@types/vtex.search-graphql":
+  version "0.64.0"
+  resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.search-graphql@0.64.0/public/@types/vtex.search-graphql#73bdcc5a85988b3808690ce9a2020a284e50c314"
 
-"vtex.shipping-estimate-translator@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.shipping-estimate-translator@2.2.3/public/@types/vtex.shipping-estimate-translator":
-  version "2.2.3"
-  resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.shipping-estimate-translator@2.2.3/public/@types/vtex.shipping-estimate-translator#56c520e45e61572c253542572c153eb1ad0f993f"
+"vtex.shipping-estimate-translator@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.shipping-estimate-translator@2.3.0/public/@types/vtex.shipping-estimate-translator":
+  version "2.3.0"
+  resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.shipping-estimate-translator@2.3.0/public/@types/vtex.shipping-estimate-translator#47cd5baf775e33d3c623c56bbe223acca703faf7"
+
+"vtex.slider-layout@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.slider-layout@0.24.6/public/@types/vtex.slider-layout":
+  version "0.24.6"
+  resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.slider-layout@0.24.6/public/@types/vtex.slider-layout#abdc109d880937fe528641c06a3f0e966579bf92"
 
-"vtex.slider-layout@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.slider-layout@0.24.4/public/@types/vtex.slider-layout":
-  version "0.24.4"
-  resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.slider-layout@0.24.4/public/@types/vtex.slider-layout#81731b60025929589adeea1ffd3e12eb1d9480e1"
+"vtex.store-components@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store-components@3.175.1/public/@types/vtex.store-components":
+  version "3.175.1"
+  resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store-components@3.175.1/public/@types/vtex.store-components#b85cd3a694bf82c0d4f306c34df2d808977751d7"
 
-"vtex.store-graphql@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store-graphql@2.170.1/public/@types/vtex.store-graphql":
-  version "2.170.1"
-  resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store-graphql@2.170.1/public/@types/vtex.store-graphql#7e087ac00c2abf0a2e06ef5551110d0de5b7fe58"
+"vtex.store-graphql@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store-graphql@2.172.1/public/@types/vtex.store-graphql":
+  version "2.172.1"
+  resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store-graphql@2.172.1/public/@types/vtex.store-graphql#3285d5b1086a07b8ba9489cee516c163df4a768d"
 
 "vtex.store-icons@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store-icons@0.18.0/public/@types/vtex.store-icons":
   version "0.18.0"
   resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store-icons@0.18.0/public/@types/vtex.store-icons#0ee94d549aa283ce3a13ab987c13eac4fdfd1bba"
 
-"vtex.store-image@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store-image@0.20.0/public/@types/vtex.store-image":
-  version "0.20.0"
-  resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store-image@0.20.0/public/@types/vtex.store-image#c0b627efa82e3e224b1ed48416836213fb204952"
+"vtex.store-image@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store-image@0.22.3/public/@types/vtex.store-image":
+  version "0.22.3"
+  resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store-image@0.22.3/public/@types/vtex.store-image#71e81446ab5eb1b80ec9b7915f5471bdd6ec0757"
 
-"vtex.store-resources@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store-resources@0.93.0/public/@types/vtex.store-resources":
-  version "0.93.0"
-  resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store-resources@0.93.0/public/@types/vtex.store-resources#f7d82498aa2871d25df89c54f8fff2f5a7ac22f7"
+"vtex.store-resources@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store-resources@0.100.0/public/@types/vtex.store-resources":
+  version "0.100.0"
+  resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store-resources@0.100.0/public/@types/vtex.store-resources#88f9cf8e380de88cbcb2263c2c3ccabaf9cabdfe"
 
-"vtex.styleguide@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.styleguide@9.146.9/public/@types/vtex.styleguide":
-  version "9.146.9"
-  resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.styleguide@9.146.9/public/@types/vtex.styleguide#d1601fedfb665c6173334753171717da64e670bc"
+"vtex.styleguide@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.styleguide@9.146.13/public/@types/vtex.styleguide":
+  version "9.146.13"
+  resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.styleguide@9.146.13/public/@types/vtex.styleguide#f4ccbc54621bf5114ddd115b6032ae320f2eba55"
 
 w3c-hr-time@^1.0.2:
   version "1.0.2"

From 0fc55e0ceefd000fafc42043e77b18bdcb047d50 Mon Sep 17 00:00:00 2001
From: beatrizmaselli <beatriz.maselli@vtex.com.br>
Date: Mon, 21 Oct 2024 11:25:28 +0200
Subject: [PATCH 02/10] add changelog

---
 CHANGELOG.md | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 6d4ce0478..d7f110772 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+### Fixed
+
+- Fix default selection logic in `SKU Selector` component to prioritize saleable SKUs.
+
 ## [3.175.1] - 2024-09-11
 
 ### Fixed

From 147ded2de7b7887d1a7ec756d51f07b4c2077b17 Mon Sep 17 00:00:00 2001
From: Iago Espinoza <iago1501@gmail.com>
Date: Thu, 31 Oct 2024 16:19:40 -0300
Subject: [PATCH 03/10] fixed: skuselector prioritizing first possible instead
 of first possible available

---
 CHANGELOG.md                                  |  4 +-
 .../__tests__/components/SKUSelector.test.tsx | 39 +++++++++++++++++++
 .../SKUSelector/components/SKUSelector.tsx    | 34 +++++++++++++---
 3 files changed, 70 insertions(+), 7 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index d7f110772..e00f40e0f 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,9 +7,9 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
-### Fixed
+### Changed
 
-- Fix default selection logic in `SKU Selector` component to prioritize saleable SKUs.
+- Default selection logic in `SKU Selector` component to prioritize available SKUs.
 
 ## [3.175.1] - 2024-09-11
 
diff --git a/react/__tests__/components/SKUSelector.test.tsx b/react/__tests__/components/SKUSelector.test.tsx
index eeb1fc9b3..571f73b74 100644
--- a/react/__tests__/components/SKUSelector.test.tsx
+++ b/react/__tests__/components/SKUSelector.test.tsx
@@ -4,6 +4,7 @@ import { useProduct, ProductContext } from 'vtex.product-context'
 import { getSKU } from 'sku-helper'
 
 import SKUSelector from '../../components/SKUSelector/Wrapper'
+import { orderItemsByAvailability } from '../../components/SKUSelector/components/SKUSelector'
 
 describe('<SKUSelector />', () => {
   const renderComponent = (customProps = {}) => {
@@ -111,6 +112,44 @@ describe('<SKUSelector />', () => {
     expect(getByText('41')).toBeDefined()
   })
 
+  it('should be able to order by availability', async () => {
+    const defaultSeller1 = {
+      sellerDefault: true,
+      commertialOffer: { Price: 15, AvailableQuantity: 0, ListPrice: 200 },
+    }
+
+    const defaultSeller2 = {
+      sellerDefault: true,
+      commertialOffer: { Price: 15, AvailableQuantity: 1, ListPrice: 200 },
+    }
+
+    const skuItems = [
+      {
+        itemId: '1',
+        name: 'Gray Shoe',
+        variations: ['Size', 'Color'],
+        variationValues: {"Size": "41", "Color": "Gray"},
+        sellers: [defaultSeller1],      
+        images: [],
+        
+      },
+      {
+        itemId: '2',
+        name: 'Gray Shoe',
+        variations: ['Size', 'Color'],
+        variationValues: {"Size": "41", "Color": "Gray"},
+        sellers: [defaultSeller2],
+        images: [],
+      }
+    ]
+
+    const possibleItemsOrderedByAvailability = skuItems.sort(orderItemsByAvailability)
+
+    expect(possibleItemsOrderedByAvailability[0].itemId).toEqual("2")
+
+    
+  })
+
   it('should render only three main variations', async () => {
     const defaultSeller = {
       commertialOffer: { Price: 15, AvailableQuantity: 1 },
diff --git a/react/components/SKUSelector/components/SKUSelector.tsx b/react/components/SKUSelector/components/SKUSelector.tsx
index c29df202b..437badc31 100644
--- a/react/components/SKUSelector/components/SKUSelector.tsx
+++ b/react/components/SKUSelector/components/SKUSelector.tsx
@@ -121,6 +121,30 @@ interface AvailableVariationParams {
   sortVariationsByLabel: boolean
 }
 
+export const orderItemsByAvailability = (item1: SelectorProductItem, item2: SelectorProductItem) => {
+
+  const isAvailableItem1 = isSkuAvailable(item1)
+  const isAvailableItem2 = isSkuAvailable(item2)    
+
+  if(isAvailableItem1 && !isAvailableItem2){
+    return -1
+  }
+
+  if(!isAvailableItem1 && isAvailableItem2){
+    return 1
+  }
+
+  const defaultSellerItem1 = getDefaultSeller(item1.sellers)
+  const defaultSellerItem2 = getDefaultSeller(item2.sellers)
+
+  const availabilityItem1 = defaultSellerItem1 ? defaultSellerItem1.commertialOffer.AvailableQuantity : 0
+  const availabilityItem2 = defaultSellerItem2 ? defaultSellerItem2.commertialOffer.AvailableQuantity : 0
+
+  return availabilityItem2 - availabilityItem1
+
+}
+
+
 const parseOptionNameToDisplayOption =
   ({
     selectedVariations,
@@ -157,19 +181,19 @@ const parseOptionNameToDisplayOption =
     const possibleItems = findListItemsWithSelectedVariations(
       skuItems,
       newSelectedVariation
-    )
+    )    
 
     if (possibleItems.length > 0) {
       // This is a valid combination option
-      const availableItems = possibleItems.filter(isSkuAvailable)
-      const [item] = availableItems || possibleItems
+      const possibleItemsOrderedByAvailability = (possibleItems.length > 1) ? possibleItems.sort(orderItemsByAvailability) : possibleItems      
+      const [item] = possibleItemsOrderedByAvailability
 
       const callbackFn = onSelectItemMemo({
         name: variationName,
         value: variationValue.name,
         skuId: item.itemId,
         isMainAndImpossible: false,
-        possibleItems: availableItems ?? possibleItems,
+        possibleItems: possibleItemsOrderedByAvailability,
       })
 
       return {
@@ -178,7 +202,7 @@ const parseOptionNameToDisplayOption =
         onSelectItem: callbackFn,
         image,
         available: showItemAsAvailable({
-          possibleItems: availableItems ?? possibleItems,
+          possibleItems: possibleItemsOrderedByAvailability,
           selectedVariations,
           variationCount,
           isSelected,

From 695c5b342723dd97c129c4b347646e3a1ed8f53f Mon Sep 17 00:00:00 2001
From: Iago Espinoza <iago1501@gmail.com>
Date: Thu, 31 Oct 2024 16:22:02 -0300
Subject: [PATCH 04/10] lint fix

---
 react/components/SKUSelector/components/SKUSelector.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/react/components/SKUSelector/components/SKUSelector.tsx b/react/components/SKUSelector/components/SKUSelector.tsx
index 437badc31..c9ed4fffb 100644
--- a/react/components/SKUSelector/components/SKUSelector.tsx
+++ b/react/components/SKUSelector/components/SKUSelector.tsx
@@ -185,7 +185,7 @@ const parseOptionNameToDisplayOption =
 
     if (possibleItems.length > 0) {
       // This is a valid combination option
-      const possibleItemsOrderedByAvailability = (possibleItems.length > 1) ? possibleItems.sort(orderItemsByAvailability) : possibleItems      
+      const possibleItemsOrderedByAvailability = (possibleItems.length > 1) ? possibleItems.sort(orderItemsByAvailability) : possibleItems
       const [item] = possibleItemsOrderedByAvailability
 
       const callbackFn = onSelectItemMemo({

From 1881f4b6669e349e55cae0e4c92c363323e6db26 Mon Sep 17 00:00:00 2001
From: Iago Espinoza <iago1501@gmail.com>
Date: Thu, 31 Oct 2024 16:30:10 -0300
Subject: [PATCH 05/10] lint fix

---
 .../SKUSelector/components/SKUSelector.tsx        | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/react/components/SKUSelector/components/SKUSelector.tsx b/react/components/SKUSelector/components/SKUSelector.tsx
index c9ed4fffb..c85e76292 100644
--- a/react/components/SKUSelector/components/SKUSelector.tsx
+++ b/react/components/SKUSelector/components/SKUSelector.tsx
@@ -121,16 +121,17 @@ interface AvailableVariationParams {
   sortVariationsByLabel: boolean
 }
 
-export const orderItemsByAvailability = (item1: SelectorProductItem, item2: SelectorProductItem) => {
+export const orderItemsByAvailability = (
+  item1: SelectorProductItem, item2: SelectorProductItem) => {
 
   const isAvailableItem1 = isSkuAvailable(item1)
-  const isAvailableItem2 = isSkuAvailable(item2)    
+  const isAvailableItem2 = isSkuAvailable(item2)
 
-  if(isAvailableItem1 && !isAvailableItem2){
+  if (isAvailableItem1 && !isAvailableItem2) {
     return -1
   }
 
-  if(!isAvailableItem1 && isAvailableItem2){
+  if (!isAvailableItem1 && isAvailableItem2) {
     return 1
   }
 
@@ -181,11 +182,13 @@ const parseOptionNameToDisplayOption =
     const possibleItems = findListItemsWithSelectedVariations(
       skuItems,
       newSelectedVariation
-    )    
+    )
 
     if (possibleItems.length > 0) {
       // This is a valid combination option
-      const possibleItemsOrderedByAvailability = (possibleItems.length > 1) ? possibleItems.sort(orderItemsByAvailability) : possibleItems
+      const possibleItemsOrderedByAvailability =
+        possibleItems.length > 1 
+        ? possibleItems.sort(orderItemsByAvailability) : possibleItems
       const [item] = possibleItemsOrderedByAvailability
 
       const callbackFn = onSelectItemMemo({

From ea3e9e8864364e891e32f24ef11ea797f5403f29 Mon Sep 17 00:00:00 2001
From: Iago Espinoza <iago1501@gmail.com>
Date: Thu, 31 Oct 2024 16:34:38 -0300
Subject: [PATCH 06/10] lint fix

---
 .../SKUSelector/components/SKUSelector.tsx       | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/react/components/SKUSelector/components/SKUSelector.tsx b/react/components/SKUSelector/components/SKUSelector.tsx
index c85e76292..d99f9b4e9 100644
--- a/react/components/SKUSelector/components/SKUSelector.tsx
+++ b/react/components/SKUSelector/components/SKUSelector.tsx
@@ -122,7 +122,9 @@ interface AvailableVariationParams {
 }
 
 export const orderItemsByAvailability = (
-  item1: SelectorProductItem, item2: SelectorProductItem) => {
+  item1: SelectorProductItem, 
+  item2: SelectorProductItem
+) => {
 
   const isAvailableItem1 = isSkuAvailable(item1)
   const isAvailableItem2 = isSkuAvailable(item2)
@@ -138,8 +140,11 @@ export const orderItemsByAvailability = (
   const defaultSellerItem1 = getDefaultSeller(item1.sellers)
   const defaultSellerItem2 = getDefaultSeller(item2.sellers)
 
-  const availabilityItem1 = defaultSellerItem1 ? defaultSellerItem1.commertialOffer.AvailableQuantity : 0
-  const availabilityItem2 = defaultSellerItem2 ? defaultSellerItem2.commertialOffer.AvailableQuantity : 0
+  const availabilityItem1 = defaultSellerItem1 
+    ? defaultSellerItem1.commertialOffer.AvailableQuantity : 0
+
+  const availabilityItem2 = defaultSellerItem2 
+    ? defaultSellerItem2.commertialOffer.AvailableQuantity : 0
 
   return availabilityItem2 - availabilityItem1
 
@@ -186,9 +191,12 @@ const parseOptionNameToDisplayOption =
 
     if (possibleItems.length > 0) {
       // This is a valid combination option
+
       const possibleItemsOrderedByAvailability =
         possibleItems.length > 1 
-        ? possibleItems.sort(orderItemsByAvailability) : possibleItems
+        ? possibleItems.sort(orderItemsByAvailability) 
+        : possibleItems
+
       const [item] = possibleItemsOrderedByAvailability
 
       const callbackFn = onSelectItemMemo({

From 0b0de8c2164624404b5ba75fc01e6130bc1c8a65 Mon Sep 17 00:00:00 2001
From: Iago Espinoza <iago1501@gmail.com>
Date: Thu, 31 Oct 2024 16:39:20 -0300
Subject: [PATCH 07/10] lint fix

---
 .../SKUSelector/components/SKUSelector.tsx          | 13 +++++--------
 1 file changed, 5 insertions(+), 8 deletions(-)

diff --git a/react/components/SKUSelector/components/SKUSelector.tsx b/react/components/SKUSelector/components/SKUSelector.tsx
index d99f9b4e9..c3619fa73 100644
--- a/react/components/SKUSelector/components/SKUSelector.tsx
+++ b/react/components/SKUSelector/components/SKUSelector.tsx
@@ -122,10 +122,9 @@ interface AvailableVariationParams {
 }
 
 export const orderItemsByAvailability = (
-  item1: SelectorProductItem, 
+  item1: SelectorProductItem,
   item2: SelectorProductItem
 ) => {
-
   const isAvailableItem1 = isSkuAvailable(item1)
   const isAvailableItem2 = isSkuAvailable(item2)
 
@@ -140,17 +139,15 @@ export const orderItemsByAvailability = (
   const defaultSellerItem1 = getDefaultSeller(item1.sellers)
   const defaultSellerItem2 = getDefaultSeller(item2.sellers)
 
-  const availabilityItem1 = defaultSellerItem1 
+  const availabilityItem1 = defaultSellerItem1
     ? defaultSellerItem1.commertialOffer.AvailableQuantity : 0
 
-  const availabilityItem2 = defaultSellerItem2 
+  const availabilityItem2 = defaultSellerItem2
     ? defaultSellerItem2.commertialOffer.AvailableQuantity : 0
 
   return availabilityItem2 - availabilityItem1
-
 }
 
-
 const parseOptionNameToDisplayOption =
   ({
     selectedVariations,
@@ -193,8 +190,8 @@ const parseOptionNameToDisplayOption =
       // This is a valid combination option
 
       const possibleItemsOrderedByAvailability =
-        possibleItems.length > 1 
-        ? possibleItems.sort(orderItemsByAvailability) 
+        possibleItems.length > 1
+        ? possibleItems.sort(orderItemsByAvailability)
         : possibleItems
 
       const [item] = possibleItemsOrderedByAvailability

From 10148af73658ef697ad96f9e97b94cdf97c210ae Mon Sep 17 00:00:00 2001
From: Iago Espinoza <iago1501@gmail.com>
Date: Thu, 31 Oct 2024 17:09:45 -0300
Subject: [PATCH 08/10] lint fix

---
 react/__tests__/components/SKUSelector.test.tsx   | 15 ++++++++-------
 .../SKUSelector/components/SKUSelector.tsx        |  6 ++++--
 2 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/react/__tests__/components/SKUSelector.test.tsx b/react/__tests__/components/SKUSelector.test.tsx
index 571f73b74..023f38054 100644
--- a/react/__tests__/components/SKUSelector.test.tsx
+++ b/react/__tests__/components/SKUSelector.test.tsx
@@ -128,24 +128,25 @@ describe('<SKUSelector />', () => {
         itemId: '1',
         name: 'Gray Shoe',
         variations: ['Size', 'Color'],
-        variationValues: {"Size": "41", "Color": "Gray"},
-        sellers: [defaultSeller1],      
+        variationValues: {Size: '41', Color: 'Gray'},
+        sellers: [defaultSeller1],    
         images: [],
-        
       },
       {
         itemId: '2',
         name: 'Gray Shoe',
         variations: ['Size', 'Color'],
-        variationValues: {"Size": "41", "Color": "Gray"},
+        variationValues: {Size: '41', Color: 'Gray'},
         sellers: [defaultSeller2],
         images: [],
-      }
+      },
     ]
 
-    const possibleItemsOrderedByAvailability = skuItems.sort(orderItemsByAvailability)
+    const possibleItemsOrderedByAvailability = skuItems.sort(
+      orderItemsByAvailability
+    )
 
-    expect(possibleItemsOrderedByAvailability[0].itemId).toEqual("2")
+    expect(possibleItemsOrderedByAvailability[0].itemId).toEqual('2')
 
     
   })
diff --git a/react/components/SKUSelector/components/SKUSelector.tsx b/react/components/SKUSelector/components/SKUSelector.tsx
index c3619fa73..347faa4a5 100644
--- a/react/components/SKUSelector/components/SKUSelector.tsx
+++ b/react/components/SKUSelector/components/SKUSelector.tsx
@@ -142,9 +142,11 @@ export const orderItemsByAvailability = (
   const availabilityItem1 = defaultSellerItem1
     ? defaultSellerItem1.commertialOffer.AvailableQuantity : 0
 
+
   const availabilityItem2 = defaultSellerItem2
     ? defaultSellerItem2.commertialOffer.AvailableQuantity : 0
 
+
   return availabilityItem2 - availabilityItem1
 }
 
@@ -191,8 +193,8 @@ const parseOptionNameToDisplayOption =
 
       const possibleItemsOrderedByAvailability =
         possibleItems.length > 1
-        ? possibleItems.sort(orderItemsByAvailability)
-        : possibleItems
+          ? possibleItems.sort(orderItemsByAvailability)
+          : possibleItems
 
       const [item] = possibleItemsOrderedByAvailability
 

From 8ede4cc5d81f980800f12a12e65753df975e7888 Mon Sep 17 00:00:00 2001
From: Iago Espinoza <iago1501@gmail.com>
Date: Thu, 31 Oct 2024 17:13:05 -0300
Subject: [PATCH 09/10] lint fix

---
 react/__tests__/components/SKUSelector.test.tsx         | 7 +++----
 react/components/SKUSelector/components/SKUSelector.tsx | 6 ++++--
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/react/__tests__/components/SKUSelector.test.tsx b/react/__tests__/components/SKUSelector.test.tsx
index 023f38054..e454d809c 100644
--- a/react/__tests__/components/SKUSelector.test.tsx
+++ b/react/__tests__/components/SKUSelector.test.tsx
@@ -128,15 +128,15 @@ describe('<SKUSelector />', () => {
         itemId: '1',
         name: 'Gray Shoe',
         variations: ['Size', 'Color'],
-        variationValues: {Size: '41', Color: 'Gray'},
-        sellers: [defaultSeller1],    
+        variationValues: { Size: '41', Color: 'Gray' },
+        sellers: [defaultSeller1], 
         images: [],
       },
       {
         itemId: '2',
         name: 'Gray Shoe',
         variations: ['Size', 'Color'],
-        variationValues: {Size: '41', Color: 'Gray'},
+        variationValues: { Size: '41', Color: 'Gray' },
         sellers: [defaultSeller2],
         images: [],
       },
@@ -147,7 +147,6 @@ describe('<SKUSelector />', () => {
     )
 
     expect(possibleItemsOrderedByAvailability[0].itemId).toEqual('2')
-
     
   })
 
diff --git a/react/components/SKUSelector/components/SKUSelector.tsx b/react/components/SKUSelector/components/SKUSelector.tsx
index 347faa4a5..3a2aeaed4 100644
--- a/react/components/SKUSelector/components/SKUSelector.tsx
+++ b/react/components/SKUSelector/components/SKUSelector.tsx
@@ -140,11 +140,13 @@ export const orderItemsByAvailability = (
   const defaultSellerItem2 = getDefaultSeller(item2.sellers)
 
   const availabilityItem1 = defaultSellerItem1
-    ? defaultSellerItem1.commertialOffer.AvailableQuantity : 0
+    ? defaultSellerItem1.commertialOffer.AvailableQuantity
+    : 0
 
 
   const availabilityItem2 = defaultSellerItem2
-    ? defaultSellerItem2.commertialOffer.AvailableQuantity : 0
+    ? defaultSellerItem2.commertialOffer.AvailableQuantity
+    : 0
 
 
   return availabilityItem2 - availabilityItem1

From 3fec174a79b3080c6c969ef3784b8b934d1551b4 Mon Sep 17 00:00:00 2001
From: Iago Espinoza <iago1501@gmail.com>
Date: Thu, 31 Oct 2024 17:16:26 -0300
Subject: [PATCH 10/10] lint fix

---
 react/__tests__/components/SKUSelector.test.tsx         | 3 +--
 react/components/SKUSelector/components/SKUSelector.tsx | 2 --
 2 files changed, 1 insertion(+), 4 deletions(-)

diff --git a/react/__tests__/components/SKUSelector.test.tsx b/react/__tests__/components/SKUSelector.test.tsx
index e454d809c..db29415b9 100644
--- a/react/__tests__/components/SKUSelector.test.tsx
+++ b/react/__tests__/components/SKUSelector.test.tsx
@@ -129,7 +129,7 @@ describe('<SKUSelector />', () => {
         name: 'Gray Shoe',
         variations: ['Size', 'Color'],
         variationValues: { Size: '41', Color: 'Gray' },
-        sellers: [defaultSeller1], 
+        sellers: [defaultSeller1],
         images: [],
       },
       {
@@ -147,7 +147,6 @@ describe('<SKUSelector />', () => {
     )
 
     expect(possibleItemsOrderedByAvailability[0].itemId).toEqual('2')
-    
   })
 
   it('should render only three main variations', async () => {
diff --git a/react/components/SKUSelector/components/SKUSelector.tsx b/react/components/SKUSelector/components/SKUSelector.tsx
index 3a2aeaed4..479cb5c2d 100644
--- a/react/components/SKUSelector/components/SKUSelector.tsx
+++ b/react/components/SKUSelector/components/SKUSelector.tsx
@@ -143,12 +143,10 @@ export const orderItemsByAvailability = (
     ? defaultSellerItem1.commertialOffer.AvailableQuantity
     : 0
 
-
   const availabilityItem2 = defaultSellerItem2
     ? defaultSellerItem2.commertialOffer.AvailableQuantity
     : 0
 
-
   return availabilityItem2 - availabilityItem1
 }