@riosst100/pwa-marketplace 2.0.7 → 2.0.9

package/src/components/ProductListTab/productListTab.js

@@ -1,100 +0,0 @@
-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

@@ -1,64 +0,0 @@
-.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

@@ -1,24 +0,0 @@
-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

@@ -1,39 +0,0 @@
-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;

package/src/components/RFQ/modalRfq.js

@@ -1,249 +0,0 @@
-import React, { useState, useC } from 'react';
-import Button from '@magento/venia-ui/lib/components/Button';
-import Modal from '@riosst100/pwa-marketplace/src/components/Modal';
-import { X } from 'react-feather';
-import { primary900 } from '@riosst100/pwa-marketplace/src/theme/vars';
-import Field from '@magento/venia-ui/lib/components/Field';
-import TextInput from '@magento/venia-ui/lib/components/TextInput';
-import TextArea from '@magento/venia-ui/lib/components/TextArea';
-import { isRequired } from '@magento/venia-ui/lib/util/formValidators';
-import DatePicker from "react-datepicker";
-import { Form } from 'informed';
-import { useIntl } from 'react-intl';
-import { useDropzone } from "react-dropzone";
-import { DocumentUpload } from 'iconsax-react';
-import cn from 'classnames';
-
-import "react-datepicker/dist/react-datepicker.css";
-
-const RFQModalForm = (props) => {
-
-    const { open = false, setOpen = () => { } } = props;
-    const { formatMessage } = useIntl();
-
-    const [startDate, setStartDate] = useState(new Date());
-
-    // Upload FIle
-    const {
-        acceptedFiles,
-        getRootProps,
-        getInputProps,
-        isDragActive
-    } = useDropzone();
-
-    const files = acceptedFiles.map((file) => (
-        <div key={file.path} className='block font-medium mb-1'>
-            {file.path} - {Math.round(file.size / 1000)} kB
-        </div>
-    ));
-
-    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-4'>
-                        <div className='text-lg text-black font-medium'>
-                            {
-                                formatMessage({
-                                    id: 'productFullDetail.RequestQuote',
-                                    defaultMessage:
-                                        'Request a Quote'
-                                })
-                            }
-                        </div>
-                        <button onClick={() => { setOpen(!open) }} >
-                            <X size={24} color={primary900} />
-                        </button>
-                    </div>
-
-                    <div className='flex flex-col gap-y-[16px]'>
-                        <Form
-                            data-cy="form_bid"
-                            className="flex flex-col gap-y-4"
-                            initialValues={{}}
-                            onSubmit={() => { }}
-                            onChange={() => { }}
-                        >
-                            <Field
-                                id="quote_price_per_unit_field"
-                                label={
-                                    formatMessage({
-                                        id: 'productFullDetail.QuotePricePerUnit',
-                                        defaultMessage:
-                                            'Quote Price Per Unit'
-                                    })
-                                }
-                            >
-                                <TextInput
-                                    id="quote_price_per_unit"
-                                    field="quote_price_per_unit"
-                                    validate={isRequired}
-                                    validateOnBlur
-                                    mask={value => value && value.trim()}
-                                    maskOnBlur={true}
-                                    data-cy="quote_price_per_unit"
-                                    aria-label={'quote_price_per_unit'}
-                                    placeholder={'10.00'}
-                                />
-                            </Field>
-
-                            <Field
-                                id="quote_qty_field"
-                                label={
-                                    formatMessage({
-                                        id: 'productFullDetail.QuoteQuantity',
-                                        defaultMessage:
-                                            'Quote Quantity'
-                                    })
-                                }
-                            >
-                                <TextInput
-                                    id="quote_qty"
-                                    field="quote_qty"
-                                    validate={isRequired}
-                                    validateOnBlur
-                                    mask={value => value && value.trim()}
-                                    maskOnBlur={true}
-                                    data-cy="quote_qty"
-                                    aria-label={'quote_qty'}
-                                    placeholder={'10'}
-                                />
-                            </Field>
-
-                            <Field
-                                id="date_need_quote_field"
-                                label={
-                                    formatMessage({
-                                        id: 'productFullDetail.dateNeedQuote',
-                                        defaultMessage:
-                                            'Date Need Quote'
-                                    })
-                                }
-                            >
-                                <DatePicker
-                                    className='w-full border border-gray-100 rounded-md px-[10px] py-[5px] min-h-[40px]'
-                                    selected={startDate}
-                                    onChange={(date) => setStartDate(date)}
-                                />
-                            </Field>
-
-                            <Field
-                                id="phone_number_field"
-                                label={
-                                    formatMessage({
-                                        id: 'productFullDetail.phoneNumber',
-                                        defaultMessage:
-                                            'Phone Number'
-                                    })
-                                }
-                            >
-                                <TextInput
-                                    id="phone_number"
-                                    field="phone_number"
-                                    validate={isRequired}
-                                    validateOnBlur
-                                    mask={value => value && value.trim()}
-                                    maskOnBlur={true}
-                                    data-cy="phone_number"
-                                    aria-label={'phone_number'}
-                                    placeholder={'10'}
-                                />
-                            </Field>
-
-                            <Field
-                                id="quote_comment_field"
-                                label={
-                                    formatMessage({
-                                        id: 'productFullDetail.addYourComment',
-                                        defaultMessage:
-                                            'Add Your Comment'
-                                    })
-                                }
-                            >
-                                <TextArea
-                                    id="quote_comment"
-                                    field="quote_comment"
-                                    validateOnBlur
-                                    mask={value => value && value.trim()}
-                                    maskOnBlur={true}
-                                    data-cy="quote_comment"
-                                    aria-label={'quote_comment'}
-                                    placeholder={'Your Comment'}
-                                />
-                            </Field>
-
-                            <section className="wfp--dropzone">
-                                <div
-                                    {...getRootProps({ isDragActive })}
-                                    className='border border-blue-600 rounded-md border-dashed flex flex-col justify-center items-center py-6'
-                                >
-                                    <input {...getInputProps()} />
-                                    <DocumentUpload
-                                        size="32"
-                                        color="#f76b1c"
-                                    />
-                                    <div className='mt-2 text-blue-600'>Drop files or click here to upload</div>
-                                </div>
-                                {files && (
-                                    <div className="wfp--dropzone__file-list mt-4">
-                                        <ul>{files}</ul>
-                                    </div>
-                                )}
-                            </section>
-
-
-                            <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)}
-                                >
-                                    {
-                                        formatMessage({
-                                            id: 'productFullDetail.cancel',
-                                            defaultMessage:
-                                                'Cancel'
-                                        })
-                                    }
-                                </Button>
-                                <Button
-                                    priority='high'
-                                    classes={{
-                                        content: 'capitalize text-[16px] font-medium'
-                                    }}
-                                >
-                                    {
-                                        formatMessage({
-                                            id: 'productFullDetail.SendRequest',
-                                            defaultMessage:
-                                                'Send Request'
-                                        })
-                                    }
-                                </Button>
-                            </div>
-                        </Form>
-                    </div>
-                </div>
-            </Modal>
-            <style jsx>
-                {`
-                    .react-datepicker__input-container>input:focus-visible,
-                    .react-datepicker__input-container>input:focus, 
-                    .react-datepicker__input-container>input:active {
-                        outline: none;
-                    }
-                    .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::after {
-                        left: 25px;
-                    }
-                `}
-            </style>
-        </>
-    )
-}
-
-export default RFQModalForm;

package/src/components/RFQPage/index.js

@@ -1,14 +0,0 @@
-import AccountLayout from '@riosst100/pwa-marketplace/src/components/AccountLayout';
-import QuoteList from '@riosst100/pwa-marketplace/src/components/RFQPage/quoteList';
-
-import React from 'react'
-
-const index = () => {
-    return (
-        <AccountLayout>
-            <QuoteList />
-        </AccountLayout>
-    )
-}
-
-export default index;