@riosst100/pwa-marketplace 2.9.6 → 2.9.9

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}
+            />
         }
     ];
 

package/src/talons/RMAPage/useRmaPage.js

@@ -12,10 +12,27 @@ const PAGE_SIZE = 5;
 // Custom RMA Page talon with page-based pagination
 export const useRmaPage = (props = {}) => {
     const { rmaId, orderNumber } = props;
-    const { getLofmpRmasQuery, getLofmpRmaDetailQuery, lofmpCreateRmaMutation } = operations;
+    const { getLofmpRmasQuery, getLofmpRmaDetailQuery, lofmpCreateRmaMutation, lofmpRmaShippingConfirmMutation, lofmpSendRmaMessageMutation } = operations;
+
+    // Mutation for sending RMA message
+    const [sendRmaMessageMutation, { data: sendRmaMessageData, error: sendRmaMessageError, loading: sendRmaMessageLoading }] = useMutation(lofmpSendRmaMessageMutation);
+
+    // Handler for sending RMA message
+    const sendRmaMessage = useCallback(async (input) => {
+        try {
+            const { data } = await sendRmaMessageMutation({ variables: { input } });
+            return { data, error: null };
+        } catch (error) {
+            return { data: null, error };
+        }
+    }, [sendRmaMessageMutation]);
+
     // Mutation for creating RMA
     const [createRmaMutation, { data: createRmaData, error: createRmaError, loading: createRmaLoading }] = useMutation(lofmpCreateRmaMutation);
 
+    // Mutation for confirming shipping
+    const [confirmShippingMutation, { data: confirmShippingData, error: confirmShippingError, loading: confirmShippingLoading }] = useMutation(lofmpRmaShippingConfirmMutation);
+
     // Handler for creating RMA
     const createRma = useCallback(async (input) => {
         try {
@@ -26,6 +43,16 @@ export const useRmaPage = (props = {}) => {
         }
     }, [createRmaMutation]);
 
+    // Handler for confirming shipping
+    const confirmShipping = useCallback(async (rma_id) => {
+        try {
+            const { data } = await confirmShippingMutation({ variables: { rma_id } });
+            return { data, error: null };
+        } catch (error) {
+            return { data: null, error };
+        }
+    }, [confirmShippingMutation]);
+
     const [
         ,
         {
@@ -47,7 +74,7 @@ export const useRmaPage = (props = {}) => {
         variables: {
             filter: orderNumber
                 ? { order_number: orderNumber }
-                : (searchText ? { order_increment_id: { match: searchText } } : undefined),
+                : (searchText ? { order_number: searchText } : undefined),
             pageSize,
             currentPage
         },
@@ -58,11 +85,13 @@ export const useRmaPage = (props = {}) => {
     const {
         data: rmaDetailData,
         error: rmaDetailError,
-        loading: rmaDetailLoading
+        loading: rmaDetailLoading,
+        refetch: refetchRmaDetail
     } = useQuery(getLofmpRmaDetailQuery, {
         fetchPolicy: 'cache-and-network',
         variables: { rmaId },
-        skip: !rmaId
+        skip: !rmaId,
+        pollInterval: 3000 // 1 detik auto-refresh
     });
 
     const rmasData = data && data.lofmpRmas ? data.lofmpRmas : undefined;
@@ -135,10 +164,15 @@ export const useRmaPage = (props = {}) => {
         createRmaLoading,
         createRmaError,
         createRmaData,
-        // Detail
+        confirmShipping,
+        confirmShippingLoading,
+        confirmShippingError,
+        confirmShippingData,
         rmaDetail: rmaDetailData ? rmaDetailData.lofmpRmaDetail : undefined,
         rmaDetailLoading,
-        rmaDetailError
+        rmaDetailError,
+        refetchRmaDetail
+        ,sendRmaMessage, sendRmaMessageData, sendRmaMessageError, sendRmaMessageLoading
     };
 };