@riosst100/pwa-marketplace 1.6.1 → 1.6.2

package/src/components/FilterTop/filterTopBlock.js

@@ -0,0 +1,54 @@
+import React from 'react';
+import { arrayOf, shape, string, func, bool } from 'prop-types';
+import { useIntl } from 'react-intl';
+import { ChevronDown as ArrowDown, ChevronUp as ArrowUp } from 'react-feather';
+import { Form } from 'informed';
+
+import { useFilterBlock } from '@magento/peregrine/lib/talons/FilterModal';
+import setValidator from '@magento/peregrine/lib/validators/set';
+
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import Icon from '@magento/venia-ui/lib/components/Icon';
+import FilterBlockList from './FilterBlockList';
+import { ArrowUp2 } from 'iconsax-react';
+import cn from 'classnames';
+
+const FilterTopBlock = props => {
+    const {
+        filterApi,
+        filterState,
+        filterFrontendInput,
+        group,
+        items,
+        name,
+        onApply,
+        filterNames,
+        initialOpen,
+        originalFilterState
+    } = props;
+
+    const { formatMessage } = useIntl();
+    const talonProps = useFilterBlock({
+        filterState,
+        items,
+        initialOpen
+    });
+
+    const list = <Form>
+        <FilterBlockList
+            filterApi={filterApi}
+            filterState={filterState}
+            originalFilterState={originalFilterState}
+            name={name}
+            filterFrontendInput={filterFrontendInput}
+            group={group}
+            items={items}
+            filterNames={filterNames}
+            onApply={onApply}
+        />
+    </Form>
+
+    return list;
+};
+
+export default FilterTopBlock;

package/src/components/FilterTop/index.js

@@ -1,2 +1,2 @@
-export { default } from './filterTop';
-export { default as FilterTopShimmer } from './filterTop.shimmer';
+export { default } from './filterTop';
+export { default as FilterTopShimmer } from './filterTop.shimmer';

package/src/components/FilterTopBackup/CustomFilters/customFilter.js

@@ -0,0 +1,83 @@
+import React, { useCallback } from 'react';
+import { useIntl } from 'react-intl';
+import { shape, string, func } from 'prop-types';
+import { X as Remove } from 'react-feather';
+
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import Icon from '@magento/venia-ui/lib/components/Icon';
+import Trigger from '@magento/venia-ui/lib/components/Trigger';
+import defaultClasses from './customFilter.module.css';
+import resourceUrl from '@magento/peregrine/lib/util/makeUrl';
+
+import { Link } from 'react-router-dom';
+
+const CustomFilter = props => {
+    const { group, item, onRemove } = props;
+    const classes = useStyle(defaultClasses, props.classes);
+    const { formatMessage } = useIntl();
+
+    const ariaLabel = formatMessage(
+        {
+            id: 'filterModal.action.clearFilterItem.ariaLabel',
+            defaultMessage: 'Clear filter "{name}"'
+        },
+        {
+            name: item.label ? item.label : item.title
+        }
+    );
+
+    const normalizedData = [
+        {
+            'label': 'Sealed Products',
+            'path': '/'
+        },
+        {
+            'label': 'Singles',
+            'path': '/'
+        },
+        {
+            'label': 'Supplies',
+            'path': '/'
+        }
+    ];
+
+    const subCategory = [];
+
+    const customAttributeLandingPage = ['card_set', 'sc_baseball_release'];
+
+    if (customAttributeLandingPage.includes(group)) {
+        normalizedData && normalizedData.map(({ label, path }, index) => {
+            subCategory.push(
+                <Link
+                    key={index}
+                    to={resourceUrl(path)}
+                >
+                    <li className={classes.item}>{label}</li>
+                </Link>
+            )
+        });
+    }
+
+
+    return (
+        <ul className={classes.root}>{subCategory}</ul>
+        // <span className={classes.root} data-cy="CustomFilter-root">
+        //     <span className={classes.text}>
+        //         {item.label ? item.label : item.title}
+        //     </span>
+        // </span>
+    );
+};
+
+export default CustomFilter;
+
+CustomFilter.defaultProps = {
+    onRemove: null
+};
+
+CustomFilter.propTypes = {
+    classes: shape({
+        root: string
+    }),
+    onRemove: func
+};

package/src/components/FilterTopBackup/CustomFilters/customFilter.module.css

@@ -0,0 +1,22 @@
+.root {
+    composes: flex from global;
+    composes: flex-wrap from global;
+    composes: mt-3 from global;
+    composes: gap-[15px] from global;
+    margin-bottom: 10px;
+}
+
+.item {
+    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;
+    composes: text-colorDefault from global;
+    composes: bg-white from global;
+    composes: border-gray-100 from global;
+    border-radius: 5px;
+}

package/src/components/FilterTopBackup/CustomFilters/customFilters.js

@@ -0,0 +1,132 @@
+import React, { useCallback, useMemo } from 'react';
+import { func, shape, string } from 'prop-types';
+import { useIntl } from 'react-intl';
+
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import CustomFilter from './customFilter';
+import defaultClasses from './customFilters.module.css';
+import resourceUrl from '@magento/peregrine/lib/util/makeUrl';
+import { Link } from 'react-router-dom';
+import { useCustomFilters } from '@riosst100/pwa-marketplace/src/talons/CustomFilters/useCustomFilters';
+
+const CustomFilters = props => {
+    const { onRemove, clearAll, category, filters } = props;
+    const classes = useStyle(defaultClasses, props.classes);
+    const { formatMessage } = useIntl();
+
+    const talonProps = useCustomFilters({ filters });
+
+    const { 
+        customFiltersData, 
+        categoryUrlSuffix, 
+        search, 
+        pathname,
+        filterApi,
+        // filterItems,
+        // filterNames,
+        // filterFrontendInput,
+        filterState
+     } = talonProps;
+
+    const params = search ? JSON.parse('{"' + decodeURI(search).replace(/"/g, '\\"').replace(/&/g, '","').replace(/=/g,'":"') + '"}') : {};
+
+    const { removeItem } = filterApi;
+
+    const activeFilters = useMemo(() => {
+        const elements = [];
+        for (const [group, items] of filterState) {
+            for (const item of items) {
+                elements.push(
+                    {
+                        group: group,
+                        item: item,
+                        removeItem: removeItem
+                    }
+                );
+            }
+        }
+
+        return elements;
+    }, [filterState, removeItem]);
+
+    // console.log(activeFilters)\\
+
+    // const handleClick = useCallback(() => {
+    //     removeItem({ group, item });
+    // }, [group, item, removeItem]);
+
+    // create elements and params at the same time for efficiency
+    const filterElements = useMemo(() => {
+        const elements = [];
+        customFiltersData && customFiltersData.map((filter, index) => {
+            const { label, attribute_code, options } = filter || {};
+
+            const group = attribute_code;
+
+            // const handleClick = useCallback(() => {
+            //     removeItem({ group, item });
+            //     if (typeof onRemove === 'function') {
+            //         onRemove(group, item);
+            //     }
+            // }, [group, item, removeItem, onRemove]);
+
+            if (options.length) {
+                const items = [];
+                options.map((item, index) => {
+                    const { label, value } = item
+                    // const path = '/';
+
+                    // const path = resourceUrl(
+                    //     `/${category.url_path}${categoryUrlSuffix || ''}?${attribute_code}[filter]=${label},${value}`
+                    // );
+                    // const keyAttr = `${attribute_code}[filter]`;
+
+                    if (params) {
+                        Object.keys(params).forEach(function(key, index) {
+                            if (index > 1) {
+                                delete params[key];
+                            }
+                        });
+                    }
+
+                    if (value != "all") {
+                        params[`${attribute_code}[filter]`] = `${label},${value}`;
+                    }
+
+                    const finalParams = params ? Object.keys(params).map(key => `${key}=${params[key]}`).join('&') : '';
+                    const path = pathname + finalParams;
+
+                    if (value != "all") {
+                        items.push(
+                            <li key={index}>
+                                <Link
+                                    to={path}
+                                >
+                                    <span className={classes.item}>{label}</span>
+                                </Link>
+                            </li>
+                        )
+                    } else {
+                        items.push(
+                            <li key={index}>
+                                <span className={classes.item} onClick={removeItem({ group, item })}>{label}</span>
+                            </li>
+                        )
+                    }
+                });
+
+                elements.push(
+                    <ul key={index} className={classes.root}>{items}</ul>
+                );
+            }
+        })
+
+        return elements;
+    }, [customFiltersData]);
+
+    return (
+        <>{filterElements}</>
+    );
+};
+
+export default CustomFilters;

package/src/components/FilterTopBackup/CustomFilters/customFilters.module.css

@@ -0,0 +1,23 @@
+.root {
+    composes: flex from global;
+    composes: flex-wrap from global;
+    composes: mt-3 from global;
+    composes: gap-[15px] from global;
+    margin-bottom: 10px;
+    justify-content: center;
+}
+
+.item {
+    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;
+    composes: text-colorDefault from global;
+    composes: bg-white from global;
+    composes: border-gray-100 from global;
+    border-radius: 5px;
+}

package/src/components/FilterTopBackup/CustomFilters/index.js

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

package/src/components/FilterTopBackup/filterTop.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import CustomFilters from './CustomFilters';
+
+const FilterTop = props => {
+    const { category, filters } = props;
+    return (
+        <CustomFilters
+            category={category}
+            filters={filters}
+        />
+    );
+};
+
+export default FilterTop;

package/src/components/FilterTopBackup/filterTop.module.css

@@ -0,0 +1,23 @@
+.root {
+    composes: flex from global;
+    composes: flex-wrap from global;
+    composes: mt-3 from global;
+    composes: gap-[15px] from global;
+    margin-bottom: 10px;
+    justify-content: center;
+}
+
+.item {
+    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;
+    composes: text-colorDefault from global;
+    composes: bg-white from global;
+    composes: border-gray-100 from global;
+    border-radius: 5px;
+}

package/src/components/FilterTopBackup/filterTop.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 './filterTop.module.css';
+
+const FilterTop = 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>
+    );
+};
+
+FilterTop.propTypes = {
+    classes: shape({
+        root: string
+    })
+};
+
+export default FilterTop;

package/src/components/FilterTopBackup/index.js

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

package/src/components/RelatedProduct/index.js

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

@@ -0,0 +1,112 @@
+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-semibold 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-4 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

@@ -0,0 +1,154 @@
+[
+    {
+        "__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"
+    }
+]