@riosst100/pwa-marketplace 3.0.3 → 3.0.4

package/src/overwrites/venia-ui/lib/components/CheckoutPage/OrderSummary/orderSummary.js

@@ -7,6 +7,9 @@ import defaultClasses from './orderSummary.module.css';
 
 const OrderSummary = props => {
     const classes = useStyle(defaultClasses, props.classes);
+
+    const { placeOrderButton } = props
+
     return (
         <div data-cy="OrderSummary-root" className={classes.root}>
             <h2 aria-live="polite" className="text-[16px] font-medium mb-4">
@@ -26,6 +29,7 @@ const OrderSummary = props => {
                     }
                 `}
             </style>
+            {placeOrderButton}
         </div>
     );
 };

package/src/overwrites/venia-ui/lib/components/CheckoutPage/PriceAdjustments/priceAdjustments.js

@@ -5,15 +5,17 @@ import { useMutation, useQuery } from '@apollo/client';
 import { useCartContext } from '@magento/peregrine/lib/context/cart';
 
 import { useStyle } from '@magento/venia-ui/lib/classify';
-import LoadingIndicator from '@magento/venia-ui/lib/components/LoadingIndicator';
 import { Accordion, Section } from '@magento/venia-ui/lib/components/Accordion';
 import SellerCouponCheckout from '@riosst100/pwa-marketplace/src/components/SellerCoupon/sellerCouponCheckout';
 import couponCodeOperations from '@magento/peregrine/lib/talons/CartPage/PriceAdjustments/CouponCode/couponCode.gql';
 import GiftCardSection from '@magento/venia-ui/lib/components/CartPage/PriceAdjustments/giftCardSection';
 import GiftOptionsSection from '@magento/venia-ui/lib/components/CartPage/PriceAdjustments/giftOptionsSection';
-
+import CouponCode from '@magento/venia-ui/lib/components/CartPage/PriceAdjustments/CouponCode';
+import Shimmer from '@magento/venia-ui/lib/components/Shimmer';
 import defaultClasses from './priceAdjustments.module.css';
 import cn from 'classnames';
+import LoadingIndicator from '@magento/venia-ui/lib/components/LoadingIndicator';
+import { FormattedMessage } from 'react-intl';
 
 /**
  * PriceAdjustments component for the Checkout page.
@@ -32,7 +34,8 @@ const PriceAdjustments = props => {
         couponCodeOperations.getAppliedCouponsQuery,
         { variables: { cartId }, skip: !cartId }
     );
-    const [sectionOpen, setSectionOpen] = useState(false);
+    const [sectionOpen, setSectionOpen] = useState(true);
+    const [couponModalOpen, setCouponModalOpen] = useState(false);
 
     const handleApplyFromClaim = useCallback(async (item) => {
         if (!item?.code || !cartId) return;
@@ -48,6 +51,10 @@ const PriceAdjustments = props => {
         }
     }, [applyCoupon, cartId, setPageIsUpdating]);
 
+    const handleViewCoupons = useCallback(() => {
+        setCouponModalOpen(true);
+    }, [setCouponModalOpen]);
+
     const handleRemoveCoupon = useCallback(async () => {
         if (!cartId) return;
         try {
@@ -64,62 +71,63 @@ const PriceAdjustments = props => {
 
     return (
         <div className={classes.root}>
-            <Accordion
-                canOpenMultiple={true}
-                classes={{
-                    root: 'w-full'
-                }}
-            >
-                <Section
-                    data-cy="PriceAdjustments-couponCodeSection"
-                    id={'coupon_code'}
-                    title={formatMessage({
+            <div className={classes.coupon_container}>
+                <h5 className={classes.cardTitle}>
+                    {formatMessage({
                         id: 'checkoutPage.couponCode',
-                        defaultMessage: 'Apply Coupon Code'
+                        defaultMessage: 'Apply Coupon'
                     })}
-                    classes={{
-                        root: cn('border border-gray-100 rounded-md max-w-[400px] p-2.5'),
-                        title: 'text-[16px] font-medium cursor-pointer',
-                        title_wrapper: 'gap-sm grid grid-cols-1 grid-flow-col h-[38px] items-center justify-items-start',
-                        contents_container: 'p-0'
-                    }}
-                    onClick={() => setSectionOpen(prev => !prev)}
-                >
-                    <Suspense fallback={<LoadingIndicator />}>
-                        {sectionOpen && (
-                            <SellerCouponCheckout
-                                couponData={couponData}
-                                couponLoading={couponLoading || applyingCoupon || appliedLoading || removingCoupon}
-                                couponError={couponError}
-                                autoOpen={true}
-                                closeOnClaim={true}
-                                onSelectCoupon={handleApplyFromClaim}
-                                onTriggerRender={() => null}
-                            />
-                        )}
-                        {appliedCoupons.length > 0 && (
-                            <div className="mt-3 flex items-center gap-2 flex-wrap">
-                                {appliedCoupons.map(c => (
-                                    <div key={c.code} className="flex items-center gap-2 bg-[#fff8f1] border border-[#ffb891] rounded px-2 py-1 text-sm font-medium text-[#f76b1c]">
-                                        <span>{c.code}</span>
-                                        <button
-                                            type="button"
-                                            onClick={handleRemoveCoupon}
-                                            disabled={removingCoupon}
-                                            className="text-[#a94442] hover:text-[#f26313] disabled:opacity-50"
-                                            aria-label={formatMessage({ id: 'checkoutPage.removeCoupon', defaultMessage: 'Remove coupon' })}
-                                        >
-                                            ×
-                                        </button>
-                                    </div>
-                                ))}
-                            </div>
-                        )}
-                    </Suspense>
-                </Section>
-                <GiftCardSection setIsCartUpdating={setPageIsUpdating} />
-                <GiftOptionsSection />
-            </Accordion>
+                </h5>
+                {applyingCoupon || appliedLoading ? <LoadingIndicator classes={{ root: classes.loading }}>
+                    <FormattedMessage
+                        id={'checkoutPage.loadingApplyingCoupon'}
+                        defaultMessage={'Applying Coupon'}
+                    />
+                </LoadingIndicator> : removingCoupon ? <LoadingIndicator classes={{ root: classes.loading }}>
+                    <FormattedMessage
+                        id={'checkoutPage.loadingRemovingCoupon'}
+                        defaultMessage={'Removing Coupon'}
+                    />
+                </LoadingIndicator> :
+                <Suspense fallback={<LoadingIndicator />}>
+                    <CouponCode setIsCartUpdating={setPageIsUpdating} />
+                    {appliedCoupons.length > 0 && (
+                        <div className="mt-3 flex items-center gap-2 flex-wrap">
+                            {appliedCoupons.map(c => {
+                                const coupon = couponData.sellerCoupons.items.find(item => item.code === c.code);
+                                return <div key={c.code} className="flex items-center gap-2 bg-[#fff8f1] border border-[#ffb891] rounded px-2 py-1 text-sm font-medium text-[#f76b1c]">
+                                    <span>{coupon.name} ({coupon.code})</span>
+                                    <button
+                                        type="button"
+                                        onClick={handleRemoveCoupon}
+                                        disabled={removingCoupon}
+                                        className="text-[#a94442] hover:text-[#f26313] disabled:opacity-50"
+                                        aria-label={formatMessage({ id: 'checkoutPage.removeCoupon', defaultMessage: 'Remove coupon' })}
+                                    >
+                                        ×
+                                    </button>
+                                </div>
+                            })}
+                        </div>
+                    )}
+                    {!appliedCoupons.length && couponData?.sellerCoupons?.items.length ? <button class="p-2 text-[13px] text-blue-700 border border-solid cursor-pointer rounded-full w-full mt-4" onClick={handleViewCoupons}>Select coupon to apply</button> : ''}
+                    {couponModalOpen && (
+                        <SellerCouponCheckout
+                            couponData={couponData}
+                            couponLoading={couponLoading || applyingCoupon || appliedLoading || removingCoupon}
+                            couponError={couponError}
+                            autoOpen={true}
+                            closeOnClaim={true}
+                            couponModalOpen={couponModalOpen}
+                            setCouponModalOpen={setCouponModalOpen}
+                            onSelectCoupon={handleApplyFromClaim}
+                            onTriggerRender={() => null}
+                        />
+                    )}
+                </Suspense>}
+            </div>
+            <GiftCardSection setIsCartUpdating={setPageIsUpdating} />
+            <GiftOptionsSection />
         </div>
     );
 };

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

@@ -1,2 +1,31 @@
 .root {
+    composes: gap-xs from global;
+    composes: grid from global;
+    composes: grid-cols-1 from global;
 }
+
+.coupon_container {
+    composes: border from global;
+    composes: p-4 from global;
+    composes: pb-6 from global;
+    composes: border-gray-100 from global;
+    composes: rounded-md from global;
+}
+
+.loading {
+    composes: root from '@magento/venia-ui/lib/components/LoadingIndicator/indicator.module.css';
+
+    composes: text-center from global;
+}
+
+.heading {
+    composes: border-0 from global;
+
+    composes: lg_border from global;
+}
+
+.cardTitle {
+    composes: font-medium from global;
+    composes: text-[16px] from global;
+    composes: mb-4 from global;
+}

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

@@ -345,7 +345,7 @@ const CheckoutPage = props => {
                         : '')
                 }
             >
-                <OrderSummary isUpdating={isUpdating} />
+                <OrderSummary isUpdating={isUpdating} placeOrderButton={placeOrderButton} />
                 {itemsReview}
             </div>
         );
@@ -430,7 +430,7 @@ const CheckoutPage = props => {
                 {priceAdjustmentsSection}
                 {reviewOrderButton}
                 {orderSummary}
-                {placeOrderButton}
+                {/* {placeOrderButton} */}
                 <GoogleReCaptcha {...recaptchaWidgetProps} />
             </div>
         );

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

@@ -190,6 +190,8 @@
     grid-column: 1 / span 1;
     composes: m-auto from global;
     text-transform: capitalize;
+    composes: w-full from global;
+    composes: mt-4 from global;
 }
 .place_order_button:hover,
 .place_order_button:focus,

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

@@ -0,0 +1 @@
+export { default as ReviewModal } from './reviewModal';

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

@@ -0,0 +1,316 @@
+import React, { useMemo, useState, useEffect } from 'react';
+import Modal from '@riosst100/pwa-marketplace/src/components/Modal';
+import { X } from 'react-feather';
+import { Text } from 'informed';
+
+import Field from '@magento/venia-ui/lib/components/Field';
+// 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 StarRating from './starInput';
+
+import { primary900 } from '@riosst100/pwa-marketplace/src/theme/vars';
+import { useReviewModal } from '@riosst100/pwa-marketplace/src/talons/ReviewModal/useReviewModal';
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import defaultClasses from '../orderRow.module.css';
+import cn from 'classnames';
+
+import { arrayOf, number, shape, string } from 'prop-types';
+import { ChevronDown, ChevronUp } from 'react-feather';
+import { FormattedMessage, useIntl } from 'react-intl';
+import Price from '@magento/venia-ui/lib/components/Price';
+
+import Icon from '@magento/venia-ui/lib/components/Icon';
+import CollapsedImageGallery from '../collapsedImageGallery';
+import OrderProgressBar from '../orderProgressBar';
+import OrderDetails from '../OrderDetails';
+import { Verify, Shop, ConvertCard } from 'iconsax-react';
+import PlaceholderImage from '@magento/venia-ui/lib/components/Image/placeholderImage';
+import { Link, useHistory } from 'react-router-dom';
+
+const ReviewModal = (props) => {
+    const { reviewOrder, setReviewOrder } = props;
+
+    const [submitting, setSubmitting] = useState(false)
+
+    const classes = useStyle(defaultClasses, props.classes);
+
+    const talonProps = useReviewModal({ reviewOrder, setSubmitting });
+
+    const { 
+        ratingsMetadata,
+        loadingRatingsMetadata,
+        handleSubmitReview,
+        loadingCreateReview,
+        errorCreateReview,
+        defaultNickname,
+        handleToastAction
+     } = talonProps;
+
+    const [formState, setFormState] = useState({ nickname: defaultNickname || '' });
+
+    useEffect(() => {
+        if (reviewOrder && defaultNickname && !formState.nickname) {
+            setFormState(prev => ({ ...prev, nickname: defaultNickname }));
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [reviewOrder, defaultNickname]);
+
+    // ratings: [{ id, value_id }]
+    const [ratings, setRatings] = useState(null);
+
+    const handleRatingChange = (id, value_id) => {
+        // setRatings(prev => {
+        //     const filtered = prev.filter(r => r.id !== id);
+        //     return [...filtered, { id, value_id }];
+        // });
+        setRatings(value_id)
+    };
+
+    const handleChange = (field, value) => {
+        setFormState(prev => ({ ...prev, [field]: value }));
+    };
+
+    const handleSubmit = async (e) => {
+        e.preventDefault();
+        // if (onSubmit) {
+        //     onSubmit({ ...formState, ratings });
+        // }
+        console.log('formState',formState)
+        console.log('e',e)
+        setSubmitting(true);
+        const input = {
+            nickname: formState.nickname,
+            summary: formState.summary,
+            text: formState.review,
+            sku: e.target.sku.value,
+            ratings: [{
+                id: ratingsMetadata.id,
+                value_id: ratings
+            }]
+        };
+        const result = await handleSubmitReview(input);
+        setSubmitting(false);
+        if (result.success) setReviewOrder(null);
+    };
+
+    // Helper to resolve a product image by SKU with graceful fallback, now prefers product_image_url from order.items
+    const getThumbnailForSku = (sku, fallbackLabel, idx) => {
+        let url = null;
+        let label = fallbackLabel;
+        // Prefer product_image_url from order.items if present and is a non-empty string
+        if (reviewOrder && reviewOrder.items && reviewOrder.items[idx] && typeof reviewOrder.items[idx].product_image_url === 'string' && reviewOrder.items[idx].product_image_url.trim() !== '') {
+            url = reviewOrder.items[idx].product_image_url;
+        } else if (imagesData && typeof imagesData === 'object') {
+            const byKey = sku && imagesData[sku];
+            const byValue = !byKey && sku
+                ? Object.values(imagesData).find(entry => entry?.sku === sku)
+                : null;
+            const chosen = byKey || byValue;
+            if (chosen?.thumbnail?.url && typeof chosen.thumbnail.url === 'string' && chosen.thumbnail.url.trim() !== '') {
+                url = chosen.thumbnail.url;
+                label = chosen.thumbnail.label || label;
+            }
+        }
+        // If url is not a non-empty string, fallback to null (will trigger placeholder)
+        if (typeof url !== 'string' || url.trim() === '') {
+            url = null;
+        }
+        return { url, label };
+    };
+
+    console.log('ratings',ratings)
+
+    const ratingStars = useMemo(() => {
+        console.log('ratingsMetadata22',ratingsMetadata)
+        if (!ratingsMetadata) {
+            return '';
+        }
+
+        // Find value (1-5) for selected value_id
+        const selectedValue = ratings && ratingsMetadata.values.find(v => v.value_id === ratings) || '';
+        console.log('selectedValue',selectedValue)
+
+        let starButtons = [];
+
+        [1,2,3,4,5].map(star => {
+            const valObj = ratingsMetadata.values.find(v => v.value === String(star));
+            console.log('String(star)',String(star))
+            console.log('valObj',valObj)
+            if (valObj) {
+                starButtons.push(
+                    <button
+                        key={valObj.value_id}
+                        type="button"
+                        aria-label={`${star} star${star > 1 ? 's' : ''}`}
+                        className={`focus:outline-none ${selectedValue.value == star ? 'text-yellow-400' : 'text-gray-300'}`}
+                        onClick={() => handleRatingChange(ratingsMetadata.id, valObj.value_id)}
+                    >
+                        <svg xmlns="http://www.w3.org/2000/svg" fill={selectedValue.value >= star ? '#F7C317' : '#D9D9D9'} viewBox="0 0 20 20" width="25" height="25">
+                            <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>
+                );
+            }
+        });
+
+        return (
+            <div className="mb-2">
+                <label className="block mb-1 font-bold text-gray-700">{ratingsMetadata.name}</label>
+                <div className="flex items-center gap-1">
+                    {starButtons}
+                </div>
+            </div>
+        );
+    }, [ratingsMetadata, ratings]);
+
+    return (
+        <>
+            <Modal
+                open={reviewOrder}
+                className="modal_form_review !p-[30px] md_min-w-[650px]"
+            >
+                <div className='form_review-container'>
+                    <div className='header_title-modal flex justify-between mb-5'>
+                        <div className='text-lg text-black font-medium'>
+                            Write Review
+                        </div>
+                        <button onClick={() => { setReviewOrder(!reviewOrder) }} >
+                            <X size={24} color={primary900} />
+                        </button>
+                    </div>
+                    
+                        {/* <Field id="nickname_field" label={'Nickname'}>
+                            <input
+                                id="nickname"
+                                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> */}
+                        {/* Ratings breakdown from metadata */}
+                        {reviewOrder && reviewOrder.items && reviewOrder.items.length > 0 && reviewOrder.items.map((it, idx) => {
+                            const { url, label } = getThumbnailForSku(it.product_sku, it.product_name, idx);
+                            return (
+                                <>
+                                <form className="flex flex-col gap-y-3" onSubmit={handleSubmit}>
+                                <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
+                                                src={url}
+                                                alt={label}
+                                                width={80}
+                                                className={classes.thumbnail}
+                                            />
+                                        ) : (
+                                            <PlaceholderImage alt={it.product_name} classes={{ root: classes.thumbnail }} width={60} />
+                                        )}
+                                    </div>
+                                    <div className='flex flex-col gap-1 pb-2 last_pb-0 max-w-[375px]'>
+                                        <div className={cn(classes.productName, 'text-[14px] font-medium')}>
+                                            <span>{it.product_name}</span>
+                                        </div>
+                                        <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>
+                                <div className="flex flex-col gap-y-3">
+                                    {loadingRatingsMetadata ? (
+                                        <div>Loading ratings...</div>
+                                    ) : ratingStars}
+                                </div>
+                                <input type="hidden" id="sku" name="sku" value={it.product_sku} />
+                                {/* <Field id="summary_field" label={'Summary'}>
+                                    <input
+                                        id="summary"
+                                        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="summary_field" label={'Summary'}>
+                                    <input
+                                        id="summary"
+                                        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'}>
+                                    <textarea
+                                        id="review"
+                                        name="review"
+                                        required
+                                        value={formState.review || ''}
+                                        onChange={e => handleChange('review', e.target.value)}
+                                        data-cy="review"
+                                        aria-label={'review'}
+                                        placeholder={'Let us know your thoughts'}
+                                        className="border border-gray-100 rounded px-3 py-2"
+                                        rows={3}
+                                    />
+                                </Field>
+                                <div className='actions flex justify-end gap-x-2.5 mt-4'>
+                            {/* <Button
+                                priority='low'
+                                classes={{
+                                    content: 'capitalize text-[16px] font-medium'
+                                }}
+                                onClick={() => setReviewOrder(false)}
+                                type="button"
+                            >
+                                Cancel
+                            </Button> */}
+                            <Button
+                                priority='high'
+                                classes={{
+                                    content: 'capitalize text-[16px] font-medium'
+                                }}
+                                type="submit"
+                                disabled={submitting}
+                            >
+                                {submitting ? 'Submitting...' : 'Submit Review'}
+                            </Button>
+                        </div>
+                    </form>
+                                </>
+                            );
+                        })}
+                        
+                </div>
+            </Modal>
+        </>
+    );
+};
+
+export default ReviewModal;

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

@@ -0,0 +1,33 @@
+import React, { useState } from 'react';
+
+const StarRating = ({ totalStars = 5, rating, onRatingChange }) => {
+    const [hover, setHover] = useState(0);
+
+    const handleClick = (newRating) => {
+        onRatingChange(newRating);
+    };
+
+    return (
+        <div className="star-rating flex flex-row gap-x-1">
+            {[...Array(totalStars)].map((star, index) => {
+                const ratingClass = index < (hover || rating) ? 'filled text-yellow-400' : 'empty text-gray-400';
+                return (
+                    <span
+                        key={index}
+                        className={`star ${ratingClass}`}
+                        onMouseEnter={() => setHover(index + 1)}
+                        onMouseLeave={() => setHover(0)}
+                        onClick={() => handleClick(index + 1)}
+                    >
+                        <svg className={ratingClass} width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <path d="M8.00887 2.04754L9.03554 4.10087C9.17554 4.38671 9.54887 4.66087 9.86387 4.71337L11.7247 5.02254C12.9147 5.22087 13.1947 6.08421 12.3372 6.93587L10.8905 8.38254C10.6455 8.62754 10.5114 9.10004 10.5872 9.43837L11.0014 11.2292C11.328 12.6467 10.5755 13.195 9.32137 12.4542L7.5772 11.4217C7.2622 11.235 6.74304 11.235 6.4222 11.4217L4.67804 12.4542C3.4297 13.195 2.67137 12.6409 2.99804 11.2292L3.4122 9.43837C3.48804 9.10004 3.35387 8.62754 3.10887 8.38254L1.6622 6.93587C0.810536 6.08421 1.0847 5.22087 2.2747 5.02254L4.13554 4.71337C4.4447 4.66087 4.81804 4.38671 4.95804 4.10087L5.9847 2.04754C6.5447 0.933372 7.4547 0.933372 8.00887 2.04754Z" fill="currentColor" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" />
+                        </svg>
+
+                    </span>
+                );
+            })}
+        </div>
+    );
+};
+
+export default StarRating;

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

@@ -1,4 +1,4 @@
-import React, { useMemo, useEffect } from 'react';
+import React, { useMemo, useEffect, useState } from 'react';
 import { useIntl, FormattedMessage } from 'react-intl';
 import {
     Search as SearchIcon,
@@ -25,6 +25,7 @@ import ResetButton from './resetButton';
 import { SearchNormal } from 'iconsax-react';
 import cn from 'classnames';
 import Pagination from '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/Pagination';
+import { ReviewModal } from './Reviews'
 
 const errorIcon = (
     <Icon
@@ -52,6 +53,8 @@ const OrderHistoryPage = props => {
     } = talonProps;
     const [, { addToast }] = useToasts();
     const { formatMessage } = useIntl();
+    const [reviewOrder, setReviewOrder] = useState(null);
+
     const PAGE_TITLE = formatMessage({
         id: 'orderHistoryPage.pageTitleText',
         defaultMessage: 'My Orders'
@@ -73,7 +76,7 @@ const OrderHistoryPage = props => {
 
     const orderRows = useMemo(() => {
         return orders.map(order => {
-            return <OrderRow key={order.id} order={order} />;
+            return <OrderRow setReviewOrder={setReviewOrder} key={order.id} order={order} />;
         });
     }, [orders]);
 
@@ -163,8 +166,32 @@ const OrderHistoryPage = props => {
         }
     }, [addToast, errorMessage]);
 
+    console.log('reviewOrder',reviewOrder)
+
     return (
         <OrderHistoryContextProvider>
+            <ReviewModal
+                // open={open}
+                setReviewOrder={setReviewOrder}
+                reviewOrder={reviewOrder}
+                // 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={classes.root}>
                 <StoreTitle>{PAGE_TITLE}</StoreTitle>
                 <div aria-live="polite" className="text-xl font-medium text-left">