feat: basic rating display

packages/api/mocks/ProductQuery.ts

@@ -257,3 +257,13 @@ export const productSearchFetch = {
     },
   },
 }
+
+export const productRatingFetch = (productId: string) => ({
+  info: `https://storeframework.vtexcommercestable.com.br/api/io/reviews-and-ratings/api/rating/${productId}`,
+  init: undefined,
+  options: { storeCookies: expect.any(Function) },
+  result: {
+    average: 4.5,
+    totalCount: 20,
+  },
+})

packages/api/src/platforms/vtex/resolvers/product.ts

@@ -157,4 +157,5 @@ export const StoreProduct: Record<string, Resolver<Root>> & {
   },
   releaseDate: ({ isVariantOf: { releaseDate } }) => releaseDate ?? '',
   advertisement: ({ isVariantOf: { advertisement } }) => advertisement,
+  rating: (item) => item.rating,
 }

packages/api/src/platforms/vtex/resolvers/query.ts

@@ -74,6 +74,10 @@ export const Query = {
         )
       }
 
+      const rating = await commerce.rating(sku.itemId)
+
+      sku.rating = rating
+
       return sku
     } catch (err) {
       if (slug == null) {
@@ -98,9 +102,15 @@ export const Query = {
         throw new NotFoundError(`No product found for id ${route.id}`)
       }
 
+      const rating = await commerce.rating(product.productId)
+
       const sku = pickBestSku(product.items)
 
-      return enhanceSku(sku, product)
+      const enhancedSku = enhanceSku(sku, product)
+
+      enhancedSku.rating = rating
+
+      return enhancedSku
     }
   },
   collection: (_: unknown, { slug }: QueryCollectionArgs, ctx: Context) => {

packages/api/src/platforms/vtex/resolvers/searchResult.ts

@@ -20,10 +20,10 @@ const isRootFacet = (facet: Facet, isDepartment: boolean, isBrand: boolean) =>
 export const StoreSearchResult: Record<string, Resolver<Root>> = {
   suggestions: async (root, _, ctx) => {
     const {
-      clients: { search },
+      clients: { search, commerce },
     } = ctx
 
-    const { searchArgs } = root
+    const { searchArgs, productSearchPromise } = root
 
     // If there's no search query, suggest the most popular searches.
     if (!searchArgs.query) {
@@ -38,21 +38,26 @@ export const StoreSearchResult: Record<string, Resolver<Root>> = {
       }
     }
 
-    const { productSearchPromise } = root
     const [terms, productSearchResult] = await Promise.all([
       search.suggestedTerms(searchArgs),
       productSearchPromise,
     ])
 
-    const skus = productSearchResult.products
-      .map((product) => {
-        // What determines the presentation of the SKU is the price order
-        // https://help.vtex.com/pt/tutorial/ordenando-imagens-na-vitrine-e-na-pagina-de-produto--tutorials_278
-        const maybeSku = pickBestSku(product.items)
-
-        return maybeSku && enhanceSku(maybeSku, product)
-      })
-      .filter((sku) => !!sku)
+    const skus = await Promise.all(
+      productSearchResult.products
+        .map((product) => {
+          // What determines the presentation of the SKU is the price order
+          // https://help.vtex.com/pt/tutorial/ordenando-imagens-na-vitrine-e-na-pagina-de-produto--tutorials_278
+          const maybeSku = pickBestSku(product.items)
+
+          return maybeSku && enhanceSku(maybeSku, product)
+        })
+        .filter((sku) => !!sku)
+        .map(async (sku) => ({
+          ...sku,
+          rating: await commerce.rating(sku.itemId),
+        }))
+    )
 
     const { searches } = terms
 
@@ -61,7 +66,11 @@ export const StoreSearchResult: Record<string, Resolver<Root>> = {
       products: skus,
     }
   },
-  products: async ({ productSearchPromise }) => {
+  products: async ({ productSearchPromise }, _, ctx) => {
+    const {
+      clients: { commerce },
+    } = ctx
+
     const productSearchResult = await productSearchPromise
 
     const skus = productSearchResult.products
@@ -74,6 +83,13 @@ export const StoreSearchResult: Record<string, Resolver<Root>> = {
       })
       .filter((sku) => !!sku)
 
+    const edges = await Promise.all(
+      skus.map(async (sku, index) => ({
+        node: { ...sku, rating: await commerce.rating(sku.itemId) },
+        cursor: index.toString(),
+      }))
+    )
+
     return {
       pageInfo: {
         hasNextPage: productSearchResult.pagination.after.length > 0,
@@ -82,10 +98,7 @@ export const StoreSearchResult: Record<string, Resolver<Root>> = {
         endCursor: productSearchResult.recordsFiltered.toString(),
         totalCount: productSearchResult.recordsFiltered,
       },
-      edges: skus.map((sku, index) => ({
-        node: sku,
-        cursor: index.toString(),
-      })),
+      edges,
     }
   },
   facets: async ({ searchArgs }, _, ctx) => {

packages/api/src/platforms/vtex/utils/enhanceSku.ts

@@ -1,7 +1,9 @@
 import type { Product, Item } from '../clients/search/types/ProductSearchResult'
 import { sanitizeHtml } from './sanitizeHtml'
 
-export type EnhancedSku = Item & { isVariantOf: Product }
+export type EnhancedSku = Item & { isVariantOf: Product } & {
+  rating: { average: number; totalCount: number }
+}
 
 function sanitizeProduct(product: Product): Product {
   return {
@@ -14,5 +16,9 @@ function sanitizeProduct(product: Product): Product {
 
 export const enhanceSku = (item: Item, product: Product): EnhancedSku => ({
   ...item,
+  rating: {
+    average: 0,
+    totalCount: 0,
+  },
   isVariantOf: sanitizeProduct(product),
 })

packages/api/src/typeDefs/product.graphql

@@ -74,6 +74,10 @@ type StoreProduct {
   Advertisement information about the product.
   """
   advertisement: Advertisement
+  """
+  Product rating.
+  """
+  rating: StoreProductRating!
 }
 
 """

packages/api/src/typeDefs/productRating.graphql

@@ -0,0 +1,10 @@
+type StoreProductRating {
+  """
+  Product average rating.
+  """
+  average: Float!
+  """
+  Product amount of ratings received.
+  """
+  totalCount: Int!
+}

packages/api/test/queries.test.ts

@@ -20,7 +20,11 @@ import {
   pageTypeOfficeDesksFetch,
   pageTypeOfficeFetch,
 } from '../mocks/CollectionQuery'
-import { ProductByIdQuery, productSearchFetch } from '../mocks/ProductQuery'
+import {
+  ProductByIdQuery,
+  productRatingFetch,
+  productSearchFetch,
+} from '../mocks/ProductQuery'
 import {
   RedirectQueryTermTech,
   redirectTermTechFetch,
@@ -138,15 +142,19 @@ test('`collection` query', async () => {
 })
 
 test('`product` query', async () => {
-  const fetchAPICalls = [productSearchFetch, salesChannelStaleFetch]
+  const fetchAPICalls = [
+    productSearchFetch,
+    productRatingFetch('64953394'),
+    salesChannelStaleFetch,
+  ]
 
   mockedFetch.mockImplementation((info, init) =>
     pickFetchAPICallResult(info, init, fetchAPICalls)
   )
 
   const response = await run(ProductByIdQuery)
 
-  expect(mockedFetch).toHaveBeenCalledTimes(2)
+  expect(mockedFetch).toHaveBeenCalledTimes(3)
 
   fetchAPICalls.forEach((fetchAPICall) => {
     expect(mockedFetch).toHaveBeenCalledWith(
@@ -215,6 +223,11 @@ test('`search` query', async () => {
   const fetchAPICalls = [
     productSearchCategory1Fetch,
     attributeSearchCategory1Fetch,
+    productRatingFetch('2791588'),
+    productRatingFetch('44903104'),
+    productRatingFetch('96175310'),
+    productRatingFetch('12405783'),
+    productRatingFetch('24041857'),
     salesChannelStaleFetch,
   ]
 
@@ -224,7 +237,7 @@ test('`search` query', async () => {
 
   const response = await run(SearchQueryFirst5Products)
 
-  expect(mockedFetch).toHaveBeenCalledTimes(3)
+  expect(mockedFetch).toHaveBeenCalledTimes(8)
 
   fetchAPICalls.forEach((fetchAPICall) => {
     expect(mockedFetch).toHaveBeenCalledWith(

packages/components/src/molecules/ProductCard/ProductCardContent.tsx

@@ -128,7 +128,7 @@ const ProductCardContent = forwardRef<HTMLElement, ProductCardContentProps>(
           {includeTaxes && (
             <Label data-fs-product-card-taxes-label>{includeTaxesLabel}</Label>
           )}
-          {ratingValue && (
+          {ratingValue != undefined && (
             <Rating value={ratingValue} icon={<Icon name="Star" />} />
           )}
         </div>

packages/components/src/molecules/ProductTitle/ProductTitle.tsx

@@ -56,9 +56,9 @@ const ProductTitle = forwardRef<HTMLElement, ProductTitleProps>(
           {!!label && label}
         </div>
 
-        {(refNumber || ratingValue) && (
+        {(refNumber || ratingValue != undefined) && (
           <div data-fs-product-title-addendum>
-            {ratingValue && <Rating value={ratingValue} />}
+            {ratingValue != undefined && <Rating value={ratingValue} />}
             {refNumber && (
               <>
                 {refTag} {refNumber}

packages/core/@generated/gql.ts

@@ -12,11 +12,11 @@ import * as types from './graphql'
  * Therefore it is highly recommended to use the babel or swc plugin for production.
  */
 const documents = {
-  '\n  fragment ProductSummary_product on StoreProduct {\n    id: productID\n    slug\n    sku\n    brand {\n      brandName: name\n    }\n    name\n    gtin\n\n    isVariantOf {\n      productGroupID\n      name\n    }\n\n    image {\n      url\n      alternateName\n    }\n\n    brand {\n      name\n    }\n\n    offers {\n      lowPrice\n      lowPriceWithTaxes\n      offers {\n        availability\n        price\n        listPrice\n        listPriceWithTaxes\n        quantity\n        seller {\n          identifier\n        }\n      }\n    }\n\n    additionalProperty {\n      propertyID\n      name\n      value\n      valueReference\n    }\n\n    advertisement {\n      adId\n      adResponseId\n    }\n  }\n':
+  '\n  fragment ProductSummary_product on StoreProduct {\n    id: productID\n    slug\n    sku\n    brand {\n      brandName: name\n    }\n    name\n    gtin\n\n    isVariantOf {\n      productGroupID\n      name\n    }\n\n    image {\n      url\n      alternateName\n    }\n\n    brand {\n      name\n    }\n\n    offers {\n      lowPrice\n      lowPriceWithTaxes\n      offers {\n        availability\n        price\n        listPrice\n        listPriceWithTaxes\n        quantity\n        seller {\n          identifier\n        }\n      }\n    }\n\n    additionalProperty {\n      propertyID\n      name\n      value\n      valueReference\n    }\n\n    advertisement {\n      adId\n      adResponseId\n    }\n\n    rating {\n      average\n      totalCount\n    }\n  }\n':
     types.ProductSummary_ProductFragmentDoc,
   '\n  fragment Filter_facets on StoreFacet {\n    ... on StoreFacetRange {\n      key\n      label\n\n      min {\n        selected\n        absolute\n      }\n\n      max {\n        selected\n        absolute\n      }\n\n      __typename\n    }\n    ... on StoreFacetBoolean {\n      key\n      label\n      values {\n        label\n        value\n        selected\n        quantity\n      }\n\n      __typename\n    }\n  }\n':
     types.Filter_FacetsFragmentDoc,
-  '\n  fragment ProductDetailsFragment_product on StoreProduct {\n    id: productID\n    sku\n    name\n    gtin\n    description\n    unitMultiplier\n    isVariantOf {\n      name\n      productGroupID\n\t\t\tskuVariants {\n        activeVariations\n        slugsMap\n        availableVariations\n      }\n    }\n\n    image {\n      url\n      alternateName\n    }\n\n    brand {\n      name\n    }\n\n    offers {\n      lowPrice\n      lowPriceWithTaxes\n      offers {\n        availability\n        price\n        priceWithTaxes\n        listPrice\n        listPriceWithTaxes\n        seller {\n          identifier\n        }\n      }\n    }\n\n    additionalProperty {\n      propertyID\n      name\n      value\n      valueReference\n    }\n\n    # Contains necessary info to add this item to cart\n    ...CartProductItem\n  }\n':
+  '\n  fragment ProductDetailsFragment_product on StoreProduct {\n    id: productID\n    sku\n    name\n    gtin\n    description\n    unitMultiplier\n    isVariantOf {\n      name\n      productGroupID\n\t\t\tskuVariants {\n        activeVariations\n        slugsMap\n        availableVariations\n      }\n    }\n\n    image {\n      url\n      alternateName\n    }\n\n    brand {\n      name\n    }\n\n    offers {\n      lowPrice\n      lowPriceWithTaxes\n      offers {\n        availability\n        price\n        priceWithTaxes\n        listPrice\n        listPriceWithTaxes\n        seller {\n          identifier\n        }\n      }\n    }\n\n    additionalProperty {\n      propertyID\n      name\n      value\n      valueReference\n    }\n\n    rating {\n      average\n      totalCount\n    }\n\n    # Contains necessary info to add this item to cart\n    ...CartProductItem\n  }\n':
     types.ProductDetailsFragment_ProductFragmentDoc,
   '\n  fragment ProductSKUMatrixSidebarFragment_product on StoreProduct {\n    id: productID\n    isVariantOf {\n      name\n      productGroupID\n      skuVariants {\n        activeVariations\n        slugsMap\n        availableVariations\n        allVariantProducts {\n\t\t\t\t\tsku\n          name\n          image {\n            url\n            alternateName\n          }\n          offers {\n            highPrice\n            lowPrice\n            lowPriceWithTaxes\n            offerCount\n            priceCurrency\n            offers {\n              listPrice\n              listPriceWithTaxes\n              sellingPrice\n              priceCurrency\n              price\n              priceWithTaxes\n              priceValidUntil\n              itemCondition\n              availability\n              quantity\n            }\n          }\n          additionalProperty {\n            propertyID\n            value\n            name\n            valueReference\n          }\n        }\n      }\n    }\n  }\n':
     types.ProductSkuMatrixSidebarFragment_ProductFragmentDoc,
@@ -66,7 +66,7 @@ const documents = {
  * The gql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
 export function gql(
-  source: '\n  fragment ProductSummary_product on StoreProduct {\n    id: productID\n    slug\n    sku\n    brand {\n      brandName: name\n    }\n    name\n    gtin\n\n    isVariantOf {\n      productGroupID\n      name\n    }\n\n    image {\n      url\n      alternateName\n    }\n\n    brand {\n      name\n    }\n\n    offers {\n      lowPrice\n      lowPriceWithTaxes\n      offers {\n        availability\n        price\n        listPrice\n        listPriceWithTaxes\n        quantity\n        seller {\n          identifier\n        }\n      }\n    }\n\n    additionalProperty {\n      propertyID\n      name\n      value\n      valueReference\n    }\n\n    advertisement {\n      adId\n      adResponseId\n    }\n  }\n'
+  source: '\n  fragment ProductSummary_product on StoreProduct {\n    id: productID\n    slug\n    sku\n    brand {\n      brandName: name\n    }\n    name\n    gtin\n\n    isVariantOf {\n      productGroupID\n      name\n    }\n\n    image {\n      url\n      alternateName\n    }\n\n    brand {\n      name\n    }\n\n    offers {\n      lowPrice\n      lowPriceWithTaxes\n      offers {\n        availability\n        price\n        listPrice\n        listPriceWithTaxes\n        quantity\n        seller {\n          identifier\n        }\n      }\n    }\n\n    additionalProperty {\n      propertyID\n      name\n      value\n      valueReference\n    }\n\n    advertisement {\n      adId\n      adResponseId\n    }\n\n    rating {\n      average\n      totalCount\n    }\n  }\n'
 ): typeof import('./graphql').ProductSummary_ProductFragmentDoc
 /**
  * The gql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
@@ -78,7 +78,7 @@ export function gql(
  * The gql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
 export function gql(
-  source: '\n  fragment ProductDetailsFragment_product on StoreProduct {\n    id: productID\n    sku\n    name\n    gtin\n    description\n    unitMultiplier\n    isVariantOf {\n      name\n      productGroupID\n\t\t\tskuVariants {\n        activeVariations\n        slugsMap\n        availableVariations\n      }\n    }\n\n    image {\n      url\n      alternateName\n    }\n\n    brand {\n      name\n    }\n\n    offers {\n      lowPrice\n      lowPriceWithTaxes\n      offers {\n        availability\n        price\n        priceWithTaxes\n        listPrice\n        listPriceWithTaxes\n        seller {\n          identifier\n        }\n      }\n    }\n\n    additionalProperty {\n      propertyID\n      name\n      value\n      valueReference\n    }\n\n    # Contains necessary info to add this item to cart\n    ...CartProductItem\n  }\n'
+  source: '\n  fragment ProductDetailsFragment_product on StoreProduct {\n    id: productID\n    sku\n    name\n    gtin\n    description\n    unitMultiplier\n    isVariantOf {\n      name\n      productGroupID\n\t\t\tskuVariants {\n        activeVariations\n        slugsMap\n        availableVariations\n      }\n    }\n\n    image {\n      url\n      alternateName\n    }\n\n    brand {\n      name\n    }\n\n    offers {\n      lowPrice\n      lowPriceWithTaxes\n      offers {\n        availability\n        price\n        priceWithTaxes\n        listPrice\n        listPriceWithTaxes\n        seller {\n          identifier\n        }\n      }\n    }\n\n    additionalProperty {\n      propertyID\n      name\n      value\n      valueReference\n    }\n\n    rating {\n      average\n      totalCount\n    }\n\n    # Contains necessary info to add this item to cart\n    ...CartProductItem\n  }\n'
 ): typeof import('./graphql').ProductDetailsFragment_ProductFragmentDoc
 /**
  * The gql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.