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)