Update: SKU Selector logic for default

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+### Changed
+
+- Default selection logic in `SKU Selector` component to prioritize available SKUs.
+
 ## [3.175.1] - 2024-09-11
 
 ### Fixed

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 =>

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 = {}) => {
@@ -33,7 +34,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',
@@ -108,8 +112,48 @@ 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 } }
+    const defaultSeller = {
+      commertialOffer: { Price: 15, AvailableQuantity: 1 },
+    }
+
     const skuItems = [
       {
         itemId: '1',
@@ -173,7 +217,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 +684,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 +1460,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 +1473,7 @@ describe('<SKUSelector />', () => {
           { name: 'Color', values: ['Gray'] },
         ],
         images: [],
+        sellers: [defaultSeller],
       },
       {
         itemId: '4',
@@ -1431,6 +1486,7 @@ describe('<SKUSelector />', () => {
           { name: 'Color', values: ['Gray'] },
         ],
         images: [],
+        sellers: [defaultSeller],
       },
       {
         itemId: '4',
@@ -1443,6 +1499,7 @@ describe('<SKUSelector />', () => {
           { name: 'Color', values: ['Gray'] },
         ],
         images: [],
+        sellers: [defaultSeller],
       },
     ]
 

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;"
         />

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"
           >

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

react/components/SKUSelector/components/SKUSelector.tsx

@@ -121,6 +121,35 @@ 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,
@@ -161,13 +190,20 @@ const parseOptionNameToDisplayOption =
 
     if (possibleItems.length > 0) {
       // This is a valid combination option
-      const [item] = 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,
+        possibleItems: possibleItemsOrderedByAvailability,
       })
 
       return {
@@ -176,7 +212,7 @@ const parseOptionNameToDisplayOption =
         onSelectItem: callbackFn,
         image,
         available: showItemAsAvailable({
-          possibleItems,
+          possibleItems: possibleItemsOrderedByAvailability,
           selectedVariations,
           variationCount,
           isSelected,
@@ -248,13 +284,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 }
   }
 

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/[email protected]/public/@types/vtex.css-handles",
     "vtex.device-detector": "http://vtex.vtexassets.com/_v/public/typings/v1/[email protected]/public/@types/vtex.device-detector",
     "vtex.format-currency": "http://vtex.vtexassets.com/_v/public/typings/v1/[email protected]/public/@types/vtex.format-currency",
@@ -61,17 +61,18 @@
     "vtex.pixel-manager": "http://vtex.vtexassets.com/_v/public/typings/v1/[email protected]/public/@types/vtex.pixel-manager",
     "vtex.product-context": "http://vtex.vtexassets.com/_v/public/typings/v1/[email protected]/public/@types/vtex.product-context",
     "vtex.react-portal": "http://vtex.vtexassets.com/_v/public/typings/v1/[email protected]/public/@types/vtex.react-portal",
-    "vtex.render-runtime": "http://vtex.vtexassets.com/_v/public/typings/v1/[email protected].2/public/@types/vtex.render-runtime",
+    "vtex.render-runtime": "http://vtex.vtexassets.com/_v/public/typings/v1/[email protected].11/public/@types/vtex.render-runtime",
     "vtex.responsive-values": "http://vtex.vtexassets.com/_v/public/typings/v1/[email protected]/public/@types/vtex.responsive-values",
     "vtex.rich-text": "http://vtex.vtexassets.com/_v/public/typings/v1/[email protected]/public/@types/vtex.rich-text",
-    "vtex.search-graphql": "http://vtex.vtexassets.com/_v/public/typings/v1/[email protected]/public/@types/vtex.search-graphql",
-    "vtex.shipping-estimate-translator": "http://vtex.vtexassets.com/_v/public/typings/v1/[email protected]/public/@types/vtex.shipping-estimate-translator",
-    "vtex.slider-layout": "http://vtex.vtexassets.com/_v/public/typings/v1/[email protected]/public/@types/vtex.slider-layout",
-    "vtex.store-graphql": "http://vtex.vtexassets.com/_v/public/typings/v1/[email protected]/public/@types/vtex.store-graphql",
+    "vtex.search-graphql": "http://vtex.vtexassets.com/_v/public/typings/v1/[email protected]/public/@types/vtex.search-graphql",
+    "vtex.shipping-estimate-translator": "http://vtex.vtexassets.com/_v/public/typings/v1/[email protected]/public/@types/vtex.shipping-estimate-translator",
+    "vtex.slider-layout": "http://vtex.vtexassets.com/_v/public/typings/v1/[email protected]/public/@types/vtex.slider-layout",
+    "vtex.store-components": "http://vtex.vtexassets.com/_v/public/typings/v1/[email protected]/public/@types/vtex.store-components",
+    "vtex.store-graphql": "http://vtex.vtexassets.com/_v/public/typings/v1/[email protected]/public/@types/vtex.store-graphql",
     "vtex.store-icons": "http://vtex.vtexassets.com/_v/public/typings/v1/[email protected]/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/[email protected].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/[email protected].13/public/@types/vtex.styleguide"
   },
   "resolutions": {
     "json-schema": "^0.4.0",