Merge pull request #290 from vtex-apps/seller

Use first available seller instead of always using the first

CHANGELOG.md

@@ -6,6 +6,8 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
 ## [Unreleased]
+### Fixed
+- Use first available seller instead of always using the first.
 
 ## [2.66.1] - 2020-12-14
 ### Fixed

react/__mocks__/vtex.product-context/index.js → react/__mocks__/vtex.product-context.js

@@ -9,3 +9,5 @@ export const ProductContextProvider = ({ product, query, ...rest }) => {
 }
 
 export const useProduct = () => useContext(ProductContext)
+
+export const useProductDispatch = () => null

react/components/ProductSummarySKUSelector/index.tsx

@@ -1,13 +1,13 @@
 import React from 'react'
-// eslint-disable-next-line no-restricted-imports
-import { head } from 'ramda'
 import { SKUSelector } from 'vtex.store-components'
 import { useCssHandles } from 'vtex.css-handles'
 import {
   useProductSummaryDispatch,
   useProductSummary,
 } from 'vtex.product-summary-context/ProductSummaryContext'
 
+import { getFirstAvailableSeller } from '../../modules/seller'
+
 const CSS_HANDLES = ['SKUSelectorContainer']
 
 function ProductSummarySKUSelector(props: any) {
@@ -34,8 +34,9 @@ function ProductSummarySKUSelector(props: any) {
 
     const sku = {
       ...selectedItem,
-      image: head(selectedItem.images),
-      seller: head(selectedItem.sellers),
+      image: selectedItem.images[0],
+      seller:
+        getFirstAvailableSeller(selectedItem.sellers) ?? selectedItem.seller[0],
     }
 
     const newProduct = {

react/modules/seller.ts

@@ -0,0 +1,13 @@
+import { ProductTypes } from 'vtex.product-context'
+
+export function getFirstAvailableSeller(sellers?: ProductTypes.Seller[]) {
+  if (!sellers || sellers.length === 0) {
+    return
+  }
+
+  const availableSeller = sellers.find(
+    (seller) => seller.commertialOffer.AvailableQuantity !== 0
+  )
+
+  return availableSeller
+}

react/utils/normalize.ts

@@ -1,3 +1,5 @@
+import { getFirstAvailableSeller } from '../modules/seller'
+
 export const DEFAULT_WIDTH = 'auto'
 export const DEFAULT_HEIGHT = 'auto'
 export const MAX_WIDTH = 3000
@@ -92,7 +94,11 @@ export function mapCatalogProductToProductSummary(
   const sku = items.find(findAvailableProduct) || items[0]
 
   if (sku) {
-    const [seller = defaultSeller] = sku?.sellers ?? []
+    const seller =
+      getFirstAvailableSeller(sku?.sellers) ??
+      sku?.sellers?.[0] ??
+      defaultSeller
+
     const [referenceId = defaultReference] = sku?.referenceId ?? []
     const catalogImages = sku?.images ?? []
     const normalizedImages = catalogImages.map(