@riosst100/pwa-marketplace 2.9.7 → 3.0.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@riosst100/pwa-marketplace",
   "author": "riosst100@gmail.com",
-  "version": "2.9.7",
+  "version": "3.0.0",
   "main": "src/index.js",
   "pwa-studio": {
     "targets": {

package/src/componentOverrideMapping.js

@@ -1,4 +1,6 @@
 module.exports = componentOverrideMapping = {
+    [`@magento/venia-ui/lib/components/CartPage/PriceSummary/priceSummary.js`]: '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/CartPage/PriceSummary/priceSummary.js',
+    [`@magento/peregrine/lib/talons/CartPage/PriceSummary/priceSummaryFragments.gql.js`]: '@riosst100/pwa-marketplace/src/overwrites/peregrine/lib/talons/CartPage/PriceSummary/priceSummaryFragments.gql.js',
     [`@magento/venia-ui/lib/components/Adapter/adapter.js`]: '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/Adapter/adapter.js',
     [`@magento/venia-ui/lib/components/ToastContainer/toast.module.css`]: '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/ToastContainer/toast.module.css',
     [`@magento/venia-ui/lib/components/ToastContainer/toastContainer.module.css`]: '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/ToastContainer/toastContainer.module.css',
@@ -87,7 +89,6 @@ module.exports = componentOverrideMapping = {
     [`@magento/peregrine/lib/talons/ProductOptions/useTile.js`]: '@riosst100/pwa-marketplace/src/overwrites/peregrine/lib/talons/ProductOptions/useTile.js',
     [`@magento/peregrine/lib/talons/ProductImageCarousel/useProductImageCarousel.js`]: '@riosst100/pwa-marketplace/src/overwrites/peregrine/lib/talons/ProductImageCarousel/useProductImageCarousel.js',
     [`@magento/peregrine/lib/talons/OrderHistoryPage/orderHistoryPage.gql.js`]: '@riosst100/pwa-marketplace/src/overwrites/peregrine/lib/talons/OrderHistoryPage/orderHistoryPage.gql.js',
-    // Added overrides to fix TypeError in useOrderRow and to ensure required GQL queries are present
     [`@magento/peregrine/lib/talons/OrderHistoryPage/useOrderRow.js`]: '@riosst100/pwa-marketplace/src/overwrites/peregrine/lib/talons/OrderHistoryPage/useOrderRow.js',
     [`@magento/peregrine/lib/talons/OrderHistoryPage/orderRow.gql.js`]: '@riosst100/pwa-marketplace/src/overwrites/peregrine/lib/talons/OrderHistoryPage/orderRow.gql.js'
 };

package/src/components/FilterContent/filterContent.js

@@ -31,6 +31,10 @@ const FilterContent = props => {
     const [searchQuery, setSearchQuery] = useState('');
 
     const { search } = useLocation();
+
+    useEffect(() => {
+        window.scrollTo(0, 0);
+    }, []);
     
     const sortProps = useCustomSort({ sortFromSearch: false, defaultSort: {
         sortText: 'All (A-Z)',

package/src/components/RMAPage/RMADetail.js

@@ -69,7 +69,7 @@ const RMADetail = () => {
             timeStamp: m.created_at,
             senderName: m.sender_name || ''
         }));
-        return mapped.length > 0 ? mapped : dummyChat;
+        return mapped.length > 0 ? mapped : [];
     }, [rmaDetail]);
 
     const formatted = useMemo(() => {

package/src/components/ShopBy/shopBy.js

@@ -1,4 +1,4 @@
-import React, { Fragment, Suspense, useMemo, useRef, useState } from 'react';
+import React, { Fragment, useEffect, Suspense, useMemo, useRef, useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { array, number, shape, string } from 'prop-types';
 
@@ -84,6 +84,9 @@ const ShopBy = props => {
     //     attributesBlock,
     //     category,
     // } = talonProps;
+    useEffect(() => {
+        window.scrollTo(0, 0);
+    }, []);
     
     const [active, setActive] = useState('all')
     const [activeTab, setActiveTab] = useState('all');

package/src/overwrites/peregrine/lib/talons/CartPage/PriceSummary/priceSummaryFragments.gql.js

@@ -0,0 +1,54 @@
+import { gql } from '@apollo/client';
+
+import { DiscountSummaryFragment } from '@magento/peregrine/lib/talons/CartPage/PriceSummary/discountSummary.gql';
+import { GiftCardSummaryFragment } from '@magento/peregrine/lib/talons/CartPage/PriceSummary/queries/giftCardSummary';
+import { GiftOptionsSummaryFragment } from '@magento/peregrine/lib/talons/CartPage/PriceSummary/queries/giftOptionsSummary';
+import { ShippingSummaryFragment } from '@magento/peregrine/lib/talons/CartPage/PriceSummary/shippingSummary.gql';
+import { TaxSummaryFragment } from '@magento/peregrine/lib/talons/CartPage/PriceSummary/taxSummary.gql';
+
+export const GrandTotalFragment = gql`
+    fragment GrandTotalFragment on CartPrices {
+        grand_total {
+            currency
+            value
+        }
+    }
+`;
+
+export const PriceSummaryFragment = gql`
+    fragment PriceSummaryFragment on Cart {
+        id
+        # eslint-disable-next-line @graphql-eslint/require-id-when-available
+        items {
+            uid
+            quantity
+        }
+        ...ShippingSummaryFragment
+        prices {
+            ...TaxSummaryFragment
+            ...DiscountSummaryFragment
+            ...GrandTotalFragment
+            subtotal_excluding_tax {
+                currency
+                value
+            }
+            subtotal_including_tax {
+                currency
+                value
+            }
+        }
+        payment_fees {
+            title
+            value
+            currency
+        }
+        ...GiftCardSummaryFragment
+        ...GiftOptionsSummaryFragment
+    }
+    ${DiscountSummaryFragment}
+    ${GiftCardSummaryFragment}
+    ${GiftOptionsSummaryFragment}
+    ${GrandTotalFragment}
+    ${ShippingSummaryFragment}
+    ${TaxSummaryFragment}
+`;

package/src/overwrites/peregrine/lib/talons/CartPage/PriceSummary/usePriceSummary.js

@@ -28,7 +28,8 @@ const flattenData = data => {
         giftCards: data.cart.applied_gift_cards,
         giftOptions: data.cart.prices.gift_options,
         taxes: data.cart.prices.applied_taxes,
-        shipping: data.cart.shipping_addresses
+        shipping: data.cart.shipping_addresses,
+        payment_fees: data.cart.payment_fees
     };
 };
 
@@ -99,9 +100,6 @@ export const usePriceSummary = (props = {}) => {
 
         await createSellerCart({ initCheckoutSplitCart, sellerUrl });
 
-        console.log('initCheckoutSplitCartData',initCheckoutSplitCartData)
-        console.log('fetchCartId',fetchCartId)
-
         await removeCart();
         await apolloClient.clearCacheData(apolloClient, 'cart');
 

package/src/overwrites/peregrine/lib/talons/ProductFullDetail/productReview.gql.js

@@ -0,0 +1,89 @@
+import { gql } from '@apollo/client';
+
+const GET_PRODUCT_REVIEW_RATINGS_METADATA = gql`
+	query getProductReviewRatingsMetadata {
+		productReviewRatingsMetadata {
+			items {
+				id
+				name
+				values {
+					value
+					value_id
+				}
+			}
+		}
+	}
+`;
+
+const CREATE_PRODUCT_REVIEW = gql`
+	mutation CreateProductReview($input: CreateProductReviewInput!) {
+		createProductReview(input: $input) {
+			review {
+				average_rating
+				created_at
+				nickname
+				product {
+					uuid: uid
+					uid
+					name
+					sku
+				}
+				ratings_breakdown {
+					name
+					value
+				}
+				summary
+				text
+			}
+		}
+	}
+`;
+
+const GET_PRODUCT_REVIEWS = gql`
+	query getProductReviews($url_key: String) {
+		products(
+			filter: { url_key: { eq: $url_key } }
+			pageSize: 20
+			currentPage: 1
+		) {
+			items {
+				uid
+				rating_summary
+				review_count
+				reviews(pageSize: 20, currentPage: 1){
+					items {
+						average_rating
+						created_at
+						nickname
+						summary
+						text
+						product {
+							uid
+							name
+							sku
+						}
+						ratings_breakdown {
+							name
+							value
+						}
+					}
+					page_info {
+						total_pages
+						current_page
+						page_size
+					}
+				}
+			}
+			page_info {
+				total_pages
+				current_page
+			}
+		}
+	}
+`;
+
+export default {
+	getProductReviews: GET_PRODUCT_REVIEWS,
+	createProductReview: CREATE_PRODUCT_REVIEW,
+	getProductReviewRatingsMetadata: GET_PRODUCT_REVIEW_RATINGS_METADATA
+};

package/src/overwrites/peregrine/lib/talons/ProductFullDetail/useProductFullDetail.js

@@ -1,4 +1,5 @@
 import { useCallback, useState, useMemo } from 'react';
+import { useToasts } from '@magento/peregrine/lib';
 import { useIntl } from 'react-intl';
 import { useMutation, useQuery } from '@apollo/client';
 import { useCartContext } from '@magento/peregrine/lib/context/cart';
@@ -11,6 +12,7 @@ import { isSupportedProductType as isSupported } from '@magento/peregrine/lib/ut
 import { deriveErrorMessage } from '@magento/peregrine/lib/util/deriveErrorMessage';
 import mergeOperations from '@magento/peregrine/lib/util/shallowMerge';
 import defaultOperations from '@magento/peregrine/lib/talons/ProductFullDetail/productFullDetail.gql';
+import productReviewOperations from './productReview.gql';
 import { useEventingContext } from '@magento/peregrine/lib/context/eventing';
 import { getOutOfStockVariants } from '@magento/peregrine/lib/util/getOutOfStockVariants';
 
@@ -334,12 +336,60 @@ export const useProductFullDetail = props => {
         isPreview
     } = props;
 
+    const [, { addToast }] = useToasts();
+
+    const { data: productReviewData, loading: loadingProductReview, error: errorProductReview, refetch: refetchProductReviews } = useQuery(
+        productReviewOperations.getProductReviews,
+        {
+            variables: { url_key: product?.url_key },
+            skip: !product?.url_key,
+            fetchPolicy: 'network-only'
+        }
+    );
+
+    // Query for ratings metadata
+    const { data: ratingsMetadataData, loading: loadingRatingsMetadata } = useQuery(
+        productReviewOperations.getProductReviewRatingsMetadata,
+        { fetchPolicy: 'network-only' }
+    );
+    
+    // Mutation for creating review (allow partial data with errors)
+    const [createProductReview, { loading: loadingCreateReview, error: errorCreateReview }] = useMutation(
+        productReviewOperations.createProductReview,
+        { errorPolicy: 'all' }
+    );
+
+    // Handler for submitting review with robust toast handling
+    const handleSubmitReview = async (formValues) => {
+        try {
+            const result = await createProductReview({
+                variables: { input: formValues },
+                errorPolicy: 'all'
+            });
+
+            const gqlErrors = result?.errors || [];
+            const review = result?.data?.createProductReview?.review;
+
+            if (gqlErrors.length > 0 || !review) {
+                const message = gqlErrors[0]?.message || 'Failed to submit review!';
+                addToast({ type: 'error', message });
+                return { success: false, error: gqlErrors };
+            }
+
+            await refetchProductReviews();
+            addToast({ type: 'success', message: 'Review submitted successfully!' });
+            return { success: true };
+        } catch (e) {
+            addToast({ type: 'error', message: e?.message || 'Failed to submit review!' });
+            return { success: false, error: e };
+        }
+    };
+
     const [, { dispatch }] = useEventingContext();
 
     const hasDeprecatedOperationProp = !!(
         addConfigurableProductToCartMutation || addSimpleProductToCartMutation
     );
-
     const operations = mergeOperations(defaultOperations, props.operations);
 
     const productType = product.__typename;
@@ -347,7 +397,7 @@ export const useProductFullDetail = props => {
     const isSupportedProductType = isSupported(productType);
 
     const [{ cartId }] = useCartContext();
-    const [{ isSignedIn }] = useUserContext();
+    const [{ isSignedIn, currentUser }] = useUserContext();
     const { formatMessage } = useIntl();
 
     const { data: storeConfigData } = useQuery(
@@ -718,6 +768,16 @@ export const useProductFullDetail = props => {
         storeConfig: storeConfigData ? storeConfigData.storeConfig : {}
     };
 
+    const defaultNickname = useMemo(() => {
+        if (!currentUser) return '';
+        const first = currentUser.firstname || '';
+        const last = currentUser.lastname || '';
+        const full = `${first} ${last}`.trim();
+        if (full) return full;
+        const email = currentUser.email || '';
+        return email ? email.split('@')[0] : '';
+    }, [currentUser]);
+
     return {
         breadcrumbCategoryId,
         errorMessage: derivedErrorMessage,
@@ -744,6 +804,15 @@ export const useProductFullDetail = props => {
         customAttributes,
         wishlistButtonProps,
         wishlistItemOptions,
-        sellerDetails
+        sellerDetails,
+        productReviewData,
+        loadingProductReview,
+        errorProductReview,
+        ratingsMetadataData,
+        loadingRatingsMetadata,
+        handleSubmitReview,
+        loadingCreateReview,
+        errorCreateReview,
+        defaultNickname
     };
 };

package/src/overwrites/peregrine/lib/talons/RootComponents/Category/categoryContent.gql.js

@@ -3,8 +3,12 @@ import { gql } from '@apollo/client';
 export const GET_PRODUCT_FILTERS_BY_CATEGORY = gql`
     query getProductFiltersByCategory(
         $filters: ProductAttributeFilterInput!
+        $category_uid: String
     ) {
-        products(filter: $filters) {
+        products(
+            filter: $filters
+            category_uid: $category_uid
+        ) {
             aggregations {
                 label
                 count

package/src/overwrites/peregrine/lib/talons/RootComponents/Category/useCategoryContent.js

@@ -150,7 +150,8 @@ export const useCategoryContent = props => {
 
             getFilters({
                 variables: {
-                    filters: newFilters
+                    filters: newFilters,
+                    category_uid: categoryId
                 }
             });
         }

package/src/overwrites/venia-ui/lib/RootComponents/Category/categoryContent.js

@@ -142,9 +142,10 @@ const CategoryContent = props => {
 
     const sidebarRef = useRef(null);
     const classes = useStyle(defaultClasses, props.classes);
-    const shouldRenderSidebarContent = useIsInViewport({
-        elementRef: sidebarRef
-    });
+    // const shouldRenderSidebarContent = useIsInViewport({
+    //     elementRef: sidebarRef
+    // });
+    const shouldRenderSidebarContent = true;
 
     const shouldShowFilterButtons = filters && filters.length;
     const shouldShowFilterShimmer = filters === null;

package/src/overwrites/venia-ui/lib/components/CartPage/PriceSummary/priceSummary.js

@@ -67,7 +67,8 @@ const PriceSummary = props => {
         giftCards,
         giftOptions,
         taxes,
-        shipping
+        shipping,
+        payment_fees
     } = flatData;
 
     const isPriceUpdating = isUpdating || isLoading;
@@ -109,30 +110,103 @@ const PriceSummary = props => {
 
     return (
         <div className={cn(classes.root, 'pb-6 px-3')} data-cy="PriceSummary-root">
-            {/* <div>
-                <ul>
-                    <li className={classes.lineItems}>
-                        <span
-                            data-cy="PriceSummary-lineItemLabel"
-                            className={classes.lineItemLabel}
-                        >
-                            <FormattedMessage
-                                id={'priceSummary.lineItemLabel'}
-                                defaultMessage={'Subtotal'}
+            {isCheckout && (
+                <div>
+                    <ul>
+                        <li className={classes.lineItems}>
+                            <span
+                                data-cy="PriceSummary-lineItemLabel"
+                                className={classes.lineItemLabel}
+                            >
+                                <FormattedMessage
+                                    id={'priceSummary.lineItemLabel'}
+                                    defaultMessage={'Subtotal'}
+                                />
+                            </span>
+                            <span
+                                data-cy="PriceSummary-subtotalValue"
+                                className={priceClass}
+                            >
+                                <Price
+                                    value={subtotal.value}
+                                    currencyCode={subtotal.currency}
+                                />
+                            </span>
+                        </li>
+                        <DiscountSummary
+                            classes={{
+                                lineItems: classes.lineItems,
+                                lineItemLabel: classes.lineItemLabel,
+                                price: priceClass
+                            }}
+                            data={discounts}
+                        />
+                        <li className={classes.lineItems}>
+                            <GiftCardSummary
+                                classes={{
+                                    lineItemLabel: classes.lineItemLabel,
+                                    price: priceClass
+                                }}
+                                data={giftCards}
                             />
-                        </span>
-                        <span
-                            data-cy="PriceSummary-subtotalValue"
-                            className={priceClass}
-                        >
-                            <Price
-                                value={subtotal.value}
-                                currencyCode={subtotal.currency}
+                        </li>
+                        <li className={classes.lineItems}>
+                            <GiftOptionsSummary
+                                classes={{
+                                    lineItemLabel: classes.lineItemLabel,
+                                    price: priceClass
+                                }}
+                                data={giftOptions}
                             />
-                        </span>
-                    </li>
-                </ul>
-            </div> */}
+                        </li>
+                        <li className={classes.lineItems}>
+                            <TaxSummary
+                                classes={{
+                                    lineItemLabel: classes.lineItemLabel,
+                                    price: priceClass
+                                }}
+                                data={taxes}
+                                isCheckout={isCheckout}
+                            />
+                        </li>
+                        <li className={classes.lineItems}>
+                            <ShippingSummary
+                                classes={{
+                                    lineItemLabel: classes.lineItemLabel,
+                                    price: priceClass
+                                }}
+                                data={shipping}
+                                isCheckout={isCheckout}
+                            />
+                        </li>
+                        {payment_fees && payment_fees.length > 0 && payment_fees.map(fee => (
+                            <li className={classes.lineItems} key={fee.title}>
+                                <span className={classes.lineItemLabel}>{fee.title}</span>
+                                <span className={priceClass}>
+                                    <Price value={fee.value} currencyCode={fee.currency} />
+                                </span>
+                            </li>
+                        ))}
+                        <li className={classes.lineItems}>
+                            <span
+                                data-cy="PriceSummary-totalLabel"
+                                className={classes.totalLabel}
+                            >
+                                {totalPriceLabel}
+                            </span>
+                            <span
+                                data-cy="PriceSummary-totalValue"
+                                className={totalPriceClass}
+                            >
+                                <Price
+                                    value={total.value}
+                                    currencyCode={total.currency}
+                                />
+                            </span>
+                        </li>
+                    </ul>
+                </div>
+            )}
             {proceedToCheckoutButton}
         </div>
     );

package/src/overwrites/venia-ui/lib/components/FilterModal/FilterList/filterList.js

@@ -260,8 +260,6 @@ const FilterList = props => {
     const { pathname, search } = useLocation();
 
     const showMoreItem = useMemo(() => {
-        console.log('itemCountToShow')
-        console.log(itemCountToShow)
         if (items.length <= itemCountToShow) {
             return null;
         }

package/src/overwrites/venia-ui/lib/components/FilterSidebar/filterSidebar.js

@@ -52,6 +52,8 @@ const FilterSidebar = props => {
                 // const windowScrollY =
                 //     window.scrollY + filterTop - SCROLL_OFFSET;
                 // window.scrollTo(0, windowScrollY);
+
+                window.scrollTo(0, 0);
             }
 
             handleApply(...args);
@@ -89,6 +91,33 @@ const FilterSidebar = props => {
         allowedFiltersArr.push(val.code);
     });
 
+    // const ordering = ['card_artist','card_product_type', 'card_type'];
+    // const sorted = new Map(
+    //     [...filterItems.entries()].sort((a, b) => {
+    //         const keyA = a[0];
+    //         const keyB = b[0];
+
+    //         const matchA = ordering.findIndex(o => keyA.endsWith(o));
+    //         const matchB = ordering.findIndex(o => keyB.endsWith(o));
+
+    //         const orderA = matchA === -1 ? Infinity : matchA;
+    //         const orderB = matchB === -1 ? Infinity : matchB;
+
+    //         // jika dua-duanya tidak match ordering → sort alphabetis
+    //         if (orderA === Infinity && orderB === Infinity) {
+    //             return keyA.localeCompare(keyB);
+    //         }
+
+    //         // urutkan sesuai ordering
+    //         return orderA - orderB;
+    //     })
+    // );
+
+    // // console.log([...sorted.entries()]);
+    // const filterItems = [...sorted.entries()];
+
+    // console.log('filterItems',filterItems)
+
     const filtersList = useMemo(
         () =>
             Array.from(filterItems, ([group, items], iteration) => {

package/src/overwrites/venia-ui/lib/components/FilterSidebar/filterSidebar.module.css

@@ -11,7 +11,7 @@
     composes: lg_block from global;
     composes: border from global;
     composes: border-gray-100 from global;
-    composes: shadow-type-1 from global;
+    composes: hover_shadow-type-1 from global;
     composes: rounded-[6px] from global;
     composes: py-2.5 from global;
 

package/src/overwrites/venia-ui/lib/components/ProductFullDetail/components/modalFormReview.js

@@ -1,24 +1,46 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import Modal from '@riosst100/pwa-marketplace/src/components/Modal';
 import { X } from 'react-feather';
 import Field from '@magento/venia-ui/lib/components/Field';
-import TextInput from '@magento/venia-ui/lib/components/TextInput';
+// import TextInput from '@magento/venia-ui/lib/components/TextInput';
 import Button from '@magento/venia-ui/lib/components/Button';
 import { isRequired } from '@magento/venia-ui/lib/util/formValidators';
-import { Form } from 'informed';
 import StarRating from './starInput';
 
 import { primary900 } from '@riosst100/pwa-marketplace/src/theme/vars';
 
 const modalFormReview = (props) => {
+    const { open, setOpen, ratingsMetadata = [], loadingRatingsMetadata, onSubmit, submitting, defaultNickname } = props;
 
-    const { open, setOpen } = props;
-    const [currentRating, setCurrentRating] = useState(0);
+    const [formState, setFormState] = useState({ nickname: defaultNickname || '' });
 
-    const handleRatingChange = (newRating) => {
-        setCurrentRating(newRating);
+    useEffect(() => {
+        if (open && defaultNickname && !formState.nickname) {
+            setFormState(prev => ({ ...prev, nickname: defaultNickname }));
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [open, defaultNickname]);
+
+    // ratings: [{ id, value_id }]
+    const [ratings, setRatings] = useState([]);
+
+    const handleRatingChange = (id, value_id) => {
+        setRatings(prev => {
+            const filtered = prev.filter(r => r.id !== id);
+            return [...filtered, { id, value_id }];
+        });
     };
 
+    const handleChange = (field, value) => {
+        setFormState(prev => ({ ...prev, [field]: value }));
+    };
+
+    const handleSubmit = (e) => {
+        e.preventDefault();
+        if (onSubmit) {
+            onSubmit({ ...formState, ratings });
+        }
+    };
 
     return (
         <>
@@ -35,106 +57,88 @@ const modalFormReview = (props) => {
                             <X size={24} color={primary900} />
                         </button>
                     </div>
-
-                    <Form
-                        data-cy="form_review"
-                        className="flex flex-col gap-y-3"
-                        initialValues={{}}
-                        onSubmit={() => { }}
-                        onChange={() => { }}
-                    >
-                        <Field
-                            id="nickname_field"
-                            label={'Nickname'}
-                        >
-                            <TextInput
+                    <form className="flex flex-col gap-y-3" onSubmit={handleSubmit}>
+                        <Field id="nickname_field" label={'Nickname'}>
+                            <input
                                 id="nickname"
-                                field="nickname"
-                                validate={isRequired}
-                                validateOnBlur
-                                mask={value => value && value.trim()}
-                                maskOnBlur={true}
+                                name="nickname"
+                                type="text"
+                                required
+                                readOnly
+                                value={formState.nickname || ''}
+                                onChange={e => handleChange('nickname', e.target.value)}
                                 data-cy="nickname"
                                 aria-label={'nickname'}
                                 placeholder={'e.g John Doe'}
+                                className="border border-gray-100 rounded px-3 py-2 bg-gray-50 cursor-not-allowed"
+                                aria-readonly="true"
                             />
                         </Field>
-
-                        <Field
-                            id="rating_field"
-                            label={'Rating'}
-                        >
-                            <StarRating rating={currentRating} onRatingChange={handleRatingChange} />
-                        </Field>
-
-                        <Field
-                            id="summary_field"
-                            label={'Summary'}
-                        >
-                            <TextInput
+                        {/* Ratings breakdown from metadata */}
+                        <div className="flex flex-col gap-y-3">
+                        {loadingRatingsMetadata ? (
+                            <div>Loading ratings...</div>
+                        ) : ratingsMetadata.length > 0 ? (
+                            ratingsMetadata.map(rating => {
+                                const selected = ratings.find(r => r.id === rating.id)?.value_id || '';
+                                // Find value (1-5) for selected value_id
+                                const selectedValue = rating.values.find(v => v.value_id === selected)?.value || '';
+                                return (
+                                    <div key={rating.id} className="mb-2">
+                                        <label className="block mb-1 font-bold text-gray-700">{rating.name}</label>
+                                        <div className="flex items-center gap-1">
+                                            {[1,2,3,4,5].map(star => {
+                                                const valObj = rating.values.find(v => v.value === String(star));
+                                                if (!valObj) return null;
+                                                return (
+                                                    <button
+                                                        key={valObj.value_id}
+                                                        type="button"
+                                                        aria-label={`${star} star${star > 1 ? 's' : ''}`}
+                                                        className={`focus:outline-none ${selectedValue == star ? 'text-yellow-400' : 'text-gray-300'}`}
+                                                        onClick={() => handleRatingChange(rating.id, valObj.value_id)}
+                                                    >
+                                                        <svg xmlns="http://www.w3.org/2000/svg" fill={selectedValue >= star ? '#F7C317' : '#D9D9D9'} viewBox="0 0 20 20" width="15" height="15">
+                                                            <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.286 3.967a1 1 0 00.95.69h4.175c.969 0 1.371 1.24.588 1.81l-3.38 2.455a1 1 0 00-.364 1.118l1.287 3.966c.3.922-.755 1.688-1.54 1.118l-3.38-2.454a1 1 0 00-1.175 0l-3.38 2.454c-.784.57-1.838-.196-1.54-1.118l1.287-3.966a1 1 0 00-.364-1.118L2.05 9.394c-.783-.57-.38-1.81.588-1.81h4.175a1 1 0 00.95-.69l1.286-3.967z" />
+                                                        </svg>
+                                                    </button>
+                                                );
+                                            })}
+                                            {/* <span className="ml-2 text-sm text-gray-600">{selectedValue || ''}</span> */}
+                                        </div>
+                                    </div>
+                                );
+                            })
+                        ) : null}
+                        </div>
+                        <Field id="summary_field" label={'Summary'}>
+                            <input
                                 id="summary"
-                                field="summary"
-                                validate={isRequired}
-                                validateOnBlur
-                                mask={value => value && value.trim()}
-                                maskOnBlur={true}
+                                name="summary"
+                                type="text"
+                                required
+                                value={formState.summary || ''}
+                                onChange={e => handleChange('summary', e.target.value)}
                                 data-cy="summary"
                                 aria-label={'summary'}
                                 placeholder={'Summary of your rating'}
+                                className="border border-gray-100 rounded px-3 py-2"
                             />
                         </Field>
-
-                        <Field
-                            id="review_field"
-                            label={'Review'}
-                        >
-                            <TextInput
+                        <Field id="review_field" label={'Review'}>
+                            <textarea
                                 id="review"
-                                field="review"
-                                validate={isRequired}
-                                validateOnBlur
-                                mask={value => value && value.trim()}
-                                maskOnBlur={true}
+                                name="review"
+                                required
+                                value={formState.review || ''}
+                                onChange={e => handleChange('review', e.target.value)}
                                 data-cy="review"
                                 aria-label={'review'}
-                                placeholder={'Let us know your thougts'}
-                            />
-                        </Field>
-
-                        <Field
-                            id="like_reason_field"
-                            label={'I like about'}
-                        >
-                            <TextInput
-                                id="like_reason"
-                                field="like_reason"
-                                validate={isRequired}
-                                validateOnBlur
-                                mask={value => value && value.trim()}
-                                maskOnBlur={true}
-                                data-cy="like_reason"
-                                aria-label={'like_reason'}
-                                placeholder={'Summary of your rating'}
+                                placeholder={'Let us know your thoughts'}
+                                className="border border-gray-100 rounded px-3 py-2"
+                                rows={3}
                             />
                         </Field>
-
-                        <Field
-                            id="dont_like_reason_field"
-                            label={"I dont't like about"}
-                        >
-                            <TextInput
-                                id="dont_like_reason"
-                                field="dont_like_reason"
-                                validate={isRequired}
-                                validateOnBlur
-                                mask={value => value && value.trim()}
-                                maskOnBlur={true}
-                                data-cy="dont_like_reason"
-                                aria-label={'dont_like_reason'}
-                                placeholder={'Summary of your rating'}
-                            />
-                        </Field>
-
                         <div className='actions flex justify-end gap-x-2.5 mt-4'>
                             <Button
                                 priority='low'
@@ -142,6 +146,7 @@ const modalFormReview = (props) => {
                                     content: 'capitalize text-[16px] font-medium'
                                 }}
                                 onClick={() => setOpen(false)}
+                                type="button"
                             >
                                 Cancel
                             </Button>
@@ -150,15 +155,17 @@ const modalFormReview = (props) => {
                                 classes={{
                                     content: 'capitalize text-[16px] font-medium'
                                 }}
+                                type="submit"
+                                disabled={submitting}
                             >
-                                Submit Review
+                                {submitting ? 'Submitting...' : 'Submit Review'}
                             </Button>
                         </div>
-                    </Form>
+                    </form>
                 </div>
             </Modal>
         </>
-    )
-}
+    );
+};
 
-export default modalFormReview
+export default modalFormReview;

package/src/overwrites/venia-ui/lib/components/ProductFullDetail/components/productReview.js

@@ -4,98 +4,139 @@ import { Star1 } from 'iconsax-react';
 import Button from '../../Button';
 import ModalFormReview from './modalFormReview';
 
+
+
 const productReview = (props) => {
+    const {
+        className,
+        productReviewData,
+        loadingProductReview,
+        errorProductReview,
+        ratingsMetadataData,
+        loadingRatingsMetadata,
+        handleSubmitReview,
+        defaultNickname,
+        product
+    } = props;
 
-    const { className } = props;
     const [open, setOpen] = useState(false);
     const [filter, setFilter] = useState('All');
+    const [submitting, setSubmitting] = useState(false);
 
-
-    // Dummy reviews data
-    const dummyReviews = {
-        __typename: 'ProductRates',
-        total_count: 6,
-        items: [
-            {
-                __typename: 'ProductRate',
-                id: 1,
-                name: 'John Doe',
-                date: '18 January 2024',
-                rating: 5,
-                comment: 'Got item at a great price. Arrived way quicker than expected, extremely well packaged and exactly as described. Highly recommend the seller.'
-            },
-            {
-                __typename: 'ProductRate',
-                id: 2,
-                name: 'Roger Taylor',
-                date: '25 January 2024',
-                rating: 2,
-                comment: 'Arrived late and packaging was damaged. Not satisfied.'
-            },
-            {
-                __typename: 'ProductRate',
-                id: 3,
-                name: 'Sarah Smith',
-                date: '02 February 2024',
-                rating: 4,
-                comment: 'Good product, but delivery could be faster.'
-            },
-            {
+    let reviewsData = null;
+    if (
+        productReviewData &&
+        productReviewData.products &&
+        productReviewData.products.items &&
+        productReviewData.products.items.length > 0
+    ) {
+        const item = productReviewData.products.items[0];
+        const reviewItems = (item.reviews && item.reviews.items) || [];
+        reviewsData = {
+            __typename: 'ProductRates',
+            total_count: item.review_count || reviewItems.length,
+            items: reviewItems.map((r, idx) => ({
                 __typename: 'ProductRate',
-                id: 4,
-                name: 'Michael Johnson',
-                date: '10 February 2024',
-                rating: 3,
-                comment: 'Average experience, item as described but nothing special.'
-            },
-            {
-                __typename: 'ProductRate',
-                id: 5,
-                name: 'Emily Davis',
-                date: '15 February 2024',
-                rating: 5,
-                comment: 'Excellent service and product quality! Will buy again.'
-            },
-            {
-                __typename: 'ProductRate',
-                id: 6,
-                name: 'David Lee',
-                date: '20 February 2024',
-                rating: 1,
-                comment: 'Item not as described. Very disappointed.'
+                id: idx + 1,
+                name: r.nickname,
+                date: r.created_at,
+                rating: r.average_rating ? Math.round(r.average_rating / 20) : (r.ratings_breakdown && r.ratings_breakdown[0] ? parseInt(r.ratings_breakdown[0].value) : 0),
+                comment: r.text || r.summary || '',
+                summary: r.summary || '',
+                productName: r.product?.name || '',
+                ratings_breakdown: r.ratings_breakdown || []
+            })),
+            page_info: productReviewData.products.page_info || {
+                total_pages: 1,
+                current_page: 1
             }
-        ],
-        page_info: {
-            __typename: 'SearchResultPageInfo',
-            total_pages: 1,
-            page_size: 10,
-            current_page: 1,
-            total_count: 6
-        }
-    };
+        };
+    }
 
+    if (!reviewsData || !reviewsData.items.length) {
+        return (
+            <>
+                <ModalFormReview
+                    open={open}
+                    setOpen={setOpen}
+                    defaultNickname={defaultNickname}
+                    ratingsMetadata={ratingsMetadataData?.productReviewRatingsMetadata?.items || []}
+                    loadingRatingsMetadata={loadingRatingsMetadata}
+                    onSubmit={async (formValues) => {
+                        setSubmitting(true);
+                        const input = {
+                            nickname: formValues.nickname,
+                            summary: formValues.summary,
+                            text: formValues.review,
+                            sku: product?.sku,
+                            ratings: formValues.ratings
+                        };
+                        const result = await handleSubmitReview(input);
+                        setSubmitting(false);
+                        if (result.success) setOpen(false);
+                    }}
+                    submitting={submitting}
+                />
+                <div className={className}>
+                    <div className="flex items-center justify-between mb-6">
+                        <div />
+                        <Button
+                            priority='low'
+                            classes={{
+                                content: 'normal-case font-normal text-base'
+                            }}
+                            onClick={() => setOpen(true)}
+                        >
+                            Write a review
+                        </Button>
+                    </div>
+                    <div className="text-center py-8 text-gray-500">No reviews yet.</div>
+                </div>
+            </>
+        );
+    }
 
-    const totalReviews = dummyReviews.items.length;
+    const totalReviews = reviewsData.items.length;
     const averageRating = totalReviews > 0
-        ? (dummyReviews.items.reduce((sum, item) => sum + item.rating, 0) / totalReviews).toFixed(1)
+        ? (reviewsData.items.reduce((sum, item) => sum + item.rating, 0) / totalReviews).toFixed(1)
         : 0;
 
     const starCounts = { 5: 0, 4: 0, 3: 0, 2: 0, 1: 0 };
-    dummyReviews.items.forEach(item => {
+    reviewsData.items.forEach(item => {
         if (starCounts[item.rating] !== undefined) {
             starCounts[item.rating]++;
         }
     });
 
     const getPercent = (count) => totalReviews > 0 ? Math.round((count / totalReviews) * 100) : 0;
-    
+
     const filteredReviews = filter === 'All'
-        ? dummyReviews.items
-        : dummyReviews.items.filter(item => item.rating === parseInt(filter));
+        ? reviewsData.items
+        : reviewsData.items.filter(item => item.rating === parseInt(filter));
 
     return (
         <>
-            <ModalFormReview open={open} setOpen={setOpen} />
+            <ModalFormReview
+                open={open}
+                setOpen={setOpen}
+                defaultNickname={defaultNickname}
+                ratingsMetadata={ratingsMetadataData?.productReviewRatingsMetadata?.items || []}
+                loadingRatingsMetadata={loadingRatingsMetadata}
+                onSubmit={async (formValues) => {
+                    setSubmitting(true);
+                    const input = {
+                        nickname: formValues.nickname,
+                        summary: formValues.summary,
+                        text: formValues.review,
+                        sku: product?.sku,
+                        ratings: formValues.ratings
+                    };
+                    const result = await handleSubmitReview(input);
+                    setSubmitting(false);
+                    if (result.success) setOpen(false);
+                }}
+                submitting={submitting}
+            />
             <div className={className}>
                 <div className="w-full flex items-start xs_flex-col lg_flex-row gap-[30px]">
                     <div className="w-full xs_max-w-full lg_max-w-[365px] border border-[#E6E9EA] rounded-md p-6">
@@ -167,7 +208,7 @@ const productReview = (props) => {
                         {/* Reviews List */}
                         <div className='space-y-4 mb-6'>
                             <Review reviews={{
-                                ...dummyReviews,
+                                ...reviewsData,
                                 items: filteredReviews
                             }} />
                         </div>

package/src/overwrites/venia-ui/lib/components/ProductFullDetail/productFullDetail.js

@@ -57,7 +57,6 @@ const ERROR_FIELD_TO_MESSAGE_MAPPING = {
 
 const ProductDetailsCollapsible = (props) => {
     const { data } = props;
-
     return (
         <>
             {data.map((_data) => (
@@ -99,7 +98,14 @@ const ProductFullDetail = props => {
         productDetails,
         customAttributes,
         wishlistButtonProps,
-        sellerDetails
+        sellerDetails,
+        productReviewData,
+        loadingProductReview,
+        errorProductReview,
+        ratingsMetadataData,
+        loadingRatingsMetadata,
+        handleSubmitReview,
+        defaultNickname
     } = talonProps;
 
     const [, { addToast }] = useToasts();
@@ -493,7 +499,17 @@ const ProductFullDetail = props => {
         {
             id: 'product-reviews',
             title: 'Reviews',
-            content: <ProductReviews className={cn(contentContainerClass, classes.contentContainerTabOverride)} />
+            content: <ProductReviews 
+                className={cn(contentContainerClass, classes.contentContainerTabOverride)}
+                productReviewData={productReviewData}
+                loadingProductReview={loadingProductReview}
+                errorProductReview={errorProductReview}
+                ratingsMetadataData={ratingsMetadataData}
+                loadingRatingsMetadata={loadingRatingsMetadata}
+                handleSubmitReview={handleSubmitReview}
+                defaultNickname={defaultNickname}
+                product={product}
+            />
         }
     ];