@riosst100/pwa-marketplace 1.5.1 → 1.5.3

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

@@ -0,0 +1,164 @@
+import React, { useState } 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 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 } = props;
+    const [currentRating, setCurrentRating] = useState(0);
+
+    const handleRatingChange = (newRating) => {
+        setCurrentRating(newRating);
+    };
+
+
+    return (
+        <>
+            <Modal
+                open={open}
+                className="modal_form_review !p-[30px] md_min-w-[650px]"
+            >
+                <div className='form_review-container'>
+                    <div className='header_title-modal flex justify-between mb-10'>
+                        <div className='text-lg text-black font-semibold'>
+                            Write Review
+                        </div>
+                        <button onClick={() => { setOpen(!open) }} >
+                            <X size={24} color={primary900} />
+                        </button>
+                    </div>
+
+                    <Form
+                        data-cy="form_review"
+                        className="flex flex-col gap-y-6"
+                        initialValues={{}}
+                        onSubmit={() => { }}
+                        onChange={() => { }}
+                    >
+                        <Field
+                            id="nickname_field"
+                            label={'Nickname'}
+                        >
+                            <TextInput
+                                id="nickname"
+                                field="nickname"
+                                validate={isRequired}
+                                validateOnBlur
+                                mask={value => value && value.trim()}
+                                maskOnBlur={true}
+                                data-cy="nickname"
+                                aria-label={'nickname'}
+                                placeholder={'e.g John Doe'}
+                            />
+                        </Field>
+
+                        <Field
+                            id="rating_field"
+                            label={'Rating'}
+                        >
+                            <StarRating rating={currentRating} onRatingChange={handleRatingChange} />
+                        </Field>
+
+                        <Field
+                            id="summary_field"
+                            label={'Summary'}
+                        >
+                            <TextInput
+                                id="summary"
+                                field="summary"
+                                validate={isRequired}
+                                validateOnBlur
+                                mask={value => value && value.trim()}
+                                maskOnBlur={true}
+                                data-cy="summary"
+                                aria-label={'summary'}
+                                placeholder={'Summary of your rating'}
+                            />
+                        </Field>
+
+                        <Field
+                            id="review_field"
+                            label={'Review'}
+                        >
+                            <TextInput
+                                id="review"
+                                field="review"
+                                validate={isRequired}
+                                validateOnBlur
+                                mask={value => value && value.trim()}
+                                maskOnBlur={true}
+                                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'}
+                            />
+                        </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'
+                                classes={{
+                                    content: 'capitalize text-[16px] font-semibold'
+                                }}
+                                onClick={() => setOpen(false)}
+                            >
+                                Cancel
+                            </Button>
+                            <Button
+                                priority='high'
+                                classes={{
+                                    content: 'capitalize text-[16px] font-semibold'
+                                }}
+                            >
+                                Submit Review
+                            </Button>
+                        </div>
+                    </Form>
+                </div>
+            </Modal>
+        </>
+    )
+}
+
+export default modalFormReview

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

@@ -0,0 +1,52 @@
+import React from 'react';
+import cn from 'classnames';
+import Divider from '@riosst100/pwa-marketplace/src/components/Divider';
+
+const preOrderInfo = (props) => {
+    const { className } = props
+    return (
+        <>
+            <div
+                className={cn(
+                    'flex flex-col border border-gray-100 rounded-lg p-5 gap-2.5',
+                    className
+                )}
+            >
+                <div className='flex flex-row justify-between'>
+                    <div className='flex flex-col gap-2.5'>
+                        <div className='text-[14px] font-medium text-gray-500'>
+                            Release Date
+                        </div>
+                        <div className='text-[16px] font-semibold text-colorDefault text-center'>
+                            27, February 2024
+                        </div>
+                    </div>
+                    <Divider className="w-[1px] h-[50px]" />
+                    <div className='flex flex-col gap-2.5'>
+                        <div className='text-[14px] font-medium text-gray-500'>
+                            Last Date
+                        </div>
+                        <div className='text-[16px] font-semibold text-colorDefault text-center'>
+                            31, March 2024
+                        </div>
+                    </div>
+                    <Divider className="w-[1px] h-[50px]" />
+                    <div className='flex flex-col gap-2.5'>
+                        <div className='text-[14px] font-medium text-gray-500'>
+                            Deposite
+                        </div>
+                        <div className='text-[16px] font-semibold text-colorDefault text-center'>
+                            40%
+                        </div>
+                    </div>
+                </div>
+
+                <p>
+                    Notes : Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh viverra non semper suscipit posuere a pede.
+                </p>
+            </div>
+        </>
+    )
+}
+
+export default preOrderInfo

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

@@ -1,54 +1,62 @@
-import React from 'react'
+import React, { useState } from 'react'
 import Review from '@riosst100/pwa-marketplace/src/components/SellerReviewItem';
 import { Star1 } from 'iconsax-react';
 import Button from '../../Button';
+import ModalFormReview from './modalFormReview';
 
 const productReview = (props) => {
 
     const { className } = props;
 
+    const [open, setOpen] = useState(false);
+
     return (
-        <div className={className}>
-            <div className='review-summary flex justify-between mb-[30px] pb-[30px] border-b border-gray-100'>
-                <div className="justify-start items-end gap-[15px] inline-flex">
-                    <div className="text-center text-zinc-900 text-[40px] font-semibold leading-10">4.7</div>
-                    <div className="flex-col justify-start items-start gap-[9px] inline-flex">
-                        <div className="justify-start items-start gap-1.5 inline-flex">
-                            <div className="w-3.5 h-3.5 relative">
-                                <Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
-                            </div>
-                            <div className="w-3.5 h-3.5 relative">
-                                <Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
-                            </div>
-                            <div className="w-3.5 h-3.5 relative">
-                                <Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
-                            </div>
-                            <div className="w-3.5 h-3.5 relative">
-                                <Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
-                            </div>
-                            <div className="w-3.5 h-3.5 relative">
-                                <Star1 color='#D9D9D9' size={14} className='fill-[#D9D9D9]' />
+        <>
+            <ModalFormReview open={open} setOpen={setOpen} />
+            <div className={className}>
+                <div className='review-summary flex justify-between mb-[30px] pb-[30px] border-b border-gray-100'>
+                    <div className="justify-start items-end gap-[15px] inline-flex">
+                        <div className="text-center text-zinc-900 text-[40px] font-semibold leading-10">4.7</div>
+                        <div className="flex-col justify-start items-start gap-[9px] inline-flex">
+                            <div className="justify-start items-start gap-1.5 inline-flex">
+                                <div className="w-3.5 h-3.5 relative">
+                                    <Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
+                                </div>
+                                <div className="w-3.5 h-3.5 relative">
+                                    <Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
+                                </div>
+                                <div className="w-3.5 h-3.5 relative">
+                                    <Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
+                                </div>
+                                <div className="w-3.5 h-3.5 relative">
+                                    <Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
+                                </div>
+                                <div className="w-3.5 h-3.5 relative">
+                                    <Star1 color='#D9D9D9' size={14} className='fill-[#D9D9D9]' />
+                                </div>
                             </div>
+                            <div className="text-center text-zinc-900 text-sm font-normal leading-[18px]">(26 Reviews)</div>
                         </div>
-                        <div className="text-center text-zinc-900 text-sm font-normal leading-[18px]">(26 Reviews)</div>
                     </div>
+                    <Button
+                        priority='low'
+                        classes={{
+                            content: 'normal-case font-normal text-base'
+                        }}
+                        onClick={() => setOpen(true)}
+                    >
+                        Write a review
+                    </Button>
+                </div>
+                <div className='review-list flex flex-col gap-y-4'>
+                    <Review />
+                    <Review />
+                    <Review />
+                    <Review />
+                    <Review />
                 </div>
-                <Button
-                    classes={{
-                        content: 'normal-case font-normal text-base'
-                    }}
-                >
-                    Write a review
-                </Button>
-            </div>
-            <div className='review-list flex flex-col gap-y-4'>
-                <Review />
-                <Review />
-                <Review />
-                <Review />
-                <Review />
             </div>
-        </div>
+        </>
     )
 }
 

package/src/overwrites/venia-ui/lib/components/ProductFullDetail/components/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/ProductFullDetail/productFullDetail.js

@@ -30,6 +30,8 @@ import Divider from '@riosst100/pwa-marketplace/src/components/Divider';
 const WishlistButton = React.lazy(() => import('@magento/venia-ui/lib/components/Wishlist/AddToListButton'));
 const Options = React.lazy(() => import('@magento/venia-ui/lib/components/ProductOptions'));
 import Share from '@riosst100/pwa-marketplace/src/components/SocialMediaShare';
+import PreorderDetail from './components/preOrderDetail';
+import AuctionDetail from './components/auctionDetail';
 
 // Correlate a GQL error message to a field. GQL could return a longer error
 // string but it may contain contextual info such as product id. We can use
@@ -195,7 +197,52 @@ const ProductFullDetail = props => {
         );
     // Error message for screen reader
     const cartActionContent = isSupportedProductType ? (
-        <section className={classes.actButton}>
+        <section className={cn(classes.actButton, 'flex gap-x-[30px]')}>
+
+            <Button
+                data-cy="ProductFullDetail-addToCartButton"
+                disabled={isAddToCartDisabled}
+                aria-disabled={isAddToCartDisabled}
+                aria-label={
+                    isEverythingOutOfStock
+                        ? formatMessage({
+                            id: 'productFullDetail.outOfStockProduct',
+                            defaultMessage:
+                                'This item is currently out of stock'
+                        })
+                        : ''
+                }
+                classes={{
+                    content: 'normal-case font-semibold text-[16px]'
+                }}
+                priority="low"
+                type="submit"
+            >
+                Buy Now
+            </Button>
+
+            <Button
+                data-cy="ProductFullDetail-addToCartButton"
+                disabled={isAddToCartDisabled}
+                aria-disabled={isAddToCartDisabled}
+                aria-label={
+                    isEverythingOutOfStock
+                        ? formatMessage({
+                            id: 'productFullDetail.outOfStockProduct',
+                            defaultMessage:
+                                'This item is currently out of stock'
+                        })
+                        : ''
+                }
+                classes={{
+                    content: 'normal-case font-semibold text-[16px]'
+                }}
+                priority="low"
+                type="submit"
+            >
+                Make An Offer
+            </Button>
+
             <Button
                 data-cy="ProductFullDetail-addToCartButton"
                 disabled={isAddToCartDisabled}
@@ -210,7 +257,7 @@ const ProductFullDetail = props => {
                         : ''
                 }
                 classes={{
-                    content: 'normal-case font-normal text-base'
+                    content: 'normal-case font-semibold text-[16px]'
                 }}
                 priority="high"
                 type="submit"
@@ -334,9 +381,17 @@ const ProductFullDetail = props => {
 
     const ProductFAQ = () => (
         <div className={cn(contentContainerClass)}>
-            <p>
-                Frequently Ask Question
-            </p>
+            {customAttributesList.map((data, index) => {
+                if (data.code == "faq") {
+                    return (
+                        <RichText
+                            rootClassName="px-0"
+                            content={data.value}
+                        />
+                    );
+                }
+            })}
+
         </div>
     )
 
@@ -390,7 +445,7 @@ const ProductFullDetail = props => {
             >
                 <section className={classes.leftContainer}>
                     <Carousel images={mediaGalleryEntries} />
-                    <div className='product_group-actions flex gap-x-[18px] gap-y-4 justify-center items-center'>
+                    <div className='product_group-actions flex gap-x-[18px] gap-y-4 justify-center items-center mt-5'>
                         <Suspense fallback={null}>
                             <WishlistButton
                                 classes={{
@@ -456,24 +511,33 @@ const ProductFullDetail = props => {
                     <div
                         className={cn(
                             'product_price_container',
-                            'py-[30px]'
+                            'py-[30px] flex justify-between flex-wrap gap-y-5'
                         )}
                     >
-                        <p
-                            data-cy="ProductFullDetail-productPrice"
-                            className={cn(
-                                classes.productPrice,
-                                'text-[32px] font-semibold leading-[32px] mb-[15px]',
-                            )}
-                        >
-                            <Price
-                                currencyCode={productDetails.price.currency}
-                                value={productDetails.price.value}
-                            />
-                        </p>
-                        <small className='shipping-calculation-notes text-gray-200 text-xs'>
-                            Shipping method is calculated on checkout
-                        </small>
+                        <div className='flex flex-col gap-y-5 max-w-[448px]'>
+                            <p
+                                data-cy="ProductFullDetail-productPrice"
+                                className={cn(
+                                    classes.productPrice,
+                                    'text-[32px] font-semibold leading-[32px] mb-0',
+                                )}
+                            >
+                                <Price
+                                    currencyCode={productDetails.price.currency}
+                                    value={productDetails.price.value}
+                                />
+                            </p>
+                            <AuctionDetail className="auction_detail-container" />
+                            <PreorderDetail className={'preorder_detail-container'} />
+                            <small className='shipping-calculation-notes text-gray-200 text-xs'>
+                                Shipping method is calculated on checkout
+                            </small>
+                        </div>
+                        <div>
+                            <p className='text-gray-200 text-[14px]'>
+                                SKU : {productDetails.sku}
+                            </p>
+                        </div>
                     </div>
                     <Divider />
                     <FormError

package/src/overwrites/venia-ui/lib/components/SearchBar/autocomplete.js

@@ -7,6 +7,7 @@ import { useIntl } from 'react-intl';
 import defaultClasses from './autocomplete.module.css';
 import { useStyle } from '@magento/venia-ui/lib/classify';
 import Suggestions from './suggestions';
+import cn from 'classnames';
 
 const GET_AUTOCOMPLETE_RESULTS = gql`
     query getAutocompleteResults($inputText: String!) {
@@ -136,7 +137,10 @@ const Autocomplete = props => {
             : messageTpl;
 
     return (
-        <div data-cy="Autocomplete-root" className={rootClassName}>
+        <div
+            data-cy="Autocomplete-root"
+            className={cn(rootClassName)}
+        >
             <label
                 id="search_query"
                 data-cy="Autocomplete-message"

package/src/overwrites/venia-ui/lib/components/SearchBar/autocomplete.module.css

@@ -1,21 +1,20 @@
 .root {
     composes: absolute from global;
     composes: bg-white from global;
-    composes: border-2 from global;
-    composes: border-input from global;
+    composes: border from global;
+    composes: border-gray-100 from global;
     composes: border-solid from global;
-    composes: border-t-0 from global;
     composes: gap-3 from global;
     composes: grid from global;
     composes: left-0 from global;
     composes: p-xs from global;
     composes: right-0 from global;
     composes: rounded-b-md from global;
-    composes: rounded-t-none from global;
-    composes: shadow-inputFocus from global;
+    composes: rounded-t-md from global;
     composes: text-base from global;
     composes: top-9 from global;
     composes: z-menu from global;
+    composes: mt-3 from global;
     transition-property: opacity, transform, visibility;
 }
 
@@ -59,4 +58,4 @@
 /* TODO @TW: cannot compose */
 .suggestions:empty {
     display: none;
-}
+}

package/src/overwrites/venia-ui/lib/components/SearchBar/searchBar.js

@@ -8,6 +8,8 @@ import { useStyle } from '@magento/venia-ui/lib/classify';
 import Autocomplete from './autocomplete';
 import SearchField from './searchField';
 import defaultClasses from './searchBar.module.css';
+import Dropdown from '@riosst100/pwa-marketplace/src/components/Dropdown';
+import cn from 'classnames';
 
 const SearchBar = React.forwardRef((props, ref) => {
     const { isOpen } = props;
@@ -26,6 +28,16 @@ const SearchBar = React.forwardRef((props, ref) => {
     const classes = useStyle(defaultClasses, props.classes);
     const rootClassName = isOpen ? classes.root_open : classes.root;
     const { formatMessage } = useIntl();
+
+    const options = [
+        { value: '2', label: 'Action Figures' },
+        { value: '3', label: 'Anime' },
+    ];
+
+    const handleSelect = (option) => {
+        console.log('Selected:', option);
+    };
+
     return (
         <div className={rootClassName} data-cy="SearchBar-root" ref={ref}>
             <div ref={containerRef} className={classes.container}>
@@ -35,7 +47,21 @@ const SearchBar = React.forwardRef((props, ref) => {
                     initialValues={initialValues}
                     onSubmit={handleSubmit}
                 >
-                    <div className={classes.search}>
+                    <div
+                        className={cn(
+                            classes.search,
+                            'flex flex-row relative border border-gray-100 rounded-full'
+                        )}
+                    >
+                        <Dropdown
+                            placeholder="All Category"
+                            options={options}
+                            onSelect={handleSelect}
+                            rootClassName="!static"
+                            optionsClassName="w-full grid grid-cols-4 !mt-2.5"
+                            optionItemClassName="hover_bg-white hover_text-blue-400 font-medium"
+                            className="border-none after_w-[1px] after_h-[18px] after_bg-gray-100 h-10"
+                        />
                         <SearchField
                             addLabel={formatMessage({
                                 id: 'global.clearText',

package/src/overwrites/venia-ui/lib/components/SearchBar/searchBar.module.css

@@ -38,7 +38,6 @@
 }
 
 .search {
-    composes: grid from global;
     composes: relative from global;
 }
 

package/src/overwrites/venia-ui/lib/components/SearchBar/searchField.js

@@ -13,7 +13,13 @@ const SearchField = props => {
     const handleSearch = () => {
     }
     const searchButton =
-        <Trigger action={handleSearch} addLabel={addLabel}>
+        <Trigger
+            action={handleSearch}
+            addLabel={addLabel}
+            classes={{
+                root: 'bg-transparent'
+            }}
+        >
             <SearchNormal size="18" color="#280135" variant="Outline" />
         </Trigger>
 
@@ -27,8 +33,9 @@ const SearchField = props => {
             onValueChange={onChange}
             forwardedRef={inputRef}
             className={{
-                inputClassName: cn('rounded-full border-[1px] border-gray-100')
+                inputClassName: cn('border-none bg-transparent rounded-r-full')
             }}
+            placeholder="Search..."
         />
     );
 };