@riosst100/pwa-marketplace 1.7.0 → 1.7.2

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

@@ -1,7 +1,7 @@
 .root {
     composes: content-start from global;
     composes: grid from global;
-    composes: gap-y-2xs from global;
+    /* composes: gap-y-2xs from global; */
     composes: max-w-[315px] from global;
 }
 

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

@@ -11,163 +11,201 @@ import TextInput from '@magento/venia-ui/lib/components/TextInput';
 import { isRequired } from '@magento/venia-ui/lib/util/formValidators';
 import Checkbox from '@magento/venia-ui/lib/components/Checkbox';
 import { Form } from 'informed';
+import Price from '@magento/venia-ui/lib/components/Price';
+import Countdown from 'react-countdown';
 
 const AuctionDetail = (props) => {
 
-    const { className } = props;
+    const { className, productDetails } = props;
     const [open, setOpen] = useState(false)
 
-    return (
-        <>
-            <Modal
-                open={open}
-                className='!p-[30px] md_min-w-[550px] modal_bid'
-            >
-                <div className='modal_bid-content'>
-                    <div className='header_title-modal flex justify-between mb-10'>
-                        <div className='text-lg text-black font-semibold'>
-                            Place bid
-                        </div>
-                        <button onClick={() => { setOpen(!open) }} >
-                            <X size={24} color={primary900} />
-                        </button>
+    const auctionData = productDetails?.auction_data;
+
+    const isAuction = auctionData?.is_auction ? true : false;
+
+    const month = ["January","February","March","April","May","June","July","August","September","October","November","December"];
+
+    const Completionist = () => <span>You are good to go!</span>;
+
+    // Renderer callback with condition
+    const renderer = ({ hours, minutes, days, seconds, completed }) => {
+    if (completed) {
+        // Render a completed state
+        return <Completionist />;
+    } else {
+        // Render a countdown
+        return <div className='flex flex-row gap-8'>
+            <div className='flex flex-col'>
+                <div className='text-[40px] leading-[normal] font-semibold'>
+                {days}
+                </div>
+                <div className='text-[14px] font-bold'>
+                    days
+                </div>
+            </div>
+            <div className='flex flex-col'>
+                <div className='text-[40px] leading-[normal] font-semibold'>
+                {hours}
+                </div>
+                <div className='text-[14px] font-bold'>
+                    hours
+                </div>
+            </div>
+            <div className='flex flex-col'>
+                <div className='text-[40px] leading-[normal] font-semibold'>
+                {minutes}
+                </div>
+                <div className='text-[14px] font-bold'>
+                    minutes
+                </div>
+            </div>
+            <div className='flex flex-col'>
+                <div className='text-[40px] leading-[normal] font-semibold'>
+                {seconds}
+                </div>
+                <div className='text-[14px] font-bold'>
+                    seconds
+                </div>
+            </div>
+        </div>;
+    }
+    };
+
+    console.log(auctionData)
+
+    const endDate = auctionData && auctionData.stop_auction_time ? new Date(auctionData.stop_auction_time) : null;
+
+    return isAuction && <>
+        <Modal
+            open={open}
+            className='!p-[30px] md_min-w-[550px] modal_bid'
+        >
+            <div className='modal_bid-content'>
+                <div className='header_title-modal flex justify-between mb-10'>
+                    <div className='text-lg text-black font-semibold'>
+                        Place bid
                     </div>
+                    <button onClick={() => { setOpen(!open) }} >
+                        <X size={24} color={primary900} />
+                    </button>
+                </div>
 
-                    <div className='flex flex-col gap-y-[25px]'>
-                        <div className='current_bid flex flex-col gap-y-2.5'>
-                            <span className='text-[14px] font-bold text-gray-500'>
-                                Current bid
-                            </span>
-                            <span className='text-2xl font-semibold'>
-                                $102.50
-                            </span>
-                        </div>
+                <div className='flex flex-col gap-y-[25px]'>
+                    <div className='current_bid flex flex-col gap-y-2.5'>
+                        <span className='text-[14px] font-bold text-gray-500'>
+                            Current bid
+                        </span>
+                        <span className='text-2xl font-semibold'>
+                            $102.50
+                        </span>
+                    </div>
 
-                        <BidList expanded />
+                    <BidList expanded />
 
-                        <Form
-                            data-cy="form_bid"
-                            className="flex flex-col gap-y-5"
-                            initialValues={{}}
-                            onSubmit={() => { }}
-                            onChange={() => { }}
+                    <Form
+                        data-cy="form_bid"
+                        className="flex flex-col gap-y-5"
+                        initialValues={{}}
+                        onSubmit={() => { }}
+                        onChange={() => { }}
+                    >
+                        <Field
+                            id="bid_amount_field"
+                            label={'Bid Amount'}
                         >
-                            <Field
-                                id="bid_amount_field"
-                                label={'Bid Amount'}
-                            >
-                                <TextInput
-                                    id="bid_amout"
-                                    field="bid_amount"
-                                    validate={isRequired}
-                                    validateOnBlur
-                                    mask={value => value && value.trim()}
-                                    maskOnBlur={true}
-                                    data-cy="bid_amount"
-                                    aria-label={'bid_amount'}
-                                    placeholder={'$10.00'}
-                                />
-                                <small className='helpet-text text-[12px] font-normal text-gray-200 mt-1'>
-                                    Enter $103.50 or more
-                                </small>
-                            </Field>
-
-                            <Checkbox
-                                field="auto_bid"
-                                id="auto_bid"
-                                label={'Place Bid As Automatic'}
+                            <TextInput
+                                id="bid_amout"
+                                field="bid_amount"
+                                validate={isRequired}
+                                validateOnBlur
+                                mask={value => value && value.trim()}
+                                maskOnBlur={true}
+                                data-cy="bid_amount"
+                                aria-label={'bid_amount'}
+                                placeholder={'$10.00'}
                             />
+                            <small className='helpet-text text-[12px] font-normal text-gray-200 mt-1'>
+                                Enter $103.50 or more
+                            </small>
+                        </Field>
 
-                            <div className='actions flex justify-end gap-x-2.5'>
-                                <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'
-                                    }}
-                                >
-                                    Place Bid
-                                </Button>
-                            </div>
-                        </Form>
-                    </div>
-                </div>
-            </Modal>
-            <div
-                className={cn(
-                    'flex flex-col border border-gray-100 rounded-lg px-5 py-[30px] gap-x-2.5 gap-y-5',
-                    className
-                )}
-            >
-                <div className='flex flex-row justify-between'>
-                    <div className='flex flex-col gap-2.5'>
-                        <div className='text-[16px] font-bold text-gray-500'>
-                            Starting Price
-                        </div>
-                        <div className='text-[40px] font-semibold text-colorDefault'>
-                            $87.50
+                        <Checkbox
+                            field="auto_bid"
+                            id="auto_bid"
+                            label={'Place Bid As Automatic'}
+                        />
+
+                        <div className='actions flex justify-end gap-x-2.5'>
+                            <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'
+                                }}
+                            >
+                                Place Bid
+                            </Button>
                         </div>
+                    </Form>
+                </div>
+            </div>
+        </Modal>
+        <div
+            className={cn(
+                'flex flex-col border border-gray-100 rounded-lg px-5 py-[30px] gap-x-2.5 gap-y-5',
+                className
+            )}
+        >
+            <div className='flex flex-row justify-between'>
+                <div className='flex flex-col gap-2.5'>
+                    <div className='text-[16px] font-bold text-gray-500'>
+                        Starting Price
                     </div>
-                    <Divider className="w-[1px] !h-[105px]" />
-                    <div className='flex flex-col gap-2.5'>
-                        <div className='text-[16px] font-bold text-gray-500'>
-                            Auction ends in
-                        </div>
-                        <div className='flex flex-row gap-8'>
-                            <div className='flex flex-col'>
-                                <div className='text-[40px] leading-[normal] font-semibold'>
-                                    5
-                                </div>
-                                <div className='text-[14px] font-bold'>
-                                    days
-                                </div>
-                            </div>
-                            <div className='flex flex-col'>
-                                <div className='text-[40px] leading-[normal] font-semibold'>
-                                    16
-                                </div>
-                                <div className='text-[14px] font-bold'>
-                                    hours
-                                </div>
-                            </div>
-                            <div className='flex flex-col'>
-                                <div className='text-[40px] leading-[normal] font-semibold'>
-                                    36
-                                </div>
-                                <div className='text-[14px] font-bold'>
-                                    minutes
-                                </div>
-                            </div>
-                        </div>
+                    <div className='text-[40px] font-semibold text-colorDefault'>
+                        <Price
+                            currencyCode={productDetails.price.currency}
+                            value={auctionData.starting_price}
+                        />
                     </div>
                 </div>
-
-                <div className='text-gray-800 font-bold text-[20px]'>
-                    Ends at January 12, 2024 10:15 AM
+                <Divider className="w-[1px] !h-[105px]" />
+                <div className='flex flex-col gap-2.5'>
+                    <div className='text-[16px] font-bold text-gray-500'>
+                        Auction ends in
+                    </div>
+                    <Countdown
+                        date={new Date(auctionData.stop_auction_time)}
+                        renderer={renderer}
+                    />
                 </div>
+            </div>
 
-                <Button
-                    priority='high'
-                    classes={{
-                        content: 'capitalize text-[16px] font-semibold'
-                    }}
-                    onClick={() => setOpen(true)}
-                >
-                    Place Bid
-                </Button>
-
-                <BidList {...props} />
+            <div className='text-gray-800 font-bold text-[20px]'>
+                {/* Ends at January 12, 2024 10:15 AM */}
+                Ends at {month[endDate.getMonth()] + ' ' + endDate.getDate() + ', ' + endDate.getFullYear() + ' ' + endDate.getHours() + ':' + endDate.getMinutes() + ':' + endDate.getSeconds()}
             </div>
-        </>
-    )
+
+            <Button
+                priority='high'
+                classes={{
+                    content: 'capitalize text-[16px] font-semibold'
+                }}
+                onClick={() => setOpen(true)}
+            >
+                Place Bid
+            </Button>
+
+            <BidList {...props} />
+        </div>
+    </>
 }
 
 export default AuctionDetail;

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

@@ -6,14 +6,11 @@ const preOrderInfo = (props) => {
     const { className, productDetails } = props
 
     const preorderData = productDetails ? productDetails.preorder : null;
-
-    console.log(preorderData)
+    
     const isPreOrder = preorderData && preorderData.is_preorder ? true : false;
     const preOrderNotes = preorderData ? preorderData.preorder_notes : null;
     const preOrderAvailableDate = preorderData ? new Date(preorderData.preorder_availability) : null;
 
-    // console.log(preOrderNotes)
-    // console.log(productDetails)
     const month = ["January","February","March","April","May","June","July","August","September","October","November","December"];
 
     return isPreOrder ? (

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

@@ -508,7 +508,7 @@ const ProductFullDetail = props => {
                                     value={productDetails.price.value}
                                 />
                             </p>
-                            {/* <AuctionDetail className="auction_detail-container" /> */}
+                            <AuctionDetail productDetails={productDetails} className="auction_detail-container" />
                             <PreorderDetail productDetails={productDetails} className={'preorder_detail-container'} />
                             <small className='shipping-calculation-notes text-gray-200 text-xs'>
                                 Shipping method is calculated on checkout

package/src/overwrites/venia-ui/lib/components/RichContent/richContent.module.css

@@ -66,8 +66,8 @@
     line-height: 1.5;
 }
 
-.root p + ol,
-.root p + ul {
+.root p+ol,
+.root p+ul {
     margin-top: 0;
 }
 
@@ -143,4 +143,4 @@
     .root h6 {
         font-size: 1rem;
     }
-}
+}

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

@@ -35,7 +35,6 @@ const SearchBar = React.forwardRef((props, ref) => {
     ];
 
     const handleSelect = (option) => {
-        // console.log('Selected:', option);
     };
 
     return (

package/src/overwrites/venia-ui/lib/index.module.css

@@ -0,0 +1,137 @@
+@import './tokens.module.css';
+
+:global(*) {
+    /* composes: box-border from global; */
+    box-sizing: border-box;
+}
+
+/* TODO @TW: cannot compose */
+:global(html) {
+    /* composes: text-[100%] from global; */
+    font-size: 100%;
+    /* composes: text-normal from global; */
+    font-weight: 400;
+    /* composes: leading-none from global; */
+    line-height: 1;
+    /* composes: antialiased from global; */
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-font-smoothing: antialiased;
+}
+
+:global(html[data-scroll-lock='true']),
+:global(html[data-scroll-lock='true'] body) {
+    height: 100%;
+    overflow: hidden;
+    position: fixed;
+    width: 100%;
+}
+
+/* TODO @TW: cannot compose */
+:global(body),
+:global(button),
+:global(input),
+:global(select),
+:global(textarea) {
+    /* composes: text-gray-900 from global; */
+    /* color: rgb(var(--venia-global-color-text)); */
+    color: rgb(23 32 38);
+}
+
+:global(body) {
+    /* composes: m-0 from global; */
+    margin: 0;
+    /* composes: p-0 from global; */
+    padding: 0;
+}
+
+:global(h1),
+:global(h2),
+:global(h3),
+:global(h4),
+:global(h5),
+:global(h6) {
+    /* composes: font-base from global; */
+    font-size: 1rem;
+    /* composes: font-normal from global; */
+    font-weight: 400;
+    /* composes: m-0 from global; */
+    margin: 0;
+}
+
+:global(h1) {
+    /* composes: text-xl from global; */
+    font-size: 1.5rem;
+}
+
+:global(h2) {
+    /* composes: text-lg from global; */
+    font-size: 1.25rem;
+}
+
+:global(a) {
+    /* composes: text-current from global; */
+    color: currentColor;
+    /* composes: no-underline from global; */
+    text-decoration: none;
+}
+
+:global(p) {
+    /* composes: m-0 from global; */
+    margin: 0;
+}
+
+:global(dl),
+:global(ol),
+:global(ul) {
+    /* composes: list-none from global; */
+    list-style-type: none;
+    /* composes: m-0 from global; */
+    margin: 0;
+    /* composes: p-0 from global; */
+    padding: 0;
+}
+
+:global(dd),
+:global(dt) {
+    /* composes: m-0 from global; */
+    margin: 0;
+}
+
+/* TODO @TW: cannot compose */
+:global(button) {
+    /* composes: bg-transparent from global; */
+    background: none;
+    /* composes: border-0 from global; */
+    border: 0;
+    /* composes: cursor-pointer from global; */
+    cursor: pointer;
+    /* composes: text-[100%] from global; */
+    font-size: 100%;
+    /* composes: p-0 from global; */
+    padding: 0;
+    touch-action: manipulation;
+    /* composes: select-none from global; */
+    user-select: none;
+    /* composes: appearance-none from global; */
+    -webkit-appearance: none;
+}
+
+:global(button:disabled) {
+    /* composes: cursor-default from global; */
+    cursor: default;
+    touch-action: none;
+}
+
+:global(.braintree-sheet__content--form
+        .braintree-form__field-group
+        .braintree-form__field
+        .braintree-form__hosted-field
+        input.braintree-form__raw-input) {
+    color: #8f8f8f !important;
+}
+
+:global(.braintree-sheet__content--form
+        .braintree-form__field-group
+        .braintree-form__descriptor) {
+    color: #757575 !important;
+}