@riosst100/pwa-marketplace 2.0.8 → 2.0.9

package/src/components/RFQPage/quoteList.js

@@ -1,227 +0,0 @@
-import React, { useMemo, useEffect } from 'react';
-import { useIntl, FormattedMessage } from 'react-intl';
-import {
-    Search as SearchIcon,
-    AlertCircle as AlertCircleIcon,
-    ArrowRight as SubmitIcon
-} from 'react-feather';
-import { shape, string } from 'prop-types';
-import { Form } from 'informed';
-
-import { useToasts } from '@magento/peregrine/lib/Toasts';
-import OrderHistoryContextProvider from '@magento/peregrine/lib/talons/OrderHistoryPage/orderHistoryContext';
-import { useOrderHistoryPage } from '@magento/peregrine/lib/talons/OrderHistoryPage/useOrderHistoryPage';
-
-import { useStyle } from '@magento/venia-ui/lib/classify';
-import Button from '@magento/venia-ui/lib/components/Button';
-import Icon from '@magento/venia-ui/lib/components/Icon';
-import LoadingIndicator from '@magento/venia-ui/lib/components/LoadingIndicator';
-import { StoreTitle } from '@magento/venia-ui/lib/components/Head';
-import TextInput from '@magento/venia-ui/lib/components/TextInput';
-
-import defaultClasses from '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/OrderHistoryPage/orderHistoryPage.module.css';
-import OrderRow from './orderRow';
-import ResetButton from '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/OrderHistoryPage/resetButton';
-import { SearchNormal } from 'iconsax-react';
-import cn from 'classnames';
-
-const errorIcon = (
-    <Icon
-        src={AlertCircleIcon}
-        attrs={{
-            width: 18
-        }}
-    />
-);
-const searchIcon = <Icon src={SearchIcon} size={24} />;
-
-const QuoteList = props => {
-    const talonProps = useOrderHistoryPage();
-    const {
-        errorMessage,
-        loadMoreOrders,
-        handleReset,
-        handleSubmit,
-        isBackgroundLoading,
-        isLoadingWithoutData,
-        orders,
-        pageInfo,
-        searchText
-    } = talonProps;
-    const [, { addToast }] = useToasts();
-    const { formatMessage } = useIntl();
-    const PAGE_TITLE = formatMessage({
-        id: 'Quotes.pageTitleText',
-        defaultMessage: 'Quotes'
-    });
-    const SEARCH_PLACE_HOLDER = formatMessage({
-        id: 'Quotes.search',
-        defaultMessage: 'Search by Quote Number'
-    });
-
-    const ordersCountMessage = formatMessage(
-        {
-            id: 'orderHistoryPage.ordersCount',
-            defaultMessage: 'You have {count} orders in your history.'
-        },
-        { count: orders.length }
-    );
-
-    const classes = useStyle(defaultClasses, props.classes);
-
-    const orderRows = useMemo(() => {
-        return orders.map(order => {
-            return <OrderRow key={order.id} order={order} />;
-        });
-    }, [orders]);
-
-    const pageContents = useMemo(() => {
-        if (isLoadingWithoutData) {
-            return <LoadingIndicator />;
-        } else if (!isBackgroundLoading && searchText && !orders.length) {
-            return (
-                <h3 className={classes.emptyHistoryMessage}>
-                    <FormattedMessage
-                        id={'orderHistoryPage.invalidOrderNumber'}
-                        defaultMessage={`Order "${searchText}" was not found.`}
-                        values={{
-                            number: searchText
-                        }}
-                    />
-                </h3>
-            );
-        } else if (!isBackgroundLoading && !orders.length) {
-            return (
-                <h3 className={classes.emptyHistoryMessage}>
-                    <FormattedMessage
-                        id={'orderHistoryPage.emptyDataMessage'}
-                        defaultMessage={"You don't have any orders yet."}
-                    />
-                </h3>
-            );
-        } else {
-            return (
-                <ul
-                    className={classes.orderHistoryTable}
-                    data-cy="OrderHistoryPage-orderHistoryTable"
-                >
-                    {orderRows}
-                </ul>
-            );
-        }
-    }, [
-        classes.emptyHistoryMessage,
-        classes.orderHistoryTable,
-        isBackgroundLoading,
-        isLoadingWithoutData,
-        orderRows,
-        orders.length,
-        searchText
-    ]);
-
-    const resetButtonElement = searchText ? (
-        <ResetButton onReset={handleReset} />
-    ) : null;
-
-    const submitIcon = (
-        <SearchNormal size="18" color="#1b1b1b" className='mt-[4px]' />
-    );
-
-    const pageInfoLabel = pageInfo ? (
-        <FormattedMessage
-            defaultMessage={'Showing {current} of {total}'}
-            id={'orderHistoryPage.pageInfo'}
-            values={pageInfo}
-        />
-    ) : null;
-
-    const loadMoreButton = loadMoreOrders ? (
-        <Button
-            classes={{ root_lowPriority: classes.loadMoreButton }}
-            disabled={isBackgroundLoading || isLoadingWithoutData}
-            onClick={loadMoreOrders}
-            priority="low"
-        >
-            <FormattedMessage
-                id={'orderHistoryPage.loadMore'}
-                defaultMessage={'Load More'}
-            />
-        </Button>
-    ) : null;
-
-    useEffect(() => {
-        if (errorMessage) {
-            addToast({
-                type: 'error',
-                icon: errorIcon,
-                message: errorMessage,
-                dismissable: true,
-                timeout: 10000
-            });
-        }
-    }, [addToast, errorMessage]);
-
-    return (
-        <OrderHistoryContextProvider>
-            <div className="grid gap-y-md">
-                <StoreTitle>{PAGE_TITLE}</StoreTitle>
-                <div aria-live="polite" className="text-xl font-medium text-left">
-                    {PAGE_TITLE}
-                </div>
-                {/* <div>
-                    <div aria-live="polite" aria-label={ordersCountMessage} />
-                </div> */}
-
-                <div className={classes.filterRow}>
-                    <Form className="flex gap-x-1 border border-gray-100 rounded-full px-[15px] w-[calc(100%-120px)] max-w-[450px]" onSubmit={handleSubmit}>
-                        <TextInput
-                            // after={resetButtonElement}
-                            // before={searchIcon}
-                            field="search"
-                            id={classes.search}
-                            placeholder={SEARCH_PLACE_HOLDER}
-                            classes={{
-                                input: 'focus-visible_outline-none border-none w-full'
-                            }}
-                        />
-                        {searchText ? (
-                            <>
-                                {resetButtonElement}
-                            </>
-                        ) : (
-                            <Button
-                                className="focus-visible_outline-none"
-                                disabled={
-                                    isBackgroundLoading || isLoadingWithoutData
-                                }
-                                priority={'high'}
-                                type="submit"
-                                aria-label="submit"
-                            >
-                                {submitIcon}
-                            </Button>
-                        )}
-                    </Form>
-                    <span className={classes.pageInfo}>{pageInfoLabel}</span>
-                </div>
-                {pageContents}
-                {loadMoreButton}
-            </div>
-        </OrderHistoryContextProvider >
-    );
-};
-
-export default QuoteList;
-
-QuoteList.propTypes = {
-    classes: shape({
-        root: string,
-        heading: string,
-        emptyHistoryMessage: string,
-        orderHistoryTable: string,
-        search: string,
-        searchButton: string,
-        submitIcon: string,
-        loadMoreButton: string
-    })
-};

package/src/components/RelatedProduct/index.js

@@ -1,16 +0,0 @@
-import React from 'react';
-import Content from './relatedProduct';
-import data from './sample.json';
-
-const index = () => {
-
-    const contetnProps = {
-        data
-    }
-
-    return (
-        <Content {...contetnProps} />
-    )
-}
-
-export default index

package/src/components/RelatedProduct/relatedProduct.js

@@ -1,112 +0,0 @@
-import React from 'react';
-import GalleryItem from '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/Gallery/item';
-import Slider from "react-slick";
-import { ArrowLeft2, ArrowRight2 } from 'iconsax-react';
-import cn from 'classnames';
-import { useGallery } from '@magento/peregrine/lib/talons/Gallery/useGallery';
-
-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 relatedProduct = (props) => {
-    const { data } = props;
-    const talonProps = useGallery();
-    const { storeConfig } = talonProps;
-
-    const settings = {
-        dots: false,
-        infinite: false,
-        speed: 500,
-        slidesToShow: 5,
-        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 (
-        <>
-            <h2
-                className={cn(
-                    'bg-darkblue-900 text-lg font-medium text-white leading-6 px-6 py-3 inline-block relative',
-                    'after_border-l-[48px] after_border-t-[48px] after_border-b-0 after_border-r-0',
-                    'after_border-l-darkblue-900 after_border-t-transparent after_border-r-transparent after_border-b-transparent',
-                    'after_absolute after_right-[-48px] after_top-0'
-                )}
-            >
-                More from this store
-            </h2>
-            <div className='related_products-container flex flex-col gap-x-4 gap-y-5 py-10 mb-4'>
-                <Slider {...settings}>
-                    {data.map((item) => {
-                        return (
-                            <GalleryItem
-                                key={item.id}
-                                item={item}
-                                storeConfig={storeConfig}
-                                rootClassName="px-2 block"
-                            />
-                        )
-                    })}
-                </Slider>
-            </div>
-
-            <style global jsx>
-                {`
-                    .related_products-container .slick-slider {
-                        margin: 0 -8px;
-                    }
-                    @media only screen and (min-width: 1024px) {
-                        .related_products-container .slick-slider {
-                            margin: 0 -16px;
-                        }
-                    }
-                `}
-            </style>
-        </>
-    )
-}
-
-export default relatedProduct

package/src/components/RelatedProduct/sample.json

@@ -1,154 +0,0 @@
-[
-    {
-        "__typename": "SimpleProduct",
-        "id": 25,
-        "uid": "MjU=",
-        "name": "Test Product 13",
-        "seller": {
-            "__typename": "Seller",
-            "name": null
-        },
-        "price_range": {
-            "__typename": "PriceRange",
-            "maximum_price": {
-                "__typename": "ProductPrice",
-                "final_price": {
-                    "__typename": "Money",
-                    "currency": "SGD",
-                    "value": 120
-                },
-                "regular_price": {
-                    "__typename": "Money",
-                    "currency": "SGD",
-                    "value": 120
-                },
-                "discount": {
-                    "__typename": "ProductDiscount",
-                    "amount_off": 0
-                }
-            }
-        },
-        "sku": "Test Product 7-1-2",
-        "small_image": {
-            "__typename": "ProductImage",
-            "url": "https://seller-dev.tcgcollective.co/media/catalog/product/cache/9d2223072e07b2ec257382d238a7acb0/b/p/bp19439l_4_.jpg"
-        },
-        "stock_status": "IN_STOCK",
-        "rating_summary": 0,
-        "url_key": "test-product-13"
-    },
-    {
-        "__typename": "SimpleProduct",
-        "id": 24,
-        "uid": "MjQ=",
-        "name": "Test Product 12",
-        "seller": {
-            "__typename": "Seller",
-            "name": null
-        },
-        "price_range": {
-            "__typename": "PriceRange",
-            "maximum_price": {
-                "__typename": "ProductPrice",
-                "final_price": {
-                    "__typename": "Money",
-                    "currency": "SGD",
-                    "value": 120
-                },
-                "regular_price": {
-                    "__typename": "Money",
-                    "currency": "SGD",
-                    "value": 120
-                },
-                "discount": {
-                    "__typename": "ProductDiscount",
-                    "amount_off": 0
-                }
-            }
-        },
-        "sku": "Test Product 11-1",
-        "small_image": {
-            "__typename": "ProductImage",
-            "url": "https://seller-dev.tcgcollective.co/static/frontend/Magento/luma/en_US/Magento_Catalog/images/product/placeholder/small_image.jpg"
-        },
-        "stock_status": "IN_STOCK",
-        "rating_summary": 0,
-        "url_key": "test-product-12"
-    },
-    {
-        "__typename": "SimpleProduct",
-        "id": 23,
-        "uid": "MjM=",
-        "name": "Test Product 11",
-        "seller": {
-            "__typename": "Seller",
-            "name": null
-        },
-        "price_range": {
-            "__typename": "PriceRange",
-            "maximum_price": {
-                "__typename": "ProductPrice",
-                "final_price": {
-                    "__typename": "Money",
-                    "currency": "SGD",
-                    "value": 120
-                },
-                "regular_price": {
-                    "__typename": "Money",
-                    "currency": "SGD",
-                    "value": 120
-                },
-                "discount": {
-                    "__typename": "ProductDiscount",
-                    "amount_off": 0
-                }
-            }
-        },
-        "sku": "Test Product 11",
-        "small_image": {
-            "__typename": "ProductImage",
-            "url": "https://seller-dev.tcgcollective.co/static/frontend/Magento/luma/en_US/Magento_Catalog/images/product/placeholder/small_image.jpg"
-        },
-        "stock_status": "IN_STOCK",
-        "rating_summary": 0,
-        "url_key": "test-product-11"
-    },
-    {
-        "__typename": "SimpleProduct",
-        "id": 21,
-        "uid": "MjE=",
-        "name": "Test Product 9",
-        "seller": {
-            "__typename": "Seller",
-            "name": null
-        },
-        "price_range": {
-            "__typename": "PriceRange",
-            "maximum_price": {
-                "__typename": "ProductPrice",
-                "final_price": {
-                    "__typename": "Money",
-                    "currency": "SGD",
-                    "value": 98
-                },
-                "regular_price": {
-                    "__typename": "Money",
-                    "currency": "SGD",
-                    "value": 120
-                },
-                "discount": {
-                    "__typename": "ProductDiscount",
-                    "amount_off": 22
-                }
-            }
-        },
-        "sku": "Test Product 7-1-1",
-        "small_image": {
-            "__typename": "ProductImage",
-            "url": "https://seller-dev.tcgcollective.co/media/catalog/product/cache/9d2223072e07b2ec257382d238a7acb0/f/4/f4f14229_14.jpg"
-        },
-        "stock_status": "IN_STOCK",
-        "rating_summary": 0,
-        "url_key": "test-product-9"
-    }
-]

package/src/components/ShopBy/index.js

@@ -1,2 +0,0 @@
-export { default } from './shopBy';
-export { default as ShopByShimmer } from './shopBy.shimmer';

package/src/components/ShopBy/shopBy copy.js

@@ -1,172 +0,0 @@
-import React, { Fragment, useEffect, useMemo, useState } from 'react';
-import ErrorView from '@magento/venia-ui/lib/components/ErrorView';
-import { StoreTitle, Meta } from '@magento/venia-ui/lib/components/Head';
-import { Link } from 'react-router-dom';
-import resourceUrl from '@magento/peregrine/lib/util/makeUrl';
-import defaultClasses from './shopBy.module.css';
-import { useStyle } from '@magento/venia-ui/lib/classify';
-import cn from 'classnames';
-import Divider from '@riosst100/pwa-marketplace/src/components/Divider';
-import { ShopByShimmer } from '@riosst100/pwa-marketplace/src/components/ShopBy';
-import CustomSortBy from '@riosst100/pwa-marketplace/src/components/CustomSortBy';
-import ArraySearchInput from '@riosst100/pwa-marketplace/src/components/ArraySearchInput';
-import { useCustomSort } from '@riosst100/pwa-marketplace/src/hooks/useCustomSort';
-import { useShopBy } from '@riosst100/pwa-marketplace/src/talons/ShopBy/useShopBy';
-
-const ShopBy = props => {
-    const [active, setActive] = useState('all');
-
-    const [searchQuery, setSearchQuery] = useState('');
-
-    
-    const sortProps = useCustomSort({ sortFromSearch: false, defaultSort: {
-        sortText: 'All (A-Z)',
-        value: 'all'
-    }});
-
-    const [currentSort] = sortProps;
-
-    // const [sortBy, setSortBy] = useState({
-    //     sortText: 'All (A-Z)',
-    //     value: 'all'
-    // });
-
-
-    const classes = useStyle(defaultClasses);
-
-    const talonProps = useShopBy({ searchQuery, setActive, currentSort });
-
-    const { error, loading, dataResult, categoryUrlSuffix, categoryUrlKey, productType, filteredCollectibleGameSets, availableGroups, attributeData, alpha, category } = talonProps;
-
-    if (loading && !dataResult)
-        return <ShopByShimmer />;
-    if (error && !dataResult) return <ErrorView />;
-
-    if (!dataResult && !loading && !error) {
-        return <ShopByShimmer />;
-    }
-
-    const newData = searchQuery ? filteredCollectibleGameSets : dataResult;
-
-    const setRelases = availableGroups.map((group, index) => {
-        const optionsResult = [];
-
-        if (active === 'all' || active === group) {
-            dataResult[group].map((option, index) => {
-                const { label, value } = option;
-
-                const categoryUrl = resourceUrl(
-                    `/${categoryUrlKey}${categoryUrlSuffix || ''}?${attributeData.attribute_code}[filter]=${label},${value}`
-                );
-
-                optionsResult.push(<li className='list-none'>
-                    <Link to={categoryUrl} className="hover_bg-darkblue-900 hover_text-white w-full block text-[14px] py-[2px] px-2">
-                        {label}
-                    </Link>
-                </li>)
-            })
-
-            return (
-                <>
-                    {optionsResult ?
-                    <div className='singles_group-wrapper mb-4 px-2 inline-block w-full'>
-                        <div className='singles_item_group_letter text-xl font-medium border-b border-gray-100 pb-1 mb-2' >
-                            {group}
-                        </div>
-                        <div className={cn('singles_item-list flex flex-col')}>{optionsResult}</div>
-                    </div> : ''}
-                </>
-            );
-        }
-        
-        return null;
-    });
-
-    const handleActive = (val) => {
-        setActive(val);
-
-        // 
-
-
-        setSearchQuery('')
-    }
-
-    let availableSortBy = [
-        {
-            'label': 'All (A-Z)',
-            'value': 'all'
-        }
-    ];
-
-    let title = "All Sets";
-    if (productType == "expansion-sets") {
-        title = "Expansion Sets";
-    } else if (productType == "artist") {
-        title = "Artist";
-    }
-
-    return (
-        <Fragment>
-            <StoreTitle>{title}</StoreTitle>
-            <h1 className='mx-auto relative block text-xl font-bold text-center pt-10 pb-4'>
-                {attributeData ? 'By ' + attributeData.label : 'Shop By'}
-            </h1>
-            <div className='border border-gray-100 px-6'>
-                {dataResult ? (
-                    <div
-                        className={classes.toolbar}
-                    >
-                        <div style={{"width":"35%"}}><ArraySearchInput active={active} searchQuery={searchQuery} placeholder="Search sets..." isOpen={true} setSearchQuery={setSearchQuery} /></div>
-                        <CustomSortBy sortProps={sortProps} availableSortMethods={availableSortBy} />
-                    </div>
-                ) : ''}
-                {productType != "expansion-sets" ? (
-                    <>
-                        <section className='single_list-indexing-container relative m-auto py-10'>
-                            <ul className='flex gap-2 justify-center flex-wrap'>
-                                <li>
-                                    <button
-                                        className={cn(
-                                            'rounded-md border border-solid border-gray-100 p-2 min-w-[28px]',
-                                            'leading-4 font-medium text-base hover_bg-gray-50'
-                                        )}
-                                        onClick={() => {
-                                            handleActive('all')
-                                        }}
-                                    >
-                                        {active == 'all' ? <b>All</b> : 'All'}
-                                    </button>
-                                </li>
-                                {alpha.map((letter, index) => (
-                                    <li key={index}>
-                                        <button
-                                            className={cn(
-                                                'rounded-md border border-solid border-gray-100 p-2 min-w-[28px]',
-                                                'leading-4 font-medium text-base ',
-                                                availableGroups.includes(letter) > 0 ? 'hover_bg-gray-50' : 'bg-gray-100 text-gray-400',
-                                            )}
-                                            onClick={() => {
-                                                handleActive(letter)
-                                            }}
-                                            disabled={availableGroups.includes(letter) > 0 ? false : true}
-                                        >
-                                            {active == letter ? <b>{letter}</b> : letter}
-                                        </button>
-                                    </li>
-                                ))}
-                            </ul>
-                        </section>
-                    </>
-                ) : ''}
-                <Divider className="mb-5 px-4 mt-5" />
-                <section className='singles-container'>
-                    <div className={cn('singles-wrapper block -mx-4', classes.singlesWrapper)}>
-                        {Object.keys(dataResult).length != 0 ? setRelases : (searchQuery ? <div className='singles_group-wrapper mb-4 px-2 inline-block w-full'>No data found for <b>{searchQuery}</b> search query.</div> : <div className='singles_group-wrapper mb-4 px-2 inline-block w-full'>No data found.</div>)}
-                    </div>
-                </section>
-            </div>
-        </Fragment>
-    );
-}
-
-export default ShopBy;