@riosst100/pwa-marketplace 2.0.9 → 2.1.1

package/src/overwrites/venia-ui/lib/components/FilterSidebar/filterSidebar.js

@@ -0,0 +1,197 @@
+import React, { useMemo, useCallback, useRef } from 'react';
+import { FormattedMessage } from 'react-intl';
+import { array, arrayOf, shape, string, number } from 'prop-types';
+import { useFilterSidebar } from '@magento/peregrine/lib/talons/FilterSidebar';
+
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import LinkButton from '@magento/venia-ui/lib/components/LinkButton';
+import CurrentFilters from '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/FilterModal/CurrentFilters';
+import FilterBlock from '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/FilterModal/filterBlock';
+import defaultClasses from './filterSidebar.module.css';
+import { Filter } from 'iconsax-react';
+import cn from 'classnames';
+import { useHistory } from 'react-router-dom';
+
+
+const SCROLL_OFFSET = 150;
+
+/**
+ * A view that displays applicable and applied filters.
+ *
+ * @param {Object} props.filters - filters to display
+ */
+const FilterSidebar = props => {
+    const { filters, filterCountToOpen, allowedFilters, hideFilters } = props;
+    const talonProps = useFilterSidebar({ filters });
+    const {
+        filterApi,
+        filterItems,
+        filterNames,
+        filterFrontendInput,
+        filterState,
+        handleApply,
+        handleReset
+    } = talonProps;
+
+    const filterRef = useRef();
+    const classes = useStyle(defaultClasses, props.classes);
+
+    const handleApplyFilter = useCallback(
+        (...args) => {
+            const filterElement = filterRef.current;
+            if (
+                filterElement &&
+                typeof filterElement.getBoundingClientRect === 'function'
+            ) {
+                const filterTop = filterElement.getBoundingClientRect().top;
+                const windowScrollY =
+                    window.scrollY + filterTop - SCROLL_OFFSET;
+                window.scrollTo(0, windowScrollY);
+            }
+
+            handleApply(...args);
+        },
+        [handleApply, filterRef]
+    );
+
+    const history = useHistory();
+
+    const handleCategoryApplyFilter = useCallback(
+        (...args) => {
+            // const filterElement = filterRef.current;
+            // if (
+            //     filterElement &&
+            //     typeof filterElement.getBoundingClientRect === 'function'
+            // ) {
+            // const filterTop = filterElement.getBoundingClientRect().top;
+            // const windowScrollY =
+            //     window.scrollY + filterTop - SCROLL_OFFSET;
+            // window.scrollTo(0, windowScrollY);
+            // }
+
+            history.push('/' + args[1].path + '.html');
+
+            if (args[0] != "category_uid") {
+                handleApply(...args);
+            }
+        },
+        [handleApply, filterRef]
+    );
+
+    const allowedFiltersArr = [];
+
+    // allowedFilters?.length && allowedFilters.map((val, index) => {
+    //     allowedFiltersArr.push(val.code);
+    // });
+
+    const filtersList = useMemo(
+        () =>
+            Array.from(filterItems, ([group, items], iteration) => {
+                const blockState = filterState.get(group);
+                const groupName = filterNames.get(group);
+                const frontendInput = filterFrontendInput.get(group);
+
+                const hideFilters = ['trains','trains_locomotives','trains_supplies_type','lof_preorder','auction','special_price','sc_baseball_inserts','sc_baseball_parallel','sale','sc_set_type','sc_brands'];
+                if (!hideFilters.includes(group) && groupName) {
+                    
+                // if (!allowedFiltersArr?.length && group != "category_uid" || allowedFiltersArr?.length && allowedFiltersArr.includes(group)) {
+
+
+                    return (
+                        <FilterBlock
+                            key={group}
+                            filterApi={filterApi}
+                            filterState={blockState}
+                            filterFrontendInput={frontendInput}
+                            group={group}
+                            items={items}
+                            name={groupName}
+                            onApply={group == "category_uid" ? handleCategoryApplyFilter : handleApplyFilter}
+                            initialOpen={true}
+                        />
+                    );
+                }
+            }),
+        [
+            filterApi,
+            filterItems,
+            filterNames,
+            filterFrontendInput,
+            filterState,
+            filterCountToOpen,
+            handleApplyFilter
+        ]
+    );
+
+    const clearAll = filterState.size ? (
+        <div className={classes.action}>
+            <LinkButton
+                type="button"
+                onClick={handleReset}
+                data-cy="FilterSidebar-clearButton"
+            >
+                <FormattedMessage
+                    id={'filterModal.action'}
+                    defaultMessage={'Clear all'}
+                />
+            </LinkButton>
+        </div>
+    ) : null;
+
+    return (
+        <aside
+            className={classes.root}
+            ref={filterRef}
+            data-cy="FilterSidebar-root"
+            aria-busy="false"
+        >
+            <div className={classes.body}>
+                <div className={cn(classes.header)}>
+                    <h2
+                        data-cy="FilterSidebar-headerTitle"
+                        className={cn(classes.headerTitle, 'flex w-full justify-between items-center')}
+                    >
+                        <FormattedMessage
+                            id={'filterModal.headerTitle'}
+                            defaultMessage={'Filters'}
+                        />
+                        <Filter size={15} className='text-gray-900' />
+                    </h2>
+                </div>
+                {hideFilters ? <ul className={classes.blocks}>No filters available.</ul> : <>
+                <CurrentFilters
+                    filterApi={filterApi}
+                    filterNames={filterNames}
+                    filterState={filterState}
+                    onRemove={handleApplyFilter}
+                />
+                <ul className={classes.blocks}>{filtersList}</ul></>}
+            </div>
+        </aside>
+    );
+};
+
+FilterSidebar.defaultProps = {
+    filterCountToOpen: 3
+};
+
+FilterSidebar.propTypes = {
+    classes: shape({
+        action: string,
+        blocks: string,
+        body: string,
+        header: string,
+        headerTitle: string,
+        root: string,
+        root_open: string
+    }),
+    filters: arrayOf(
+        shape({
+            attribute_code: string,
+            items: array
+        })
+    ),
+    filterCountToOpen: number
+};
+
+export default FilterSidebar;

package/src/overwrites/venia-ui/lib/components/FilterSidebar/filterSidebar.module.css

@@ -0,0 +1,59 @@
+.root {
+    composes: bg-white from global;
+    composes: bottom-0 from global;
+    composes: hidden from global;
+    /* composes: max-w-modal from global; */
+    width: 220px;
+    /* composes: w-full from global; */
+    composes: z-foreground from global;
+    grid-template-rows: 1fr 7rem;
+
+    composes: lg_grid from global;
+    composes: border from global;
+    composes: border-gray-100 from global;
+    composes: shadow-type-1 from global;
+    composes: rounded-[6px] from global;
+    composes: py-2.5 from global;
+
+}
+
+.body {
+    composes: overflow-auto from global;
+}
+
+.header {
+    composes: flex from global;
+    composes: justify-between from global;
+}
+
+.headerTitle {
+    composes: flex from global;
+    composes: items-center from global;
+    composes: leading-normal from global;
+    composes: text-[14px] from global;
+    composes: font-medium from global;
+    composes: px-2.5 from global;
+    composes: mb-2.5 from global;
+}
+
+.action {
+    composes: px-2.5 from global;
+    composes: py-[5px] from global;
+}
+
+/* TODO @TW: cannot compose */
+.action button {
+    /* composes: text-base from global; */
+    font-size: 12px;
+    /* composes: text-[13px] from global; */
+    /* composes: no-underline from global; */
+    font-weight: 500;
+    text-decoration: underline;
+}
+
+.blocks {
+    composes: px-2.5 from global;
+    composes: flex from global;
+    composes: flex-col from global;
+    composes: gap-2.5 from global;
+}

package/src/overwrites/venia-ui/lib/components/FilterSidebar/filterSidebar.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 './filterSidebar.module.css';
+
+const FilterSidebar = props => {
+    const classes = useStyle(defaultClasses, props.classes);
+
+    return (
+        <aside className={classes.root} aria-live="polite" aria-busy="true">
+            <Shimmer width="95%" height="70vh" style={{ marginBottom: 25 }} />
+        </aside>
+    );
+};
+
+FilterSidebar.propTypes = {
+    classes: shape({
+        root: string
+    })
+};
+
+export default FilterSidebar;

package/src/overwrites/venia-ui/lib/components/FilterSidebar/index.js

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

package/src/overwrites/venia-ui/lib/components/Footer/footer.js

@@ -0,0 +1,147 @@
+import React, { Fragment } from 'react';
+import { Facebook, Instagram, Twitter, Linkedin } from 'react-feather';
+import { FormattedMessage, useIntl } from 'react-intl';
+import { Link } from 'react-router-dom';
+import { shape, string } from 'prop-types';
+import { useFooter } from '@magento/peregrine/lib/talons/Footer/useFooter';
+
+import Logo from '@magento/venia-ui/lib/components/Logo';
+import Newsletter from '@magento/venia-ui/lib/components/Newsletter';
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import defaultClasses from './footer.module.css';
+import { DEFAULT_LINKS, LOREM_IPSUM } from './sampleData';
+import resourceUrl from '@magento/peregrine/lib/util/makeUrl';
+import cn from 'classnames';
+import Divider from '@riosst100/pwa-marketplace/src/components/Divider';
+
+const Footer = props => {
+    const { links } = props;
+    const classes = useStyle(defaultClasses, props.classes);
+    const talonProps = useFooter();
+
+    const { copyrightText } = talonProps;
+    const { formatMessage } = useIntl();
+    const title = formatMessage({ id: 'logo.title', defaultMessage: 'Venia' });
+
+    const linkGroups = Array.from(links, ([groupKey, linkProps]) => {
+        const linkElements = Array.from(linkProps, ([text, pathInfo]) => {
+            let path = pathInfo;
+            let Component = Fragment;
+            if (pathInfo && typeof pathInfo === 'object') {
+                path = pathInfo.path;
+                Component = pathInfo.Component;
+            }
+
+            const itemKey = `text: ${text} path:${path}`;
+            const child = path ? (
+                <Link data-cy="Footer-link" className={classes.link} to={path}>
+                    <FormattedMessage id={text} defaultMessage={text} />
+                </Link>
+            ) : (
+                <span data-cy="Footer-label" className={classes.label}>
+                    <FormattedMessage id={text} defaultMessage={text} />
+                </span>
+            );
+
+            return (
+                <Component key={itemKey}>
+                    <li className={classes.linkItem}>{child}</li>
+                </Component>
+            );
+        });
+
+        return (
+            <ul key={groupKey} className={classes.linkGroup}>
+                {linkElements}
+            </ul>
+        );
+    });
+
+    return (
+        <footer
+            data-cy="Footer-root"
+            className={cn(
+                classes.root,
+                '!pt-[50px] !px-6 lg_!px-4'
+            )}
+        >
+            <div className={classes.links}>
+                {linkGroups}
+                <div>
+                    <Newsletter />
+                </div>
+                <div className={classes.callout}>
+                    <span
+                        data-cy="Footer-calloutHeading"
+                        className={classes.calloutHeading}
+                    >
+                        Follow Us
+                    </span>
+                    <ul className={classes.socialLinks}>
+                        <li>
+                            <Link to="" className="bg-darkblue-900 rounded-full flex justify-center items-center w-[34px] h-[34px]">
+                                <Instagram size={15} color='#FFFFFF' />
+                            </Link>
+                        </li>
+                        <li>
+                            <Link to="" className="bg-darkblue-900 rounded-full flex justify-center items-center w-[34px] h-[34px]">
+                                <Facebook size={15} color='#FFFFFF' />
+                            </Link>
+                        </li>
+                        <li>
+                            <Link to="" className="bg-darkblue-900 rounded-full flex justify-center items-center w-[34px] h-[34px]">
+                                <Twitter size={15} color='#FFFFFF' />
+                            </Link>
+                        </li>
+                        <li>
+                            <Link to="" className="bg-darkblue-900 rounded-full flex justify-center items-center w-[34px] h-[34px]">
+                                <svg width="14" height="16" viewBox="0 0 14 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                    <path d="M12.9311 4.27218C12.8573 4.19836 12.7835 4.19836 12.6358 4.19836C12.4144 4.19836 12.2667 4.19836 12.0453 4.12454C10.7903 3.82925 9.90442 2.86957 9.8306 1.61459V1.31931C9.8306 1.09784 9.68295 0.950195 9.46148 0.950195H7.173C6.95154 0.950195 6.80389 1.09784 6.80389 1.31931V10.5471C6.80389 11.4329 6.06567 12.0973 5.25363 12.0973C4.73688 12.0973 4.29395 11.8758 3.99866 11.5067C3.4819 10.8423 3.62955 9.80883 4.29395 9.29208C4.58923 9.07061 4.88452 9.07061 5.4751 9.07061C5.54892 9.07061 5.69656 9.07061 5.77039 8.99679C5.84421 8.92297 5.91803 8.84915 5.91803 8.7015V6.26538C5.91803 6.11773 5.77039 5.89627 5.62274 5.89627C4.44159 5.74862 3.26044 6.04391 2.37457 6.78213C1.56253 7.52035 0.971956 8.55386 0.824312 9.80883C0.602846 11.2115 1.1196 12.6879 2.07929 13.6476C2.96515 14.6073 4.22012 15.0502 5.40128 15.0502C6.58243 15.0502 7.76358 14.6073 8.64944 13.7214C9.53531 12.8355 10.0521 11.6544 10.0521 10.3994V6.3392C10.9379 6.78213 11.8976 7.07742 12.8573 7.07742C13.0788 7.07742 13.2264 6.92978 13.2264 6.70831V4.49365C13.0788 4.41983 13.0049 4.34601 12.9311 4.27218Z" fill="white" />
+                                </svg>
+                            </Link>
+                        </li>
+                        <li>
+                            <Link to="" className="bg-darkblue-900 rounded-full flex justify-center items-center w-[34px] h-[34px]">
+                                <Linkedin size={15} color='#FFFFFF' />
+                            </Link>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+            <div className="flex flex-row justify-between py-2 border-t border-gray-100">
+                <p className="text-colorDefault">{copyrightText || null}</p>
+                <ul className="flex flex-row gap-x-2.5">
+                    <li data-cy="Footer-terms" className={classes.terms}>
+                        <Link to="/" className="text-colorDefault underline">
+                            <FormattedMessage
+                                id={'footer.termsText'}
+                                defaultMessage={'Terms of Use'}
+                            />
+                        </Link>
+                    </li>
+                    <Divider className="w-[1px] !h-[20px]" />
+                    <li data-cy="Footer-privacy" className={classes.privacy}>
+                        <Link to="/" className="text-colorDefault underline">
+                            <FormattedMessage
+                                id={'footer.privacyText'}
+                                defaultMessage={'Privacy Policy'}
+                            />
+                        </Link>
+                    </li>
+                </ul>
+            </div>
+        </footer>
+    );
+};
+
+export default Footer;
+
+Footer.defaultProps = {
+    links: DEFAULT_LINKS
+};
+
+Footer.propTypes = {
+    classes: shape({
+        root: string
+    })
+};

package/src/overwrites/venia-ui/lib/components/Footer/footer.module.css

@@ -0,0 +1,70 @@
+.root {
+    composes: border-t from global;
+    composes: border-solid from global;
+    composes: border-gray-100 from global;
+    composes: gap-y-16 from global;
+    composes: grid from global;
+    composes: leading-normal from global;
+    composes: max-w-site from global;
+    composes: min-h-[15rem] from global;
+    composes: mx-auto from global;
+    composes: my-0 from global;
+    composes: pt-16 from global;
+    composes: text-sm from global;
+    composes: text-subtle from global;
+    composes: w-full from global;
+}
+
+.links {
+    composes: gap-x-md from global;
+    composes: gap-y-lg from global;
+    composes: grid from global;
+    composes: grid-cols-1 from global;
+    composes: md_grid-cols-1 from global;
+    composes: grid-flow-row-dense from global;
+    composes: lg_gap-x-sm from global;
+    composes: lg_gap-y-md from global;
+    composes: lg_grid-cols-4 from global;
+}
+
+.linkGroup {
+    /* composes: col-span-3 from global; */
+    composes: content-start from global;
+    composes: gap-xs from global;
+    composes: grid from global;
+
+    /* composes: xs_col-span-2 from global; */
+}
+
+.linkItem {
+    composes: first_text-colorDefault from global;
+    composes: first_font-medium from global;
+}
+
+.callout {
+    /* composes: col-span-3 from global; */
+    composes: leading-normal from global;
+    composes: max-w-[20rem] from global;
+    composes: text-sm from global;
+    composes: flex from global;
+    composes: flex-col from global;
+    composes: gap-y-[15px] from global;
+}
+
+.calloutHeading {
+    composes: font-medium from global;
+    composes: text-colorDefault from global;
+    composes: text-sm from global;
+}
+
+.calloutBody {
+    composes: mx-0 from global;
+    composes: my-xs from global;
+}
+
+.socialLinks {
+    composes: gap-xs from global;
+    composes: grid from global;
+    composes: grid-flow-col from global;
+    composes: justify-start from global;
+}

package/src/overwrites/venia-ui/lib/components/Footer/index.js

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

package/src/overwrites/venia-ui/lib/components/Footer/sampleData.js

@@ -0,0 +1,48 @@
+import { ContactLink } from '@magento/venia-ui/lib/components/ContactPage';
+
+const accountLinks = new Map()
+    .set('Account', null)
+    .set('Sign In', '/')
+    .set('Register', '/')
+    .set('Tracking Order', '/')
+
+const getToKnowUsLinks = new Map()
+    .set('About TCG Collective', null)
+    .set('Career', '/')
+    .set('Contact Us', '/')
+    .set('Help Center', '/')
+    .set('Intelectual Property Claims', '/');
+
+const aboutLinks = new Map()
+    .set('About Us', '/about-us')
+    .set('Our Story', null)
+    .set('Email Signup', null)
+    .set('Give Back', null);
+
+const sitesLinks = new Map()
+    .set('Sites', null)
+    .set('International', '/')
+    .set('Singapore', '/')
+    .set('Malaysia', '/')
+    .set('Indonesia', '/')
+    .set('Thailand', '/')
+    .set('Philippines', '/')
+    .set('Vietnam', '/')
+
+const helpLinks = new Map()
+    .set('Help', null)
+    .set('Customer Service', '/customer-service')
+    .set('Contact Us', {
+        path: '/contact-us',
+        Component: ContactLink
+    })
+    .set('Order Status', null)
+    .set('Returns', null);
+
+export const DEFAULT_LINKS = new Map()
+    .set('us', getToKnowUsLinks)
+    .set('account', accountLinks)
+    .set('sites', sitesLinks);
+
+export const LOREM_IPSUM =
+    'Lorem ipsum dolor sit amet, consectetur adipsicing elit, sed do eiusmod tempor incididunt ut labore et dolore.';

package/src/overwrites/venia-ui/lib/components/Gallery/addToCartButton.js

@@ -0,0 +1,116 @@
+import React from 'react';
+import { FormattedMessage, useIntl } from 'react-intl';
+import { string, number, shape } from 'prop-types';
+import { useAddToCartButton } from '@magento/peregrine/lib/talons/Gallery/useAddToCartButton';
+import { ShoppingBag, XSquare } from 'react-feather';
+import Icon from '@magento/venia-ui/lib/components/Icon';
+import Button from '@magento/venia-ui/lib/components/Button';
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import defaultClasses from './addToCartButton.module.css';
+
+const AddToCartButton = props => {
+    const { item, urlSuffix } = props;
+    const talonProps = useAddToCartButton({
+        item,
+        urlSuffix
+    });
+    const { handleAddToCart, isDisabled, isInStock } = talonProps;
+    const { formatMessage } = useIntl();
+
+    const classes = useStyle(defaultClasses, props.classes);
+
+    const AddToCartIcon = (
+        <Icon
+            classes={{ icon: classes.icon }}
+            src={ShoppingBag}
+            attrs={{ width: 16 }}
+        />
+    );
+
+    const OutOfStockIcon = (
+        <Icon
+            classes={{ icon: classes.icon }}
+            src={XSquare}
+            attrs={{ width: 16 }}
+        />
+    );
+
+    const buttonInStock = (
+        <Button
+            data-cy="AddToCartButton-buttonInStock"
+            aria-label={formatMessage({
+                id: 'addToCartButton.addItemToCartAriaLabel',
+                defaultMessage: 'Add to Cart'
+            })}
+            className={classes.root}
+            disabled={isDisabled}
+            onPress={handleAddToCart}
+            priority="high"
+            type="button"
+        >
+            {AddToCartIcon}
+            <span className={classes.text}>
+                <FormattedMessage
+                    id="addToCartButton.addItemToCart"
+                    defaultMessage="ADD TO CART"
+                />
+            </span>
+        </Button>
+    );
+
+    const buttonOutOfStock = (
+        <Button
+            data-cy="AddtoCartButton-buttonOutOfStock"
+            aria-label={formatMessage({
+                id: 'addToCartButton.itemOutOfStockAriaLabel',
+                defaultMessage: 'Out of Stock'
+            })}
+            className={classes.root}
+            disabled={isDisabled}
+            onPress={handleAddToCart}
+            priority="high"
+            type="button"
+        >
+            {OutOfStockIcon}
+            <span className={classes.text}>
+                <FormattedMessage
+                    id="addToCartButton.itemOutOfStock"
+                    defaultMessage="OUT OF STOCK"
+                />
+            </span>
+        </Button>
+    );
+
+    return isInStock ? buttonInStock : buttonOutOfStock;
+};
+
+export default AddToCartButton;
+
+AddToCartButton.propTypes = {
+    classes: shape({
+        root: string,
+        root_selected: string
+    }),
+    item: shape({
+        id: number.isRequired,
+        uid: string.isRequired,
+        name: string.isRequired,
+        small_image: shape({
+            url: string
+        }),
+        stock_status: string.isRequired,
+        __typename: string.isRequired,
+        url_key: string.isRequired,
+        url_suffix: string,
+        sku: string.isRequired,
+        price: shape({
+            regularPrice: shape({
+                amount: shape({
+                    value: number,
+                    currency: string
+                })
+            })
+        })
+    }),
+    urlSuffix: string
+};