@riosst100/pwa-marketplace 2.1.3 → 2.1.5

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@riosst100/pwa-marketplace",
   "author": "riosst100@gmail.com",
-  "version": "2.1.3",
+  "version": "2.1.5",
   "main": "src/index.js",
   "pwa-studio": {
     "targets": {

package/src/componentOverrideMapping.js

@@ -65,4 +65,10 @@ module.exports = componentOverrideMapping = {
     [`@magento/venia-ui/lib/components/OrderHistoryPage/index.js`]: '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/OrderHistoryPage/index.js',
     [`@magento/venia-ui/lib/components/TextArea/index.js`]: '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/TextArea/index.js',
     [`@magento/venia-ui/lib/components/WishlistPage/index.js`]: '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/WishlistPage/index.js',
+    [`@magento/venia-ui/lib/components/ProductOptions/options.js`]: '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/ProductOptions/options.js',
+    [`@magento/venia-ui/lib/components/Price/price.js`]: '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/Price/price.js',
+    [`@magento/peregrine/lib/talons/MagentoRoute/useMagentoRoute.js`]: '@riosst100/pwa-marketplace/src/overwrites/peregrine/lib/talons/MagentoRoute/useMagentoRoute.js',
+    [`@magento/peregrine/lib/talons/ProductOptions/useOption.js`]: '@riosst100/pwa-marketplace/src/overwrites/peregrine/lib/talons/ProductOptions/useOption.js',
+    [`@magento/peregrine/lib/talons/ProductOptions/useTile.js`]: '@riosst100/pwa-marketplace/src/overwrites/peregrine/lib/talons/ProductOptions/useTile.js',
+    [`@magento/peregrine/lib/talons/ProductImageCarousel/useProductImageCarousel.js`]: '@riosst100/pwa-marketplace/src/overwrites/peregrine/lib/talons/ProductImageCarousel/useProductImageCarousel.js'
 };

package/src/components/FavoriteSeller/AddToListButton/addToListButton.js

@@ -1,54 +1,54 @@
-import React, { useRef } from 'react';
-import { element, func, shape, string } from 'prop-types';
-import { Heart } from 'react-feather';
-import { useAddToFavoriteListButton } from '@riosst100/pwa-marketplace/src/talons/FavoriteSeller/AddToListButton/useAddToFavoriteListButton';
-import { useButton } from 'react-aria';
-
-import { useStyle } from '@magento/venia-ui/lib/classify';
-import Icon from '@magento/venia-ui/lib/components/Icon';
-import defaultClasses from './addToListButton.module.css';
-import { useCommonToasts } from '@magento/venia-ui/lib/components/Wishlist/AddToListButton/useCommonToasts';
-
-const HeartIcon = <Heart color='#f76b1c' size={14} variant="Outline" className='stroke-[#f76b1c]' />;
-
-const AddToFavoriteListButton = props => {
-    const talonProps = useAddToFavoriteListButton(props);
-    const buttonRef = useRef();
-
-    const {
-        buttonProps,
-        buttonText,
-        errorToastProps,
-        isSelected,
-        loginToastProps,
-        successToastProps
-    } = talonProps;
-
-    useCommonToasts({ errorToastProps, loginToastProps, successToastProps });
-    const { buttonProps: ariaButtonProps } = useButton(buttonProps, buttonRef);
-
-    const classes = useStyle(defaultClasses, props.classes);
-    const buttonClass = isSelected ? classes.root_selected : classes.root;
-
-    return (
-        <button ref={buttonRef} className={buttonClass} {...ariaButtonProps}>
-            {props.icon}
-        </button>
-    );
-};
-
-export default AddToFavoriteListButton;
-
-AddToFavoriteListButton.defaultProps = {
-    icon: HeartIcon
-};
-
-AddToFavoriteListButton.propTypes = {
-    afterAdd: func,
-    beforeAdd: func,
-    classes: shape({
-        root: string,
-        root_selected: string
-    }),
-    icon: element
-};
+import React, { useRef } from 'react';
+import { element, func, shape, string } from 'prop-types';
+import { Heart } from 'react-feather';
+import { useAddToFavoriteListButton } from '@riosst100/pwa-marketplace/src/talons/FavoriteSeller/AddToListButton/useAddToFavoriteListButton';
+import { useButton } from 'react-aria';
+
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import Icon from '@magento/venia-ui/lib/components/Icon';
+import defaultClasses from './addToListButton.module.css';
+import { useCommonToasts } from '@magento/venia-ui/lib/components/Wishlist/AddToListButton/useCommonToasts';
+
+const HeartIcon = <Heart color='#f76b1c' size={14} variant="Outline" className='stroke-[#f76b1c]' />;
+
+const AddToFavoriteListButton = props => {
+    const talonProps = useAddToFavoriteListButton(props);
+    const buttonRef = useRef();
+
+    const {
+        buttonProps,
+        buttonText,
+        errorToastProps,
+        isSelected,
+        loginToastProps,
+        successToastProps
+    } = talonProps;
+
+    useCommonToasts({ errorToastProps, loginToastProps, successToastProps });
+    const { buttonProps: ariaButtonProps } = useButton(buttonProps, buttonRef);
+
+    const classes = useStyle(defaultClasses, props.classes);
+    const buttonClass = isSelected ? classes.root_selected : classes.root;
+
+    return (
+        <button ref={buttonRef} className={buttonClass} {...ariaButtonProps}>
+            {props.icon}
+        </button>
+    );
+};
+
+export default AddToFavoriteListButton;
+
+AddToFavoriteListButton.defaultProps = {
+    icon: HeartIcon
+};
+
+AddToFavoriteListButton.propTypes = {
+    afterAdd: func,
+    beforeAdd: func,
+    classes: shape({
+        root: string,
+        root_selected: string
+    }),
+    icon: element
+};

package/src/components/FavoriteSeller/AddToListButton/addToListButton.module.css

@@ -1,17 +1,17 @@
-.root {
-    composes: gap-x-2xs from global;
-    composes: inline-flex from global;
-    composes: items-center from global;
-    min-height: 3rem;
-    composes: min-w-[3rem] from global;
-}
-
-.root_selected {
-    composes: root;
-
-    --selectedColor: rgb(var(--venia-global-color-red-400));
-    --fill: var(--selectedColor);
-    --stroke: var(--selectedColor);
-
-    composes: no-underline from global;
-}
+.root {
+    composes: gap-x-2xs from global;
+    composes: inline-flex from global;
+    composes: items-center from global;
+    min-height: 3rem;
+    composes: min-w-[3rem] from global;
+}
+
+.root_selected {
+    composes: root;
+
+    --selectedColor: rgb(var(--venia-global-color-red-400));
+    --fill: var(--selectedColor);
+    --stroke: var(--selectedColor);
+
+    composes: no-underline from global;
+}

package/src/components/FavoriteSeller/AddToListButton/index.js

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

package/src/components/FavoriteSeller/AddToListButton/useCommonToasts.js

@@ -1,33 +1,33 @@
-import React, { useEffect } from 'react';
-import { AlertCircle, Check, Info } from 'react-feather';
-import { useToasts } from '@magento/peregrine';
-
-import Icon from '@magento/venia-ui/lib/components/Icon';
-
-const CheckIcon = <Icon size={20} src={Check} />;
-const ErrorIcon = <Icon size={20} src={AlertCircle} />;
-const InfoIcon = <Icon size={20} src={Info} />;
-
-export const useCommonToasts = props => {
-    const { errorToastProps, loginToastProps, successToastProps } = props;
-
-    const [, { addToast }] = useToasts();
-
-    useEffect(() => {
-        if (loginToastProps) {
-            addToast({ ...loginToastProps, icon: InfoIcon });
-        }
-    }, [addToast, loginToastProps]);
-
-    useEffect(() => {
-        if (successToastProps) {
-            addToast({ ...successToastProps, icon: CheckIcon });
-        }
-    }, [addToast, successToastProps]);
-
-    useEffect(() => {
-        if (errorToastProps) {
-            addToast({ ...errorToastProps, icon: ErrorIcon });
-        }
-    }, [addToast, errorToastProps]);
-};
+import React, { useEffect } from 'react';
+import { AlertCircle, Check, Info } from 'react-feather';
+import { useToasts } from '@magento/peregrine';
+
+import Icon from '@magento/venia-ui/lib/components/Icon';
+
+const CheckIcon = <Icon size={20} src={Check} />;
+const ErrorIcon = <Icon size={20} src={AlertCircle} />;
+const InfoIcon = <Icon size={20} src={Info} />;
+
+export const useCommonToasts = props => {
+    const { errorToastProps, loginToastProps, successToastProps } = props;
+
+    const [, { addToast }] = useToasts();
+
+    useEffect(() => {
+        if (loginToastProps) {
+            addToast({ ...loginToastProps, icon: InfoIcon });
+        }
+    }, [addToast, loginToastProps]);
+
+    useEffect(() => {
+        if (successToastProps) {
+            addToast({ ...successToastProps, icon: CheckIcon });
+        }
+    }, [addToast, successToastProps]);
+
+    useEffect(() => {
+        if (errorToastProps) {
+            addToast({ ...errorToastProps, icon: ErrorIcon });
+        }
+    }, [addToast, errorToastProps]);
+};

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

@@ -1,132 +1,130 @@
-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;
+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]);
+
+    // 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/FilterTop/filterTop.js

@@ -24,8 +24,7 @@ const SCROLL_OFFSET = 150;
 const FilterTop = props => {
     const { shopby, filters, filterCountToOpen, allowedFilters, category } = props;
     const [filterBy, setFilterBy] = useState('');
-
-    // console.log(filterBy)
+    
     const talonProps = useFilterTop({ shopby, filters, category, filterBy, setFilterBy });
     const {
         filterApi,
@@ -47,8 +46,6 @@ const FilterTop = props => {
 
     // const filtersSearch = getFiltersFromSearch(search);
 
-    // console.log(search)
-
     // filters.forEach((values, key) => {
     //     newFilters[key] = getFilterInput(values, filterTypeMap.get(key));
     // });
@@ -104,10 +101,6 @@ const FilterTop = props => {
     // });
     // const allowedFiltersArr = ['card_rarity','card_print_version','card_set', 'card_product_type'];
 
-    // console.log(customFilters)
-
-    // console.log(filterItems)
-
     const filtersList = useMemo(
         () =>
             Array.from(filterItems, ([group, items], iteration) => {

package/src/components/LinkToOtherStores/index.js

@@ -0,0 +1,61 @@
+import React from 'react';
+import Divider from '@riosst100/pwa-marketplace/src/components/Divider';
+
+const LinkToOtherStores = (props) => {
+
+    const { productDetails } = props;
+
+    const linkToOtherStores = productDetails?.link_to_other_stores;
+
+    // Convert the JSON string to an array
+    const storesArray = JSON.parse(linkToOtherStores);
+
+    const getLogo = (stores) => {
+        let img = '';
+        if (stores == "Shopee") {
+            img = 'https://upload.wikimedia.org/wikipedia/commons/f/fe/Shopee.svg';
+        }
+        if (stores == "Tokopedia") {
+            img = 'https://upload.wikimedia.org/wikipedia/commons/a/a7/Tokopedia.svg';
+        }
+        if (stores == "Lazada") {
+            img = 'https://upload.wikimedia.org/wikipedia/commons/thumb/4/4d/Lazada_%282019%29.svg/1200px-Lazada_%282019%29.svg.png';
+        }
+
+        return img;
+    }
+
+    let finalLinkToOtherStores = [];
+
+    if (storesArray && storesArray.length) {
+        storesArray.forEach((store) => {
+            if (store.product_link) {
+                const logo = getLogo(store.stores);
+                finalLinkToOtherStores.push(
+                    <a href={store.product_link} className='platform_logo-wrapper rounded-md px-5 py-2.5 border border-gray-100 flex items-center' target="_blank">
+                        {logo ? <img
+                            alt={store.stores}
+                            width={60}
+                            height={30}
+                            src={logo}
+                        /> : store.stores   }
+                    </a>
+                )
+            }
+        })
+    }
+
+    return finalLinkToOtherStores && finalLinkToOtherStores.length ? <>
+        <section className='product_from-other-platform py-xs'>
+            <div className='text-sm flex mb-3'>
+                Also available in
+            </div>
+            <div className='platform-container flex gap-x-2.5'>
+                {finalLinkToOtherStores}
+            </div>
+        </section>
+        <Divider />
+    </> : '';
+}
+
+export default LinkToOtherStores;

package/src/components/NonSportCardsSets/nonSportCardsSets.js

@@ -67,8 +67,6 @@ const NonSportCardsSets = props => {
 
     const { error, loading, nonSportCardsSets, categoryUrlSuffix, categoryUrlKey, productType, filteredNonSportCardsSets, availableGroups, category } = talonProps;
 
-    console.log(filteredNonSportCardsSets)
-
     if (loading && !nonSportCardsSets)
         return <NonSportCardsSetsShimmer />;
     if (error && !nonSportCardsSets) return <ErrorView />;

package/src/components/RFQ/index.js

@@ -3,7 +3,9 @@ import Button from '@magento/venia-ui/lib/components/Button';
 import { useIntl } from 'react-intl';
 import ModalRFQ from './modalRfq';
 
-const AuctionDetail = (props) => {
+const RFQ = (props) => {
+
+    const { disabled } = props;
 
     const [open, setOpen] = useState(false);
     const { formatMessage } = useIntl();
@@ -17,6 +19,7 @@ const AuctionDetail = (props) => {
 
             <Button
                 data-cy="ProductFullDetail-RFQ"
+                disabled={disabled}
                 classes={{
                     content: 'normal-case font-medium text-[16px]'
                 }}
@@ -28,7 +31,7 @@ const AuctionDetail = (props) => {
                     formatMessage({
                         id: 'productFullDetail.RequestQuote',
                         defaultMessage:
-                            'Request a Quote'
+                            'Make An Offer'
                     })
                 }
             </Button>
@@ -36,4 +39,4 @@ const AuctionDetail = (props) => {
     )
 }
 
-export default AuctionDetail;
+export default RFQ;