@riosst100/pwa-marketplace 2.0.9 → 2.1.0

package/src/components/Pagination/index.js

@@ -1,45 +1,43 @@
 import React from 'react';
 import { ArrowLeft2, ArrowRight2 } from 'iconsax-react';
 
-const Pagination = () => {
+const Pagination = ({ totalPages, currentPage, pageSize }) => {
+
+    const pageNumbers = [];
+
+    // Populate the items array with numbers from 1 to maxNumber
+    if (totalPages) {
+        for (let i = 1; i < totalPages+1; i++) {
+            pageNumbers.push(i);
+        }
+    }
+
+    const activeClass = "inline-flex flex-col items-center justify-center gap-[10px] px-[15px] py-[10px] relative flex-[0_0_auto] bg-[#f76b1c] rounded-[5px] border border-solid border-[#f76b1c]";
+    const bgClass = "inline-flex flex-col items-center justify-center gap-[10px] px-[15px] py-[10px] relative flex-[0_0_auto] rounded-[5px] border border-solid border-[#e6e9ea]";
+
+    const activeTextClass = "relative w-fit font-normal text-white text-[14px] tracking-[0] leading-none whitespace-nowrap";
+    const textClass = "relative w-fit font-normal text-[#f76b1c] text-[14px] tracking-[0] leading-none whitespace-nowrap";
+
     return (
         <>
             <div className={'inline-flex items-start gap-[10px] relative'}>
                 <button className="inline-flex flex-col items-center justify-center gap-[10px] px-3 py-[10px] relative flex-[0_0_auto] rounded-[5px] border border-solid border-[#e6e9ea]">
-                    <div className="relative w-fit font-normal text-[#6243fa] text-[16px] tracking-[0] leading-none whitespace-nowrap">
-                        <ArrowLeft2 size="16" color="#6243fa" variant="Outline" />
-                    </div>
-                </button>
-                <button className="inline-flex flex-col items-center justify-center gap-[10px] px-[15px] py-[10px] relative flex-[0_0_auto] rounded-[5px] border border-solid border-[#e6e9ea]">
-                    <div className="relative w-fit font-normal text-[#6243fa] text-[16px] tracking-[0] leading-none whitespace-nowrap">
-                        1
-                    </div>
-                </button>
-                <button className="inline-flex flex-col items-center justify-center gap-[10px] px-[15px] py-[10px] relative flex-[0_0_auto] rounded-[5px] border border-solid border-[#e6e9ea]">
-                    <div className="relative w-fit font-normal text-[#6243fa] text-[16px] tracking-[0] leading-none whitespace-nowrap">
-                        2
-                    </div>
-                </button>
-                <button
-                    className={'inline-flex flex-col items-center justify-center gap-[10px] px-[15px] py-[10px] relative flex-[0_0_auto] bg-[#6243fa] rounded-[5px] border border-solid border-[#6243fa]'}
-                >
-                    <div className="relative w-fit font-normal text-white text-[16px] tracking-[0] leading-none whitespace-nowrap">
-                        3
-                    </div>
-                </button>
-                <button className="inline-flex flex-col items-center justify-center gap-[10px] px-[15px] py-[10px] relative flex-[0_0_auto] rounded-[5px] border border-solid border-[#e6e9ea]">
-                    <div className="relative w-fit font-normal text-[#6243fa] text-[16px] tracking-[0] leading-none whitespace-nowrap">
-                        4
-                    </div>
-                </button>
-                <button className="inline-flex flex-col items-center justify-center gap-[10px] px-[15px] py-[10px] relative flex-[0_0_auto] rounded-[5px] border border-solid border-[#e6e9ea]">
-                    <div className="relative w-fit font-normal text-[#6243fa] text-[16px] tracking-[0] leading-none whitespace-nowrap">
-                        5
+                    <div className="relative w-fit font-normal text-[#f76b1c] text-[14px] tracking-[0] leading-none whitespace-nowrap">
+                        <ArrowLeft2 size="16" color="#f76b1c" variant="Outline" />
                     </div>
                 </button>
+                {pageNumbers ? pageNumbers.map((num, index) => (
+                    <span key={index}>
+                        <button className={num == currentPage ? activeClass : bgClass}>
+                            <div className={num == currentPage ? activeTextClass : textClass}>
+                                {num}
+                            </div>
+                        </button>
+                    </span>
+                )) : ''}
                 <button className="inline-flex flex-col items-center justify-center gap-[10px] px-3 py-[10px] relative flex-[0_0_auto] rounded-[5px] border border-solid border-[#e6e9ea]">
-                    <div className="relative w-fit font-normal text-[#6243fa] text-[16px] tracking-[0] leading-none whitespace-nowrap">
-                        <ArrowRight2 size="16" color="#6243fa" variant="Outline" />
+                    <div className="relative w-fit font-normal text-[#f76b1c] text-[14px] tracking-[0] leading-none whitespace-nowrap">
+                        <ArrowRight2 size="16" color="#f76b1c" variant="Outline" />
                     </div>
                 </button>
             </div>
@@ -47,4 +45,4 @@ const Pagination = () => {
     )
 }
 
-export default Pagination
+export default Pagination;

package/src/components/PhoneTextInput/index.js

@@ -1 +1 @@
-export { default } from './phoneTextInput';
+export { default } from './phoneTextInput';

package/src/components/PhoneTextInput/phoneTextInput.js

@@ -1,62 +1,62 @@
-import React, { Fragment, useState } from 'react';
-import { node, shape, string } from 'prop-types';
-import useFieldState from '@magento/peregrine/lib/hooks/hook-wrappers/useInformedFieldStateWrapper';
-
-import { useStyle } from '@magento/venia-ui/lib/classify';
-import { FieldIcons, Message } from '@magento/venia-ui/lib/components/Field';
-import defaultClasses from './phoneTextInput.module.css';
-import PhoneInput from 'react-phone-number-input'
-import 'react-phone-number-input/style.css'
-
-const PhoneTextInput = props => {
-    const {
-        after,
-        before,
-        classes: propClasses,
-        regionError,
-        field,
-        message,
-        countryCodeField = "country",
-        ...rest
-    } = props;
-    const fieldState = useFieldState(field);
-    const { value: phoneValue } = fieldState;
-    const classes = useStyle(defaultClasses, propClasses);
-    var inputClass =
-        fieldState.error || regionError ? classes.input_error : classes.input;
-    
-    const handleChange = (value) => {
-        fieldState.value = value;
-    }
-
-    const countryFieldState = useFieldState(countryCodeField);
-    const { value: country } = countryFieldState;
-
-    return (
-        <Fragment>
-            <FieldIcons after={after} before={before}>
-                <PhoneInput
-                international
-                countryCallingCodeEditable={false}
-                defaultCountry={country}
-                name={field}
-                value={phoneValue}
-                onChange={handleChange}
-                />
-            </FieldIcons>
-            <Message fieldState={fieldState}>{message}</Message>
-        </Fragment>
-    );
-};
-
-export default PhoneTextInput;
-
-PhoneTextInput.propTypes = {
-    after: node,
-    before: node,
-    classes: shape({
-        input: string
-    }),
-    field: string.isRequired,
-    message: node
-};
+import React, { Fragment, useState } from 'react';
+import { node, shape, string } from 'prop-types';
+import useFieldState from '@magento/peregrine/lib/hooks/hook-wrappers/useInformedFieldStateWrapper';
+
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import { FieldIcons, Message } from '@magento/venia-ui/lib/components/Field';
+import defaultClasses from './phoneTextInput.module.css';
+import PhoneInput from 'react-phone-number-input'
+import 'react-phone-number-input/style.css'
+
+const PhoneTextInput = props => {
+    const {
+        after,
+        before,
+        classes: propClasses,
+        regionError,
+        field,
+        message,
+        countryCodeField = "country",
+        ...rest
+    } = props;
+    const fieldState = useFieldState(field);
+    const { value: phoneValue } = fieldState;
+    const classes = useStyle(defaultClasses, propClasses);
+    var inputClass =
+        fieldState.error || regionError ? classes.input_error : classes.input;
+    
+    const handleChange = (value) => {
+        fieldState.value = value;
+    }
+
+    const countryFieldState = useFieldState(countryCodeField);
+    const { value: country } = countryFieldState;
+
+    return (
+        <Fragment>
+            <FieldIcons after={after} before={before}>
+                <PhoneInput
+                international
+                countryCallingCodeEditable={false}
+                defaultCountry={country}
+                name={field}
+                value={phoneValue}
+                onChange={handleChange}
+                />
+            </FieldIcons>
+            <Message fieldState={fieldState}>{message}</Message>
+        </Fragment>
+    );
+};
+
+export default PhoneTextInput;
+
+PhoneTextInput.propTypes = {
+    after: node,
+    before: node,
+    classes: shape({
+        input: string
+    }),
+    field: string.isRequired,
+    message: node
+};

package/src/components/ProductItem/index.js

@@ -15,7 +15,7 @@ const ProductItem = () => {
                     <div class="inline-flex flex-col items-start gap-[10px] relative flex-[0_0_auto]">
                         <div class="flex flex-col w-[153px] items-start justify-center gap-[8px] relative flex-[0_0_auto]">
                             <div class="flex flex-col items-start gap-[6px] relative self-stretch w-full flex-[0_0_auto]">
-                                <div class="relative w-fit mt-[-1.00px] [font-family:'Noto_Sans',Helvetica] font-semibold text-[#1b1b1b] text-[16px] tracking-[0] leading-[normal] whitespace-nowrap">$55.00</div>
+                                <div class="relative w-fit mt-[-1.00px] [font-family:'Noto_Sans',Helvetica] font-medium text-[#1b1b1b] text-[14px] tracking-[0] leading-[normal] whitespace-nowrap">$55.00</div>
                             </div>
                         </div>
                         <div class="flex-col items-start gap-[8px] inline-flex relative flex-[0_0_auto]">

package/src/components/ProductLabel/index.js

@@ -0,0 +1,47 @@
+import React from 'react';
+import cn from 'classnames';
+
+const ProductLabel = (props) => {
+    const {
+        rootClassName = '',
+        item
+    } = props;
+
+    const preorderData = item ? item.preorder : null;
+    const isPreOrder = preorderData && preorderData.is_preorder ? true : false;
+
+    const auctionData = item ? item.auction_data : null;
+    const isAuction = auctionData && auctionData.is_auction ? true : false;
+
+    const priceRangeData = item?.price_range;
+
+    const salePrice = priceRangeData?.maximum_price?.discount?.amount_off;
+    const regularPrice = priceRangeData?.maximum_price?.regular_price?.value;
+    
+    return (
+        <div
+            className={cn(
+                'flex flex-row flex-wrap gap-y-1.5 gap-x-[5px] absolute p-[5px] z-[1]',
+                rootClassName
+            )}
+        >
+            {salePrice > 0 && <div className='bg-yellow-400 rounded px-2.5 py-[6px] w-fit top-0 left-0'>
+                <span className='text-white text-xs font-medium'>
+                    {Math.round(salePrice/regularPrice*100)}% off
+                </span>
+            </div>}
+            {isPreOrder && <div className='bg-darkblue-900 rounded px-2.5 py-[6px] w-fit top-0 left-0'>
+                <span className='text-white text-xs font-medium'>
+                    Pre Order
+                </span>
+            </div>}
+            {isAuction && <div className='bg-blue-700 rounded px-2.5 py-[6px] w-fit top-0 left-0'>
+                <span className='text-white text-xs font-medium'>
+                    Auction
+                </span>
+            </div>}
+        </div>
+    )
+}
+
+export default ProductLabel

package/src/components/ProductLineSlider/index.js

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

package/src/components/ProductLineSlider/item.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import cn from 'classnames';
+import Image from '@magento/venia-ui/lib/components/Image';
+import NendroidImage from './nendroid-image.png';
+import NendroidLogo from './logo_nendoroid.png';
+
+const Item = (props) => {
+    const {
+        name = 'Nendroid Series', rootClassName, onClick = () => { },
+        className = "",
+    } = props;
+
+    return (
+        <div className={cn('brand-item-container px-2 lg_px-4', rootClassName)} onClick={onClick}>
+            <div
+                className={cn(
+                    'm-auto flex flex-row justify-center items-center',
+                    'w-full max-w-[300px] px-5 py-2.5',
+                    'relative rounded-lg border border-gray-100 bg-white',
+                    className,
+                )}
+            >
+                <Image
+                    alt='image'
+                    className="relative"
+                    src={NendroidImage}
+                />
+                <Image
+                    alt='logo'
+                    className="relative"
+                    src={NendroidLogo}
+                />
+            </div>
+        </div>
+    )
+}
+
+export default Item;

package/src/components/ProductLineSlider/productLineSlider.js

@@ -0,0 +1,91 @@
+import React from 'react';
+import Slider from "react-slick";
+import { ArrowLeft2, ArrowRight2 } from 'iconsax-react';
+import cn from 'classnames';
+import Item from './item';
+import { primary900 } from '@riosst100/pwa-marketplace/src/theme/vars';
+
+const CustomArrow = (props) => {
+    const { isNext = true, onClick, className } = props;
+    return (
+        <span
+            className={cn(
+                className,
+                'custom_arrow rounded-full w-10 h-10 p-2.5 bg-white hover_!bg-white z-[1] !border !border-solid !border-gray-100 before_hidden',
+                isNext ? 'right-2 lg_right-4' : 'left-2 lg_left-4',
+            )}
+            onClick={onClick}
+        >
+            {isNext ? (
+                <ArrowRight2 className='' size="20" color={primary900} />
+            ) : (
+                <ArrowLeft2 size="20" color={primary900} />
+            )}
+        </span>
+    )
+}
+
+const productSlider = (props) => {
+
+    const settings = {
+        dots: false,
+        infinite: false,
+        speed: 500,
+        slidesToShow: 4,
+        slidesToScroll: 1,
+        nextArrow: <CustomArrow />,
+        prevArrow: <CustomArrow isNext={false} />,
+        centerPadding: "60px",
+        responsive: [
+            {
+                breakpoint: 1023,
+                settings: {
+                    slidesToShow: 3,
+                    slidesToScroll: 1,
+                }
+            },
+            {
+                breakpoint: 767,
+                settings: {
+                    slidesToShow: 3,
+                    slidesToScroll: 1,
+                }
+            },
+            {
+                breakpoint: 576,
+                settings: {
+                    slidesToShow: 2,
+                    slidesToScroll: 1
+                }
+            }
+        ]
+    };
+    return (
+        <div className='product_line_items-container flex flex-col gap-x-4 gap-y-5 '>
+            <div className='text-[18px] font-medium'>
+                Product Line
+            </div>
+            <Slider {...settings}>
+                {[...Array(9)].map(() => {
+                    return (
+                        <Item {...props} />
+                    )
+                })}
+            </Slider>
+            <style global jsx>
+                {`
+                    .product_line_items-container .slick-slider {
+                        margin: 0 -8px;
+                    }
+                    @media only screen and (min-width: 1024px) {
+                        .product_line_items-container .slick-slider {
+                            margin: 0 -16px;
+                        }
+                    }
+                `}
+            </style>
+        </div>
+    )
+}
+
+export default productSlider

package/src/components/ProductListTab/index.js

@@ -0,0 +1,4 @@
+export { default } from './productListTab';
+export {
+    default as ProductListTabShimmer
+} from './productListTab.shimmer';

package/src/components/ProductListTab/productListTab.js

@@ -0,0 +1,100 @@
+import React, { useCallback, useMemo, useRef, useState } from 'react';
+import PropTypes from 'prop-types';
+import { FormattedMessage } from 'react-intl';
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import defaultClasses from './productListTab.module.css';
+import { useFilterSidebar } from '@magento/peregrine/lib/talons/FilterSidebar';
+import CurrentTopFilter from '@riosst100/pwa-marketplace/src/components/FilterTop/CurrentTopFilters/currentTopFilter';
+
+const ProductListTab = props => {
+
+    const { activeTab, setActiveTab, filters } = props
+
+    const talonProps = useFilterSidebar({ filters });
+    const {
+        filterApi,
+        filterState,
+        handleApply
+    } = talonProps;
+
+    const { toggleItem, removeItem } = filterApi;
+
+    const classes = useStyle(defaultClasses, props.classes);
+
+    let allProductClass = classes.firstButton;
+    if (!activeTab) {
+        allProductClass = classes.activeFirstButton;
+    }
+
+    const productTabs = [
+        {
+            'label': 'All Products',
+            'value': 'all'
+        },
+        {
+            'label': 'Sale',
+            'value': 'special_price'
+        },
+        {
+            'label': 'Pre Order',
+            'value': 'lof_preorder'
+        },
+        {
+            'label': 'Auction',
+            'value': 'auction'
+        }
+    ];
+
+    const handleClickremove = useCallback((group, item) => {
+        removeItem({ group, item });
+        if (typeof handleApply === 'function') {
+            handleApply(group, item);
+        }
+    }, [removeItem, handleApply]);
+
+    const handleToggleItem = useCallback((group, item) => {
+        toggleItem({ group, item });
+        if (typeof handleApply === 'function') {
+            handleApply(group, item);
+        }
+    }, [toggleItem, handleApply]);
+
+    const handleClick = (targetGroup) => {
+            setActiveTab(targetGroup);
+
+            const item = { value: "1", label: 'Yes', title: 'Yes' };
+
+            for (const [group, items] of filterState) {
+                for (const item of items) {
+                    const { title, value } = item || {};
+                    const key = `${group}::${title}_${value}`;
+
+                    if (productTabs.some(e => e.value === group)) {
+                        handleClickremove(group, item)
+                    }
+                }
+            }
+
+            if (targetGroup != "all") {
+                handleToggleItem(targetGroup, item)
+            }
+        }
+
+    return (
+        <div className={classes.root} aria-busy="true">
+            <nav>
+                <ul className={classes.buttonContainer}>
+                    {productTabs.map(({label, value}, index) => 
+                        <li key={index}>
+                            <button onClick={() => handleClick(value)} className={
+                                (index == 0 ? classes.firstButton : (index == productTabs.length-1 ? classes.lastButton : classes.middleButton)) + (activeTab == value ? ' ' + classes.activeButton : '')
+                            }>{label}</button>
+                        </li>
+                    )}
+                </ul>
+            </nav>
+        </div>
+    );
+};
+
+export default ProductListTab;

package/src/components/ProductListTab/productListTab.module.css

@@ -0,0 +1,64 @@
+.root {
+    composes: bg-white from global;
+    composes: flex from global;
+    composes: items-center from global;
+    composes: flex-wrap from global;   
+    width: inherit; 
+}
+
+.buttonContainer {
+    composes: inline-flex from global;
+    align-items: center;
+}
+
+.button {
+    composes: flex from global;
+    composes: px-4 from global;
+    composes: py-2 from global;
+    composes: transition-colors from global;
+    composes: duration-150 from global;
+    composes: border from global;
+    composes: border-solid from global;
+    composes: leading-normal from global;
+    composes: text-base from global;
+}
+
+.activeButton {
+    color: white;
+    background-color: #f76b1c;
+}
+
+.activeFirstButton {
+    composes: activeButton;
+    composes: border-r-0 from global;
+    composes: rounded-l-lg from global;
+    border-radius: 6px 0px 0px 6px;
+}
+
+.middleButton {
+    composes: button;
+    composes: text-colorDefault from global;
+    composes: bg-white from global;
+    composes: border-l-0 from global;
+    composes: border-gray-100 from global;
+}
+
+.lastButton {
+    composes: button;
+    composes: text-colorDefault from global;
+    composes: bg-white from global;
+    composes: border-l-0 from global;
+    composes: border-gray-100 from global;
+    composes: rounded-r-lg from global;
+    border-radius: 0px 6px 6px 0px;
+}
+
+.firstButton {
+    composes: button;
+    composes: text-colorDefault from global;
+    composes: bg-white from global;
+    /* composes: border-l-0 from global; */
+    composes: border-gray-100 from global;
+    composes: rounded-l-lg from global;
+    border-radius: 6px 0px 0px 6px;
+}

package/src/components/ProductListTab/productListTab.shimmer.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import { shape, string } from 'prop-types';
+import { useStyle } from '@magento/venia-ui/lib/classify';
+
+import Shimmer from '@magento/venia-ui/lib/components/Shimmer';
+import defaultClasses from './productListTab.module.css';
+
+const ProductListTabShimmer = props => {
+    const classes = useStyle(defaultClasses, props.classes);
+
+    return (
+        <div className={classes.root} aria-live="polite" aria-busy="true">
+            <Shimmer width={10} />
+        </div>
+    );
+};
+
+ProductListTabShimmer.propTypes = {
+    classes: shape({
+        root: string
+    })
+};
+
+export default ProductListTabShimmer;

package/src/components/RFQ/index.js

@@ -0,0 +1,39 @@
+import React, { useState } from 'react';
+import Button from '@magento/venia-ui/lib/components/Button';
+import { useIntl } from 'react-intl';
+import ModalRFQ from './modalRfq';
+
+const AuctionDetail = (props) => {
+
+    const [open, setOpen] = useState(false);
+    const { formatMessage } = useIntl();
+
+    return (
+        <>
+            <ModalRFQ
+                open={open}
+                setOpen={setOpen}
+            />
+
+            <Button
+                data-cy="ProductFullDetail-RFQ"
+                classes={{
+                    content: 'normal-case font-medium text-[16px]'
+                }}
+                priority="low"
+                type="submit"
+                onClick={() => { setOpen(true) }}
+            >
+                {
+                    formatMessage({
+                        id: 'productFullDetail.RequestQuote',
+                        defaultMessage:
+                            'Request a Quote'
+                    })
+                }
+            </Button>
+        </>
+    )
+}
+
+export default AuctionDetail;