@riosst100/pwa-marketplace 2.8.8 → 2.8.9

package/src/overwrites/venia-ui/lib/components/CheckoutPage/PaymentInformation/summary.module.css

@@ -1,7 +1,7 @@
 .root {
     composes: gap-xs from global;
     composes: grid from global;
-    composes: p-md from global;
+    composes: p-xs from global;
 }
 
 .heading_container {
@@ -11,6 +11,8 @@
 }
 
 .heading {
+    /* composes: text-base from global; */
+    font-size: 16px;
     composes: font-medium from global;
 }
 

package/src/overwrites/venia-ui/lib/components/CheckoutPage/checkoutPage.module.css

@@ -173,14 +173,25 @@
 
 .review_order_button {
     composes: root_highPriority from '@magento/venia-ui/lib/components/Button/button.module.css';
-
+    box-shadow: none;
     grid-column: 1 / span 1;
     composes: m-auto from global;
+    text-transform: capitalize;
+}
+.review_order_button:hover,
+.review_order_button:focus,
+.review_order_button:active {
+    box-shadow: none;
 }
-
 .place_order_button {
     composes: root_highPriority from '@magento/venia-ui/lib/components/Button/button.module.css';
-
+    box-shadow: none;
     grid-column: 1 / span 1;
     composes: m-auto from global;
+    text-transform: capitalize;
+}
+.place_order_button:hover,
+.place_order_button:focus,
+.place_order_button:active {
+    box-shadow: none;
 }

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

@@ -27,7 +27,7 @@ const modalFormReview = (props) => {
                 className="modal_form_review !p-[30px] md_min-w-[650px]"
             >
                 <div className='form_review-container'>
-                    <div className='header_title-modal flex justify-between mb-10'>
+                    <div className='header_title-modal flex justify-between mb-5'>
                         <div className='text-lg text-black font-medium'>
                             Write Review
                         </div>
@@ -38,7 +38,7 @@ const modalFormReview = (props) => {
 
                     <Form
                         data-cy="form_review"
-                        className="flex flex-col gap-y-6"
+                        className="flex flex-col gap-y-3"
                         initialValues={{}}
                         onSubmit={() => { }}
                         onChange={() => { }}

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

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import Review from '@riosst100/pwa-marketplace/src/components/SellerReviewItem';
+import Review from '@riosst100/pwa-marketplace/src/components/ProductReviewItem';
 import { Star1 } from 'iconsax-react';
 import Button from '../../Button';
 import ModalFormReview from './modalFormReview';
@@ -7,53 +7,171 @@ import ModalFormReview from './modalFormReview';
 const productReview = (props) => {
 
     const { className } = props;
-
     const [open, setOpen] = useState(false);
+    const [filter, setFilter] = useState('All');
+
+
+    // 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.'
+            },
+            {
+                __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.'
+            }
+        ],
+        page_info: {
+            __typename: 'SearchResultPageInfo',
+            total_pages: 1,
+            page_size: 10,
+            current_page: 1,
+            total_count: 6
+        }
+    };
+
+
+    const totalReviews = dummyReviews.items.length;
+    const averageRating = totalReviews > 0
+        ? (dummyReviews.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 => {
+        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));
 
     return (
         <>
             <ModalFormReview open={open} setOpen={setOpen} />
             <div className={className}>
-                <div className='review-summary flex justify-between mb-[30px] pb-[30px] border-b border-gray-100'>
-                    <div className="justify-start items-end gap-[15px] inline-flex">
-                        <div className="text-center text-zinc-900 text-[40px] font-medium leading-10">4.7</div>
-                        <div className="flex-col justify-start items-start gap-[9px] inline-flex">
-                            <div className="justify-start items-start gap-1.5 inline-flex">
-                                <div className="w-3.5 h-3.5 relative">
-                                    <Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
-                                </div>
-                                <div className="w-3.5 h-3.5 relative">
-                                    <Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
-                                </div>
-                                <div className="w-3.5 h-3.5 relative">
-                                    <Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
-                                </div>
-                                <div className="w-3.5 h-3.5 relative">
-                                    <Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
-                                </div>
-                                <div className="w-3.5 h-3.5 relative">
-                                    <Star1 color='#D9D9D9' size={14} className='fill-[#D9D9D9]' />
+                <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">
+                        <div className="flex justify-between items-start mb-1">
+                            <div className="flex flex-col">
+                                <div className="flex items-center gap-1 mb-1">
+                                    {[...Array(5)].map((_, i) => (
+                                        <div key={i} className="w-4 h-4">
+                                            <Star1 
+                                                color={i < Math.round(averageRating) ? '#F7C317' : '#D9D9D9'} 
+                                                size={16} 
+                                                className={i < Math.round(averageRating) ? 'fill-[#F7C317]' : ''}
+                                            />
+                                        </div>
+                                    ))}
+                                    <span className="ml-1 font-medium text-sm">{averageRating} out of 5</span>
                                 </div>
                             </div>
-                            <div className="text-center text-zinc-900 text-sm font-normal leading-[18px]">(26 Reviews)</div>
+                        </div>
+                        <div className="mt-4">
+                            {[5, 4, 3, 2, 1].map(star => {
+                                const count = starCounts[star] || 0;
+                                const percentage = totalReviews ? Math.round((count / totalReviews) * 100) : 0;
+                                return (
+                                    <div key={star} className="flex items-center mb-2">
+                                        <div className="flex items-center mr-2">
+                                            <Star1 color="#F7C317" size={14} className="fill-[#F7C317]" />
+                                            <span className="text-sm ml-1">{star}</span>
+                                        </div>
+                                        <div className="relative h-[8px] flex-1 bg-[#E4EBF5] rounded-sm mr-2">
+                                            <div 
+                                                className="absolute h-[8px] bg-[#FF7A00] rounded-sm" 
+                                                style={{width: `${percentage}%`}}
+                                            />
+                                        </div>
+                                        <span className="text-sm text-right">{percentage}%</span>
+                                    </div>
+                                );
+                            })}
+                        </div>
+                    </div>
+                    <div className="flex-1">
+                        <div className="flex items-center justify-between mb-6">
+                            <div className="flex items-center">
+                                <span className="font-medium mr-3">Filter By</span>
+                                <select
+                                    className="border border-[#E6E9EA] rounded px-3 py-2 text-sm"
+                                    value={filter}
+                                    onChange={e => setFilter(e.target.value)}
+                                >
+                                    <option value="All">All Stars</option>
+                                    <option value="5">5 Stars</option>
+                                    <option value="4">4 Stars</option>
+                                    <option value="3">3 Stars</option>
+                                    <option value="2">2 Stars</option>
+                                    <option value="1">1 Stars</option>
+                                </select>
+                            </div>
+                            <Button
+                                priority='low'
+                                classes={{
+                                    content: 'normal-case font-normal text-base'
+                                }}
+                                onClick={() => setOpen(true)}
+                            >
+                                Write a review
+                            </Button>
+                        </div>
+                        {/* Reviews List */}
+                        <div className='space-y-4 mb-6'>
+                            <Review reviews={{
+                                ...dummyReviews,
+                                items: filteredReviews
+                            }} />
                         </div>
                     </div>
-                    <Button
-                        priority='low'
-                        classes={{
-                            content: 'normal-case font-normal text-base'
-                        }}
-                        onClick={() => setOpen(true)}
-                    >
-                        Write a review
-                    </Button>
-                </div>
-                <div className='review-list flex flex-col gap-y-4'>
-                    <Review />
-                    <Review />
-                    <Review />
-                    <Review />
-                    <Review />
                 </div>
             </div>
         </>

package/src/talons/PaymentMethod/PaypalExpress/usePaypalExpress.js

@@ -37,8 +37,12 @@ export const usePaypalExpress = props => {
      * This function will be called if address was successfully set.
      */
     const onBillingAddressChangedSuccess = useCallback(() => {
+        // Guard: avoid sending an invalid mutation if selectedMethod is missing.
+        if (!selectedMethod) {
+            return;
+        }
         updatePaymentMethod({
-            variables: {cartId, selectedMethod}
+            variables: { cartId, selectedMethod }
         });
     }, [updatePaymentMethod, cartId, selectedMethod]);