@riosst100/pwa-marketplace 3.0.3 → 3.0.5

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

@@ -84,7 +84,7 @@ const CheckoutPage = props => {
         toggleAddressBookContent,
         toggleSignInContent
     } = talonProps;
-
+    
     const [, { addToast }] = useToasts();
 
     const history = useHistory();
@@ -301,7 +301,12 @@ const CheckoutPage = props => {
         // Show ItemsReview from the beginning, not only at the REVIEW step
         const itemsReview = (
             <div className={classes.items_review_container}>
-                <ItemsReview />
+                <ItemsReview
+                    isPreorder={cartItems?.[0]?.is_preorder}
+                    preOrderDeposit={cartItems?.[0]?.pre_order_deposit}
+                    preOrderPaymentType={cartItems?.[0]?.pre_order_payment_type}
+                    releaseDate={cartItems?.[0]?.product?.release_date} 
+                />
             </div>
         );
 
@@ -345,7 +350,7 @@ const CheckoutPage = props => {
                         : '')
                 }
             >
-                <OrderSummary isUpdating={isUpdating} />
+                <OrderSummary isUpdating={isUpdating} placeOrderButton={placeOrderButton} />
                 {itemsReview}
             </div>
         );
@@ -430,7 +435,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/FilterModal/CurrentFilters/currentFilters.js

@@ -20,7 +20,7 @@ const CurrentFilters = props => {
                 const { title, value } = item || {};
                 const key = `${group}::${title}_${value}`;
 
-                const customAttributeLandingPage = ['bricks_categories','sc_sports_categories','card_game', 'sc_baseball_release','auction','special_price','lof_preorder','sc_baseball_inserts','sc_baseball_parallel','sc_set_type'];
+                const customAttributeLandingPage = ['bricks_categories','sc_sports_categories','card_game', 'sc_baseball_release','auction','special_price','lof_preorder','card_pre_orders','sc_baseball_inserts','sc_baseball_parallel','sc_set_type'];
 
                 if (!customAttributeLandingPage.includes(group)) {
                     elements.push(

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

@@ -125,7 +125,7 @@ const FilterSidebar = props => {
                 const groupName = filterNames.get(group);
                 const frontendInput = filterFrontendInput.get(group);
 
-                const hideFilters = ['card_game','bricks_categories','sc_sports_categories','trains','trains_locomotives','trains_supplies_type','lof_preorder','auction','special_price','sc_baseball_inserts','sc_baseball_parallel','sale','sc_set_type','sc_brands'];
+                const hideFilters = ['card_game','bricks_categories','sc_sports_categories','trains','trains_locomotives','trains_supplies_type','lof_preorder','card_pre_orders','auction','special_price','sc_baseball_inserts','sc_baseball_parallel','sale','sc_set_type','sc_brands'];
                 if (!allowedFiltersArr?.length || filterState.size && allowedFiltersArr.length || !filterState.size && allowedFiltersArr.length && allowedFiltersArr.includes(group)) {
                     if (!hideFilters.includes(group) && groupName && !group.includes('card_release') && !group.includes('card_set') && !group.includes('sc_set_name')) {
                     

package/src/overwrites/venia-ui/lib/components/Gallery/item.js

@@ -140,7 +140,7 @@ const GalleryItem = props => {
                         data-cy="GalleryItem-name">{name}</span>
                     {/* </Link> */}
                     <div data-cy="GalleryItem-price" className={cn(classes.price, 'mb-2.5 pt-2.5')}>
-                        <p className='font-medium !text-[#f76b1c] text-[1.1rem] !mb-1 !leading-[14px]'>
+                        <p className='font-medium !text-[#f76b1c] !mb-1'>
                             <Price
                                 value={priceSource.value}
                                 currencyCode={priceSource.currency}
@@ -154,16 +154,8 @@ const GalleryItem = props => {
                         </p> */}
                     </div>
 
-                    <div data-cy="GalleryItem-Rating" className={cn('flex gap-[5px] items-center mb-2')}>
-                        <Star />
-                        <span className='text-[12px] leading-normal'>
-                            {rating_summary}
-                        </span>
-                    </div>
-
                     <div data-cy="GalleryItem-Seller" className={cn('flex gap-[5px] items-center')}>
-                        <Verify size={17} className='text-blue-700' variant="Bold" />
-                        <span className='text-[12px] text-gray-300 leading-normal'>
+                        <span className='text-[12px] text-gray-400 leading-normal'>
                             {seller}
                         </span>
                     </div>

package/src/overwrites/venia-ui/lib/components/Gallery/item.module.css

@@ -74,11 +74,11 @@
 }
 
 .name {
-    composes: font-medium from global;
+    /* composes: font-medium from global; */
     composes: text-base from global;
     composes: mb-1 from global;
     display: -webkit-box;
-    -webkit-line-clamp: 2;
+    -webkit-line-clamp: 3;
     -webkit-box-orient: vertical;
     overflow: hidden;
     line-height: normal;
@@ -87,13 +87,14 @@
 .name,
 .price {
     composes: text-colorDefault from global;
-    composes: text-[14px] from global;
-    composes: font-medium from global;
+    /* composes: text-[14px] from global; */
+    /* composes: font-medium from global; */
     min-height: 1rem;
 }
 
 .price {
     padding-top: 2.5;
+    composes: font-medium from global;
 }
 
 .unavailableContainer {

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;