diff --git a/ikas-theme/src/components/product-reviews/detail/index.tsx b/ikas-theme/src/components/product-reviews/detail/index.tsx
index eaa2e09..5bd180e 100644
--- a/ikas-theme/src/components/product-reviews/detail/index.tsx
+++ b/ikas-theme/src/components/product-reviews/detail/index.tsx
@@ -1,15 +1,12 @@
import React from "react";
import { observer } from "mobx-react-lite";
-// Types
import { ProductReviewsProps } from "src/components/__generated__/types";
-// Components
import Reviews from "./reviews";
import ReviewsSummary from "./review-summary";
import Pagination from "src/components/components/pagination";
-// Hooks
import useProductReviews from "../useProductReviews";
const Detail = (props: ProductReviewsProps) => {
diff --git a/ikas-theme/src/components/product-reviews/detail/review-form/index.tsx b/ikas-theme/src/components/product-reviews/detail/review-form/index.tsx
index d8519e0..546514c 100644
--- a/ikas-theme/src/components/product-reviews/detail/review-form/index.tsx
+++ b/ikas-theme/src/components/product-reviews/detail/review-form/index.tsx
@@ -6,7 +6,6 @@ import {
CustomerReviewForm,
} from "@ikas/storefront";
-// Compontents
import AlertComponent from "src/components/components/alert";
import FormItem from "src/components/components/form/form-item";
import Form from "src/components/components/form";
@@ -15,10 +14,8 @@ import TextArea from "src/components/components/textarea";
import Button from "src/components/components/button";
import Stars from "../stars";
-// Namespace for translation (i18n)
import { NS } from "src/components/product-reviews";
-// Styles
import * as S from "./style";
const REVIEW_TITLE_MAX_LENGTH = 64;
@@ -81,7 +78,9 @@ const ReviewForm = (props: Props) => {
}
}, [visible]);
- return visible ? (
+ if (!visible) return null;
+
+ return (
{t(`${NS}:formTitle`)}
@@ -148,7 +147,7 @@ const ReviewForm = (props: Props) => {
)}
- ) : null;
+ );
};
export default observer(ReviewForm);
diff --git a/ikas-theme/src/components/product-reviews/detail/review-summary/index.tsx b/ikas-theme/src/components/product-reviews/detail/review-summary/index.tsx
index 9ec407b..17556ae 100644
--- a/ikas-theme/src/components/product-reviews/detail/review-summary/index.tsx
+++ b/ikas-theme/src/components/product-reviews/detail/review-summary/index.tsx
@@ -1,22 +1,16 @@
import React, { useState } from "react";
import { observer } from "mobx-react-lite";
import { useTranslation } from "@ikas/storefront";
-
-// Types
import { ProductReviewsProps } from "src/components/__generated__/types";
-// Components
import ReviewForm from "../review-form";
import Stars, { type StarType } from "../stars";
import Button from "src/components/components/button";
-// Hooks
import useProductReviews from "src/components/product-reviews/useProductReviews";
-// Namespace
-import { NS } from "../../";
+import { NS } from "src/components/product-reviews";
-// Styles
import * as S from "./style";
// prettier-ignore
@@ -42,15 +36,17 @@ const ReviewsSummary = (props: Props) => {
const isWriteReviewButtonVisible =
!isWriteReviewButtonHidden && productDetail.isCustomerReviewEnabled;
+ const isPreviewVisible =
+ customerReviewList && customerReviewList.data?.length > 0;
+
return (
- {customerReviewList && customerReviewList.data?.length ? (
+ {isPreviewVisible ? (
{
{t(`${NS}:basedOnXReviews`, {
- x: productDetail.reviewCount || "0",
- })}
+ x: productDetail.reviewCount || "0" })}
) : (
diff --git a/ikas-theme/src/components/product-reviews/detail/review-summary/style.ts b/ikas-theme/src/components/product-reviews/detail/review-summary/style.ts
index cd57c4e..284012c 100644
--- a/ikas-theme/src/components/product-reviews/detail/review-summary/style.ts
+++ b/ikas-theme/src/components/product-reviews/detail/review-summary/style.ts
@@ -25,12 +25,12 @@ export const Preview = styled.div`
export const PreviewDesciption = styled.div`
color: ${(props) => props.theme.color.secondaryText};
- font-size: 1rem;
+ font-size: ${(props) => props.theme.fontSize.base};
line-height: 1.5rem;
`;
export const PreviewEmpty = styled.div`
color: ${(props) => props.theme.color.secondaryText};
- font-size: 1rem;
+ font-size: ${(props) => props.theme.fontSize.base};
line-height: 1.5rem;
`;
diff --git a/ikas-theme/src/components/product-reviews/detail/reviews/index.tsx b/ikas-theme/src/components/product-reviews/detail/reviews/index.tsx
index 321057f..33458a3 100644
--- a/ikas-theme/src/components/product-reviews/detail/reviews/index.tsx
+++ b/ikas-theme/src/components/product-reviews/detail/reviews/index.tsx
@@ -1,13 +1,10 @@
import React from "react";
import { observer } from "mobx-react-lite";
-// Components
import Review from "./review";
-// Hooks
import useProductReviews from "src/components/product-reviews/useProductReviews";
-// Styles
import * as S from "./style";
// prettier-ignore
@@ -18,13 +15,17 @@ type ReviewProps = {
const Reviews = (props: ReviewProps) => {
const { customerReviewList } = props;
- return customerReviewList && customerReviewList.data?.length > 0 ? (
+ const isVisible = customerReviewList && customerReviewList.data?.length > 0;
+
+ if (!isVisible) return null;
+
+ return (
{customerReviewList.data.map((review, index) => (
))}
- ) : null;
+ );
};
export default observer(Reviews);
diff --git a/ikas-theme/src/components/product-reviews/detail/reviews/review/index.tsx b/ikas-theme/src/components/product-reviews/detail/reviews/review/index.tsx
index 0eaafed..164c979 100644
--- a/ikas-theme/src/components/product-reviews/detail/reviews/review/index.tsx
+++ b/ikas-theme/src/components/product-reviews/detail/reviews/review/index.tsx
@@ -2,16 +2,12 @@ import React from "react";
import { observer } from "mobx-react-lite";
import { IkasCustomerReview, useTranslation } from "@ikas/storefront";
-// Components
import Stars from "src/components/product-reviews/detail/stars";
-// Utils
-import getMonthName from "src/utils/getMonthName";
-
-// Namespace
import { NS } from "src/components/product-reviews";
-// Styles
+import getMonthName from "src/utils/getMonthName";
+
import * as S from "./style";
type Props = {
diff --git a/ikas-theme/src/components/product-reviews/detail/reviews/review/style.ts b/ikas-theme/src/components/product-reviews/detail/reviews/review/style.ts
index b132663..74ede73 100644
--- a/ikas-theme/src/components/product-reviews/detail/reviews/review/style.ts
+++ b/ikas-theme/src/components/product-reviews/detail/reviews/review/style.ts
@@ -23,13 +23,12 @@ export const Header = styled.header`
`;
export const Title = styled.h3`
- font-size: 1.125rem;
+ font-size: ${(props) => props.theme.fontSize.lg};
line-height: 1.75rem;
font-weight: 700;
@media (min-width: ${breakpoints.md}) {
- font-size: 1.25rem;
- line-height: 1.75rem;
+ font-size: ${(props) => props.theme.fontSize.xl};
}
`;
diff --git a/ikas-theme/src/components/product-reviews/detail/stars/index.tsx b/ikas-theme/src/components/product-reviews/detail/stars/index.tsx
index ce85821..bd50e89 100644
--- a/ikas-theme/src/components/product-reviews/detail/stars/index.tsx
+++ b/ikas-theme/src/components/product-reviews/detail/stars/index.tsx
@@ -1,10 +1,8 @@
import React, { useState } from "react";
-// Components
import ImStarEmpty from "src/components/svg/im-star-empty";
import ImStarFull from "src/components/svg/im-star-full";
-// Styles
import * as S from "./style";
export type StarType = 0 | 1 | 2 | 3 | 4 | 5;
diff --git a/ikas-theme/src/components/product-reviews/index.tsx b/ikas-theme/src/components/product-reviews/index.tsx
index e911097..a401535 100644
--- a/ikas-theme/src/components/product-reviews/index.tsx
+++ b/ikas-theme/src/components/product-reviews/index.tsx
@@ -1,15 +1,11 @@
import React from "react";
import { observer } from "mobx-react-lite";
import { useTranslation } from "@ikas/storefront";
-
-// Types
import { ProductReviewsProps } from "../__generated__/types";
-// Components
import { Container } from "src/components/components/container";
import Detail from "./detail";
-// Styles
import * as S from "./style";
export const NS = "product-reviews"; // for translation (i18n)