feat: basic rating display

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.

packages/core/@generated/graphql.ts

@@ -156,6 +156,19 @@ export type DeliveryIds = {
   warehouseId: Maybe<Scalars['String']['output']>
 }
 
+export type ICreateProductReview = {
+  /** Product ID. */
+  productId: Scalars['String']['input']
+  /** Review rating. */
+  rating: Scalars['Int']['input']
+  /** Review author name. */
+  reviewerName: Scalars['String']['input']
+  /** Review content. */
+  text: Scalars['String']['input']
+  /** Review title. */
+  title: Scalars['String']['input']
+}
+
 export type IGeoCoordinates = {
   /** The latitude of the geographic coordinates. */
   latitude: Scalars['Float']['input']
@@ -954,6 +967,8 @@ export type StoreProduct = {
   offers: StoreAggregateOffer
   /** Product ID, such as [ISBN](https://www.isbn-international.org/content/what-isbn) or similar global IDs. */
   productID: Scalars['String']['output']
+  /** Product rating. */
+  rating: StoreProductRating
   /** The product's release date. Formatted using https://en.wikipedia.org/wiki/ISO_8601 */
   releaseDate: Scalars['String']['output']
   /** Array with review information. */
@@ -1008,6 +1023,13 @@ export type StoreProductGroup = {
   skuVariants: Maybe<SkuVariants>
 }
 
+export type StoreProductRating = {
+  /** Product average rating. */
+  average: Scalars['Float']['output']
+  /** Product amount of ratings received. */
+  totalCount: Scalars['Int']['output']
+}
+
 /** Properties that can be associated with products and products groups. */
 export type StorePropertyValue = {
   /** Property name. */
@@ -1159,6 +1181,7 @@ export type ProductSummary_ProductFragment = {
     valueReference: any
   }>
   advertisement: { adId: string; adResponseId: string } | null
+  rating: { average: number; totalCount: number }
 }
 
 type Filter_Facets_StoreFacetBoolean_Fragment = {
@@ -1221,6 +1244,7 @@ export type ProductDetailsFragment_ProductFragment = {
     value: any
     valueReference: any
   }>
+  rating: { average: number; totalCount: number }
 }
 
 export type ProductSkuMatrixSidebarFragment_ProductFragment = {
@@ -1358,6 +1382,7 @@ export type ServerProductQueryQuery = {
       value: any
       valueReference: any
     }>
+    rating: { average: number; totalCount: number }
   }
 }
 
@@ -1564,6 +1589,7 @@ export type ClientManyProductsQueryQuery = {
             valueReference: any
           }>
           advertisement: { adId: string; adResponseId: string } | null
+          rating: { average: number; totalCount: number }
         }
       }>
     }
@@ -1657,6 +1683,7 @@ export type ClientProductQueryQuery = {
       value: any
       valueReference: any
     }>
+    rating: { average: number; totalCount: number }
   }
 }
 
@@ -1697,6 +1724,7 @@ export type ClientSearchSuggestionsQueryQuery = {
           valueReference: any
         }>
         advertisement: { adId: string; adResponseId: string } | null
+        rating: { average: number; totalCount: number }
       }>
     }
     products: { pageInfo: { totalCount: number } }
@@ -1836,6 +1864,10 @@ export const ProductSummary_ProductFragmentDoc = new TypedDocumentString(
     adId
     adResponseId
   }
+  rating {
+    average
+    totalCount
+  }
 }
     `,
   { fragmentName: 'ProductSummary_product' }
@@ -1950,6 +1982,10 @@ export const ProductDetailsFragment_ProductFragmentDoc =
     value
     valueReference
   }
+  rating {
+    average
+    totalCount
+  }
   ...CartProductItem
 }
     fragment CartProductItem on StoreProduct {
@@ -2226,7 +2262,7 @@ export const ServerCollectionPageQueryDocument = {
 export const ServerProductQueryDocument = {
   __meta__: {
     operationName: 'ServerProductQuery',
-    operationHash: '46103bee661405bde706d72126fdbf9b0a0c9e6e',
+    operationHash: '0a3f449b2a88dc1f692fe1ae981370be53a02cce',
   },
 } as unknown as TypedDocumentString<
   ServerProductQueryQuery,
@@ -2262,7 +2298,7 @@ export const ClientAllVariantProductsQueryDocument = {
 export const ClientManyProductsQueryDocument = {
   __meta__: {
     operationName: 'ClientManyProductsQuery',
-    operationHash: '14148671fbf53498fad5c600ee87765920145019',
+    operationHash: 'e1ccf9e73ec6c0b8580c6e789d8a2af7618fb1eb',
   },
 } as unknown as TypedDocumentString<
   ClientManyProductsQueryQuery,
@@ -2280,7 +2316,7 @@ export const ClientProductGalleryQueryDocument = {
 export const ClientProductQueryDocument = {
   __meta__: {
     operationName: 'ClientProductQuery',
-    operationHash: '7d121ef8d4dc99174e64e4429a9b977b8bbebed8',
+    operationHash: 'e1599e2efe3664aad09c026919c1c104b4085f00',
   },
 } as unknown as TypedDocumentString<
   ClientProductQueryQuery,
@@ -2289,7 +2325,7 @@ export const ClientProductQueryDocument = {
 export const ClientSearchSuggestionsQueryDocument = {
   __meta__: {
     operationName: 'ClientSearchSuggestionsQuery',
-    operationHash: '47e48eaee91d16a4237eb2c1241bc2ed3e2ad9bb',
+    operationHash: '3599746571e06012a61a20f92d30ede456564c4b',
   },
 } as unknown as TypedDocumentString<
   ClientSearchSuggestionsQueryQuery,

packages/core/api/index.ts

@@ -12,6 +12,7 @@ export type {
   StoreProductGroupRoot,
   StoreProductRoot,
   StoreOrganizationRoot,
+  StoreProductRating,
 } from '@faststore/api'
 
 export * from '../@generated/graphql'

packages/core/discovery.config.default.js

@@ -30,6 +30,7 @@ module.exports = {
     hideUnavailableItems: false,
     showSponsored: false,
     incrementAddress: true,
+    reviewsAndRatings: true,
   },
 
   // Default session

packages/core/src/components/product/ProductCard/ProductCard.tsx

@@ -12,6 +12,7 @@ import NextLink from 'next/link'
 import { Image } from 'src/components/ui/Image'
 import { useFormattedPrice } from 'src/sdk/product/useFormattedPrice'
 import { useProductLink } from 'src/sdk/product/useProductLink'
+import { api as apiConfig } from 'discovery.config'
 
 type Variant = 'wide' | 'default'
 
@@ -88,6 +89,7 @@ function ProductCard({
       lowPriceWithTaxes,
       offers: [{ listPrice: listPriceBase, availability, listPriceWithTaxes }],
     },
+    rating,
   } = product
 
   const linkProps = {
@@ -146,7 +148,7 @@ function ProductCard({
           listPrice: listPrice,
           formatter: useFormattedPrice,
         }}
-        ratingValue={ratingValue}
+        ratingValue={apiConfig.reviewsAndRatings ? rating.average : undefined}
         outOfStock={outOfStock}
         onButtonClick={onButtonClick}
         linkProps={linkProps}
@@ -211,6 +213,11 @@ export const fragment = gql(`
       adId
       adResponseId
     }
+
+    rating {
+      average
+      totalCount
+    }
   }
 `)
 

packages/core/src/components/sections/ProductDetails/ProductDetails.tsx

@@ -15,6 +15,7 @@ import { getOverridableSection } from '../../../sdk/overrides/getOverriddenSecti
 import { useOverrideComponents } from '../../../sdk/overrides/OverrideContext'
 import { usePDP } from '../../../sdk/overrides/PageProvider'
 import { ProductDetailsDefaultComponents } from './DefaultComponents'
+import { api as apiConfig } from 'discovery.config'
 
 export interface ProductDetailsProps {
   productTitle: {
@@ -133,6 +134,7 @@ function ProductDetails({
       lowPrice,
       lowPriceWithTaxes,
     },
+    rating,
   } = product
 
   useEffect(() => {
@@ -186,6 +188,9 @@ function ProductDetails({
               // Maybe now it's worth to make title always a h1 and receive only the name, as it would be easier for users to override.
               title={<h1>{name}</h1>}
               {...ProductTitle.props}
+              ratingValue={
+                apiConfig.reviewsAndRatings ? rating.average : undefined
+              }
               label={
                 showDiscountBadge && (
                   <DiscountBadge.Component
@@ -358,6 +363,11 @@ export const fragment = gql(`
       valueReference
     }
 
+    rating {
+      average
+      totalCount
+    }
+
     # Contains necessary info to add this item to cart
     ...CartProductItem
   }

packages/core/src/components/sections/ProductGallery/section.module.scss

@@ -28,6 +28,7 @@
     @import "@faststore/ui/src/components/molecules/DiscountBadge/styles.scss";
     @import "@faststore/ui/src/components/molecules/InputField/styles.scss";
     @import "@faststore/ui/src/components/molecules/LinkButton/styles.scss";
+    @import "@faststore/ui/src/components/molecules/Rating/styles";
     @import "@faststore/ui/src/components/molecules/ProductCard/styles.scss";
     @import "@faststore/ui/src/components/molecules/ProductCardSkeleton/styles";
     @import "@faststore/ui/src/components/molecules/ProductPrice/styles.scss";