@riosst100/pwa-marketplace 3.0.1 → 3.0.4

package/src/overwrites/venia-ui/lib/components/OrderHistoryPage/orderRow.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useCallback, useState } from 'react';
 import { arrayOf, number, shape, string } from 'prop-types';
 import { ChevronDown, ChevronUp } from 'react-feather';
 import { FormattedMessage, useIntl } from 'react-intl';
@@ -17,7 +17,7 @@ import PlaceholderImage from '@magento/venia-ui/lib/components/Image/placeholder
 import { Link, useHistory } from 'react-router-dom';
 
 const OrderRow = props => {
-    const { order } = props;
+    const { order, setReviewOrder } = props;
     const { formatMessage } = useIntl();
     const history = useHistory();
     const {
@@ -179,9 +179,22 @@ const OrderRow = props => {
         });
     };
 
+    const handleWriteReview = useCallback(( order ) => {
+        console.log('order',order)
+        if (order) {
+            setReviewOrder(order);
+        }
+    }, [setReviewOrder]);
+
+    
+    // ReviewModal
+
     return (
         <li className={classes.root}>
-            <div className='flex flex-col md_flex-row md_items-start justify-between mb-2.5'>
+            <div className='flex flex-col md_flex-row md_items-start justify-between mb-2.5' style={{
+                "borderBottom": "1px solid #e6e9ea",
+                "paddingBottom": "10px"
+            }}>
                 <div className='flex flex-col ml-[14px] mt-[5px]'>
                     <div className="flex gap-x-[15px] flex-col">
                         <div className='flex gap-x-[5px] items-center'>
@@ -202,13 +215,16 @@ const OrderRow = props => {
                     </div>
                 </div>
             </div>
-            <div className='flex flex-col md_flex-row justify-between mb-2.5'>
-                <div className='flex flex-col ml-[5px] gap-y-[20px]'>
+            <div className='flex flex-col md_flex-column justify-between mb-0'>
+                <div className='flex flex-col ml-[5px] gap-y-[10px]'>
                     {/* Per-item horizontal flex: image + detail */}
                     {items && items.length > 0 && items.map((it, idx) => {
                         const { url, label } = getThumbnailForSku(it.product_sku, it.product_name, idx);
                         return (
-                            <div key={it.id || idx} className='flex flex-row gap-4 mb-2'>
+                            <div key={it.id || idx} className='flex flex-row gap-4 mb-1 justify-between' style={{
+                                "borderBottom": "1px solid #e6e9ea",
+                                "paddingBottom": "10px"
+                            }}>
                                 <div className={classes.productImage}>
                                     {url ? (
                                         <img
@@ -222,15 +238,16 @@ const OrderRow = props => {
                                     )}
                                 </div>
                                 <div className='flex flex-col gap-1 pb-2 last_pb-0 max-w-[375px]'>
-                                    <div className={cn(classes.productName, 'text-[14] font-medium')}>
+                                    <div className={cn(classes.productName, 'text-[14px] font-medium')}>
                                         <span>{it.product_name}</span>
                                     </div>
-                                    <div className="text-[14] text-gray-300">
-                                        <span>Qty : {`${it.quantity_ordered}`}</span>
-                                        <br />
-                                        <span>
-                                            Price : <Price currencyCode={it?.product_sale_price?.currency} value={it?.product_sale_price?.value} />
-                                        </span>
+                                    <div className="text-[12px]">
+                                        <span>x{`${it.quantity_ordered}`}</span>
+                                    </div>
+                                </div>
+                                <div class="flex flex-col gap-1 pb-2 last_pb-0 justify-center">
+                                    <div class="text-[14px] text-blue-700">
+                                        <span><Price currencyCode={it?.product_sale_price?.currency} value={it?.product_sale_price?.value} /></span>
                                     </div>
                                 </div>
                             </div>
@@ -238,45 +255,64 @@ const OrderRow = props => {
                     })}
                 </div>
                 {/* Right column: bottom-aligned Order Total + CTA */}
-                <div className='flex flex-col items-end gap-2 md_pl-10 md_self-end mr-4 mb-1'>
-                    <div className="md_text-right">
-                        <span className="text-[14] text-gray-200 block mb-1">
+                <div className='flex flex-col items-end gap-4 md_pl-10 md_self-end mr-4 mb-1 pt-2'>
+                    <div className="md_text-right flex flex-row gap-5 items-center">
+                        <span className="text-[14px] text-gray-200 block mb-1">
                             <FormattedMessage
                                 id={'orderRow.orderTotalText'}
                                 defaultMessage={'Order Total'}
-                            />
+                            />:
                         </span>
-                        <div className="text-lg font-medium">{orderTotalPrice}</div>
+                        <div className="text-lg font-medium text-blue-700">{orderTotalPrice}</div>
                     </div>
                     <div className="flex flex-row gap-2 w-full justify-end items-center">
+                        {showNewReturnButton && (
+                            <>
+                                {/* <ReviewModal order={reviewOrder} /> */}
+                                <span className="bg-blue-700 hover:bg-white hover:text-blue-700 hover:border hover:border-blue-700 rounded-full px-[30px] py-[8px] text-[13px] font-medium text-white transition-all duration-300 ease-in-out" onClick={() => handleWriteReview(order)}>
+                                    <FormattedMessage
+                                        id={'orderRow.ViewTransactionDetail'}
+                                        defaultMessage={'Write a Review'}
+                                    />
+                                </span>
+                            </>
+                        )}
                         <Link 
                             to={{
                                 pathname: `/order-history/view/${orderNumber}`,
                                 state: { order }
                             }}
                         >
-                            <span className="bg-blue-700 hover:bg-white hover:text-blue-700 hover:border hover:border-blue-700 rounded-full px-[30px] py-[5px] text-[13px] font-medium text-white transition-all duration-300 ease-in-out">
+                            <span className="bg-blue-700 hover:bg-white hover:text-blue-700 hover:border hover:border-blue-700 rounded-full px-[30px] py-[8px] text-[13px] font-medium text-white transition-all duration-300 ease-in-out">
                                 <FormattedMessage
                                     id={'orderRow.ViewTransactionDetail'}
-                                    defaultMessage={'View Order Detail'}
+                                    defaultMessage={'View Order'}
                                 />
                             </span>
                         </Link>
                         {showNewReturnButton && (
-                            <div
-                                className={cn(
-                                    "cursor-pointer border border-blue-700 bg-white text-blue-700 hover:bg-blue-50 hover:text-blue-700 hover:border-blue-700",
-                                    "rounded-full px-[10px] py-[3px] text-[13px] font-medium transition-all duration-300 ease-in-out flex items-center gap-2"
-                                )}
-                                onClick={handleNewReturn}
-                                title={formatMessage({ id: 'orderRow.returnProduct', defaultMessage: 'Return Product' })}
-                            >
-                                <ConvertCard size={20} color="#f26313" />
-                                <FormattedMessage
-                                    id={'orderRow.ReturnItems'}
-                                    defaultMessage={'Return Items'}
-                                />
-                            </div>
+                            <>
+                                <span className="bg-white border border-blue-700 bg-white text-blue-700 hover:bg-blue-50 hover:text-blue-700 hover:border-blue-700 rounded-full px-[30px] py-[8px] text-[13px] font-medium text-white transition-all duration-300 ease-in-out">
+                                    <FormattedMessage
+                                        id={'orderRow.ReturnItems'}
+                                        defaultMessage={'Return Items'}
+                                    />
+                                </span>
+                                {/* <div
+                                    className={cn(
+                                        "cursor-pointer ",
+                                        "rounded-full px-[10px] py-[3px] text-[13px] font-medium transition-all duration-300 ease-in-out flex items-center gap-2"
+                                    )}
+                                    onClick={handleNewReturn}
+                                    title={formatMessage({ id: 'orderRow.returnProduct', defaultMessage: 'Return Product' })}
+                                >
+                                    <ConvertCard size={20} color="#f26313" />
+                                    <FormattedMessage
+                                        id={'orderRow.ReturnItems'}
+                                        defaultMessage={'Return Items'}
+                                    />
+                                </div> */}
+                            </>
                         )}
                     </div>
                 </div>

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

@@ -9,17 +9,17 @@ 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 ModalFormReview = (props) => {
+    const { reviewOrder, setReviewOrder, ratingsMetadata = [], loadingRatingsMetadata, onSubmit, submitting, defaultNickname } = props;
 
     const [formState, setFormState] = useState({ nickname: defaultNickname || '' });
 
     useEffect(() => {
-        if (open && defaultNickname && !formState.nickname) {
+        if (reviewOrder && defaultNickname && !formState.nickname) {
             setFormState(prev => ({ ...prev, nickname: defaultNickname }));
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [open, defaultNickname]);
+    }, [reviewOrder, defaultNickname]);
 
     // ratings: [{ id, value_id }]
     const [ratings, setRatings] = useState([]);
@@ -45,7 +45,7 @@ const modalFormReview = (props) => {
     return (
         <>
             <Modal
-                open={open}
+                reviewOrder={reviewOrder}
                 className="modal_form_review !p-[30px] md_min-w-[650px]"
             >
                 <div className='form_review-container'>
@@ -53,7 +53,7 @@ const modalFormReview = (props) => {
                         <div className='text-lg text-black font-medium'>
                             Write Review
                         </div>
-                        <button onClick={() => { setOpen(!open) }} >
+                        <button onClick={() => { setReviewOrder(!reviewOrder) }} >
                             <X size={24} color={primary900} />
                         </button>
                     </div>
@@ -145,7 +145,7 @@ const modalFormReview = (props) => {
                                 classes={{
                                     content: 'capitalize text-[16px] font-medium'
                                 }}
-                                onClick={() => setOpen(false)}
+                                onClick={() => setReviewOrder(false)}
                                 type="button"
                             >
                                 Cancel
@@ -168,4 +168,4 @@ const modalFormReview = (props) => {
     );
 };
 
-export default modalFormReview;
+export default ModalFormReview;

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

@@ -2,9 +2,6 @@ import React, { useState } from 'react'
 import Review from '@riosst100/pwa-marketplace/src/components/ProductReviewItem';
 import { Star1 } from 'iconsax-react';
 import Button from '../../Button';
-import ModalFormReview from './modalFormReview';
-
-
 
 const productReview = (props) => {
     const {
@@ -56,29 +53,9 @@ const productReview = (props) => {
     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 className="flex items-center justify-between mb-6">
                         <div />
                         <Button
                             priority='low'
@@ -89,8 +66,8 @@ const productReview = (props) => {
                         >
                             Write a review
                         </Button>
-                    </div>
-                    <div className="text-center py-8 text-gray-500">No reviews yet.</div>
+                    </div> */}
+                    <div className="text-center py-8 text-gray-600 text-[14px]">No reviews yet.</div>
                 </div>
             </>
         );

package/src/talons/ReviewModal/reviewModal.gql.js

@@ -0,0 +1,45 @@
+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
+			}
+		}
+	}
+`;
+
+export default {
+	createProductReview: CREATE_PRODUCT_REVIEW,
+	getProductReviewRatingsMetadata: GET_PRODUCT_REVIEW_RATINGS_METADATA
+};

package/src/talons/ReviewModal/useReviewModal.js

@@ -0,0 +1,87 @@
+import { useCallback, useMemo } from 'react';
+import { useToasts } from '@magento/peregrine/lib';
+import { useMutation, useQuery } from '@apollo/client';
+import { useUserContext } from '@magento/peregrine/lib/context/user';
+import { useHistory } from 'react-router-dom';
+import mergeOperations from '@magento/peregrine/lib/util/shallowMerge';
+import defaultOperations from '@magento/peregrine/lib/talons/ProductFullDetail/productFullDetail.gql';
+import productReviewOperations from './reviewModal.gql';
+
+export const useReviewModal = props => {
+    const { reviewOrder, setSubmitting } = props;
+
+    const history = useHistory();
+
+    const handleToastAction = useCallback(
+        (removeToast) => {
+            history.push('/cart');
+            removeToast();
+        },
+        [history]
+    );
+
+    const [, { addToast }] = useToasts();
+
+    const operations = mergeOperations(defaultOperations, props.operations);
+
+    // Query for ratings metadata
+    const { data: ratingsMetadata, 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 {
+            setSubmitting(true)
+            
+            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 };
+            }
+
+            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 [{ currentUser }] = useUserContext();
+
+    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 {
+        ratingsMetadata: ratingsMetadata?.productReviewRatingsMetadata?.items[0] || null,
+        loadingRatingsMetadata,
+        handleSubmitReview,
+        loadingCreateReview,
+        errorCreateReview,
+        defaultNickname,
+        handleToastAction
+    };
+};