From 5a2fb2090e81abb2f3dc0debb0eaee67e3621b5f Mon Sep 17 00:00:00 2001 From: Prashant Singh Date: Wed, 12 Apr 2023 15:52:34 +0100 Subject: [PATCH 1/5] add yotpo and algolia rating filter --- .env.example | 6 + next.config.js | 4 +- package.json | 8 +- .../featured-products/FeaturedProducts.tsx | 4 +- src/components/product/ProductSummary.tsx | 2 + src/components/reviews/yotpo/Reviews.tsx | 117 + src/components/search/Hit.tsx | 26 + src/components/search/SearchHit.ts | 6 + src/components/search/SearchModal.tsx | 4 +- .../ProductSpecification.tsx | 5 + .../RatingRefinement.tsx | 57 + src/lib/resolve-reviews-field-env.ts | 15 + src/lib/resolve-yotpo-env.ts | 19 + src/pages/products/[productId].tsx | 2 + yarn.lock | 7904 +++++++++++++++++ 15 files changed, 8170 insertions(+), 9 deletions(-) create mode 100644 src/components/reviews/yotpo/Reviews.tsx create mode 100644 src/components/search/product-specification/RatingRefinement.tsx create mode 100644 src/lib/resolve-reviews-field-env.ts create mode 100644 src/lib/resolve-yotpo-env.ts create mode 100644 yarn.lock diff --git a/.env.example b/.env.example index 6d645900..04c77094 100644 --- a/.env.example +++ b/.env.example @@ -16,3 +16,9 @@ NEXT_PUBLIC_DEMO_PROMO_ID= NEXT_PUBLIC_DEMO_NODE_ID= NEXT_PUBLIC_DEFAULT_CURRENCY_CODE= NEXT_PUBLIC_STRIPE_ACCOUNT_ID= +NEXT_PUBLIC_ENABLE_RATING= +NEXT_PUBLIC_ALGOLIA_AVG_RATING_FIELD=ep_average_rating +NEXT_PUBLIC_ALGOLIA_REVIEW_COUNT_FIELD=ep_number_of_reviews +NEXT_PUBLIC_ENABLE_YOTPO= +NEXT_PUBLIC_YOTPO_APP_KEY= +NEXT_PUBLIC_DISABLE_IMAGE_OPTIMIZATION= diff --git a/next.config.js b/next.config.js index 625559c7..53d09776 100644 --- a/next.config.js +++ b/next.config.js @@ -5,9 +5,9 @@ **/ const nextConfig = { images: { - domains: ["files-eu.epusercontent.com"], + domains: ["files-eu.epusercontent.com", "asset1.cxnmarksandspencer.com"], + unoptimized: process.env.NEXT_PUBLIC_DISABLE_IMAGE_OPTIMIZATION == "true", }, - experimental: { images: { allowFutureImage: true } }, i18n: { locales: ["en"], defaultLocale: "en", diff --git a/package.json b/package.json index 2e66e5ee..ed1c64f1 100644 --- a/package.json +++ b/package.json @@ -25,6 +25,7 @@ "@moltin/sdk": "^18.1.0", "@stripe/react-stripe-js": "^1.11.0", "@stripe/stripe-js": "^1.38.1", + "@types/react-star-ratings": "^2.3.0", "@types/react-stripe-elements": "^6.0.6", "algoliasearch": "^4.14.2", "braintree-web": "^3.87.0", @@ -40,10 +41,11 @@ "react": "^18.2.0", "react-device-detect": "^2.2.2", "react-dom": "^18.2.0", - "sass": "^1.55.0", "react-instantsearch-hooks-server": "6.38.1", "react-instantsearch-hooks-web": "6.38.1", + "react-star-ratings": "^2.3.0", "rxjs": "^7.5.7", + "sass": "^1.55.0", "yup": "^1.0.0-beta.7", "zlib": "^1.0.5" }, @@ -71,7 +73,7 @@ "typescript": "4.7.4" }, "resolutions": { - "@types/react": "17.0.2", - "@types/react-dom": "17.0.2" + "@types/react": "18.0.33", + "@types/react-dom": "18.0.11" } } diff --git a/src/components/featured-products/FeaturedProducts.tsx b/src/components/featured-products/FeaturedProducts.tsx index 1a94337a..f9c75f6b 100644 --- a/src/components/featured-products/FeaturedProducts.tsx +++ b/src/components/featured-products/FeaturedProducts.tsx @@ -7,6 +7,7 @@ import { connectProductsWithMainImages } from "../../lib/product-util"; import { ArrowForwardIcon, ViewOffIcon } from "@chakra-ui/icons"; import { globalBaseWidth } from "../../styles/theme"; import { ChakraNextImage } from "../ChakraNextImage"; +import { Ratings } from "../reviews/yotpo/Reviews"; interface IFeaturedProductsBaseProps { title: string; @@ -104,7 +105,7 @@ const FeaturedProducts = (props: IFeaturedProductsProps): JSX.Element => { p={4} flex={{ base: "100%", md: "50%", lg: "25%" }} key={product.id} - href="/category" + href={`/products/${product.id}`} > {product.main_image?.link.href ? ( @@ -135,6 +136,7 @@ const FeaturedProducts = (props: IFeaturedProductsProps): JSX.Element => { {product.attributes.name} + {product.meta.display_price?.without_tax.formatted} diff --git a/src/components/product/ProductSummary.tsx b/src/components/product/ProductSummary.tsx index 6696ce06..88ec6545 100644 --- a/src/components/product/ProductSummary.tsx +++ b/src/components/product/ProductSummary.tsx @@ -2,6 +2,7 @@ import { Box, Heading, Flex } from "@chakra-ui/react"; import type { ProductResponse } from "@moltin/sdk"; import { useContext } from "react"; import { changingSkuStyle, ProductContext } from "../../lib/product-util"; +import { Ratings } from "../reviews/yotpo/Reviews"; import Price from "./Price"; import StrikePrice from "./StrikePrice"; @@ -25,6 +26,7 @@ const ProductSummary = ({ product }: IProductSummary): JSX.Element => { > {attributes.name} + {display_price && ( { + useEffect(() => { + if (yotpoEnv.enable && typeof window.yotpo !== "undefined") { + window.yotpo.refreshWidgets(); + } + }, [product.id]); + + const { + id, + attributes, + meta: { display_price }, + } = product; + + return yotpoEnv.enable ? ( + +