diff --git a/CHANGELOG.md b/CHANGELOG.md
index 6d4ce0478..e00f40e0f 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]
+### Changed
+
+- Default selection logic in `SKU Selector` component to prioritize available SKUs.
+
## [3.175.1] - 2024-09-11
### Fixed
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..db29415b9 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('', () => {
const renderComponent = (customProps = {}) => {
@@ -33,7 +34,10 @@ describe('', () => {
})
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('', () => {
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('', () => {
})
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('', () => {
})
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('', () => {
})
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('', () => {
{ name: 'Color', values: ['Gray'] },
],
images: [],
+ sellers: [defaultSeller],
},
{
itemId: '4',
@@ -1431,6 +1486,7 @@ describe('', () => {
{ name: 'Color', values: ['Gray'] },
],
images: [],
+ sellers: [defaultSeller],
},
{
itemId: '4',
@@ -1443,6 +1499,7 @@ describe('', () => {
{ 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[` 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[` 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[` should consider order from skuSpecifications 1`] = `
class="skuSelectorOptionsList w-100 inline-flex flex-wrap ml2 items-center"
>
@@ -45,7 +45,7 @@ exports[` should consider order from skuSpecifications 1`] = `
@@ -66,7 +66,7 @@ exports[` should consider order from skuSpecifications 1`] = `
@@ -108,7 +108,7 @@ exports[`
should consider order from skuSpecifications 1`] = `
class="skuSelectorOptionsList w-100 inline-flex flex-wrap ml2 items-center"
>
@@ -129,7 +129,7 @@ exports[` should consider order from skuSpecifications 1`] = `
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[`
should match snapshot 1`] = `
class="suffixWrapper flex h-100"
>