@riosst100/pwa-marketplace 2.0.9 → 2.1.0

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

@@ -0,0 +1,67 @@
+import React, { useState } from 'react';
+import { ArrowDown2 } from 'iconsax-react';
+import cn from 'classnames';
+
+const bidList = (props) => {
+    const {
+        rootClassName,
+        expanded = false,
+    } = props
+    const [expand, setExpand] = useState(expanded);
+
+    return (
+        <>
+            <div className={cn('bid_list-container w-full', rootClassName)}>
+                <div
+                    className={cn(
+                        'bid_title flex justify-between items-center border-t border-b border-gray-100',
+                        'px-2.5 py-[18px] cursor-pointer'
+                    )}
+                    onClick={() => setExpand(!expand)}
+                >
+                    <span className='text-[16px] font-medium'>
+                        Previous bids (5)
+                    </span>
+                    <ArrowDown2
+                        className={cn(
+                            'transition-all',
+                            expand ? 'rotate-180' : 'rotate-0',
+                        )}
+                        size={16}
+                    />
+                </div>
+                <div
+                    className={cn(
+                        'bid_list-wrapper transition-all mt-2.5 duration-300 ease-in-out overflow-hidden',
+                        'max-h-[250px] overflow-y-auto',
+                        expand ? 'h-auto opacity-100' : 'h-0 opacity-0'
+                    )}
+                >
+                    <table className='bid_list w-full' >
+                        {[...Array(5)].map(() => (
+                            <tr className='border-b border-dashed border-gray-100'>
+                                <td className='p-2.5'>
+                                    <span className='text-[14px] font-medium'>
+                                        $102.00
+                                    </span>
+                                </td>
+                                <td className='p-2.5'>
+                                    <span className='text-[14px] font-medium'>
+                                        Jan 7, 2024 11:18:08 AM
+                                    </span>
+                                </td>
+                                <td className='p-2.5'>
+                                    <span className='text-[14px] font-medium'>
+                                        by Ale****
+                                    </span>
+                                </td>
+                            </tr>
+                        ))}
+                    </table>
+                </div>
+            </div>
+        </>
+    )
+}
+
+export default bidList

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-medium'>
+                            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-medium'
+                                }}
+                                onClick={() => setOpen(false)}
+                            >
+                                Cancel
+                            </Button>
+                            <Button
+                                priority='high'
+                                classes={{
+                                    content: 'capitalize text-[16px] font-medium'
+                                }}
+                            >
+                                Submit Review
+                            </Button>
+                        </div>
+                    </Form>
+                </div>
+            </Modal>
+        </>
+    )
+}
+
+export default modalFormReview

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

@@ -0,0 +1,61 @@
+import React, { useMemo } from 'react';
+import cn from 'classnames';
+import Divider from '@riosst100/pwa-marketplace/src/components/Divider';
+
+const preOrderInfo = (props) => {
+    const { className, productDetails } = props
+
+    const preorderData = productDetails ? productDetails.preorder : null;
+    
+    const isPreOrder = preorderData && preorderData.is_preorder ? true : false;
+    const preOrderNotes = preorderData ? preorderData.preorder_notes : null;
+    const preOrderAvailableDate = preorderData ? new Date(preorderData.preorder_availability) : null;
+
+    const month = ["January","February","March","April","May","June","July","August","September","October","November","December"];
+
+    return isPreOrder ? (
+        <>
+            <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 gap-[20px]'>
+                    <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-medium text-colorDefault text-center'>
+                            {preOrderAvailableDate ? preOrderAvailableDate.getDate() + ', ' + month[preOrderAvailableDate.getMonth()] + ' ' + preOrderAvailableDate.getFullYear() : 'No Release Date.'}
+                            {/* 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-medium 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-medium text-colorDefault text-center'>
+                            40%
+                        </div>
+                    </div>
+                </div>
+                {preOrderNotes && <p>
+                    Notes : {preOrderNotes}
+                </p>}
+            </div>
+        </>
+    ) : ''
+}
+
+export default preOrderInfo

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

@@ -0,0 +1,63 @@
+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 (
+        <>
+            <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-medium 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>
+                    <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>
+            </div>
+        </>
+    )
+}
+
+export default productReview

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/index.js

@@ -0,0 +1 @@
+export { default } from './productFullDetail';

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

@@ -0,0 +1,7 @@
+/**
+ * @deprecated - replaced by general mutation in @magento/peregrine/lib/talons/productFullDetail.js
+ */
+export {
+    ADD_SIMPLE_MUTATION,
+    ADD_CONFIGURABLE_MUTATION
+} from '@magento/peregrine/lib/talons/ProductFullDetail/productFullDetail.gql.ce';