@riosst100/pwa-marketplace 1.8.0 → 1.8.2

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

@@ -1,23 +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;
+.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

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

@@ -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/Header/websiteSwitcher.shimmer.js

@@ -1,6 +1,6 @@
-import React from 'react';
-import Shimmer from '@magento/venia-ui/lib/components/Shimmer';
-
-export default () => {
-    return <Shimmer width={6} height={2.25} />;
-};
+import React from 'react';
+import Shimmer from '@magento/venia-ui/lib/components/Shimmer';
+
+export default () => {
+    return <Shimmer width={6} height={2.25} />;
+};

package/src/components/Header/websiteSwitcherItem.js

@@ -1,47 +1,47 @@
-import React, { useCallback } from 'react';
-import { Check } from 'react-feather';
-import { bool, func, shape, string } from 'prop-types';
-
-import { useStyle } from '@magento/venia-ui/lib/classify';
-import Icon from '@magento/venia-ui/lib/components/Icon/icon';
-import defaultClasses from './websiteSwitcherItem.module.css';
-
-const WebsiteSwitcherItem = props => {
-    const { active, onClick, option, option2, children } = props;
-    const classes = useStyle(defaultClasses, props.classes);
-
-    const handleClick = useCallback(() => {
-        onClick(option, option2);
-    }, [option, option2, onClick]);
-
-    const activeIcon = active ? (
-        <Icon data-cy="WebsiteSwitcherItem-activeIcon" size={20} src={Check} />
-    ) : null;
-
-    return (
-        <button
-            data-cy="WebsiteSwitcherItem-button"
-            className={classes.root}
-            disabled={active}
-            onClick={handleClick}
-        >
-            <span className={classes.content}>
-                <span className={classes.text}>{children}</span>
-                {activeIcon}
-            </span>
-        </button>
-    );
-};
-
-WebsiteSwitcherItem.propTypes = {
-    active: bool,
-    classes: shape({
-        content: string,
-        root: string,
-        text: string
-    }),
-    onClick: func,
-    option: string
-};
-
-export default WebsiteSwitcherItem;
+import React, { useCallback } from 'react';
+import { Check } from 'react-feather';
+import { bool, func, shape, string } from 'prop-types';
+
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import Icon from '@magento/venia-ui/lib/components/Icon/icon';
+import defaultClasses from './websiteSwitcherItem.module.css';
+
+const WebsiteSwitcherItem = props => {
+    const { active, onClick, option, option2, children } = props;
+    const classes = useStyle(defaultClasses, props.classes);
+
+    const handleClick = useCallback(() => {
+        onClick(option, option2);
+    }, [option, option2, onClick]);
+
+    const activeIcon = active ? (
+        <Icon data-cy="WebsiteSwitcherItem-activeIcon" size={20} src={Check} />
+    ) : null;
+
+    return (
+        <button
+            data-cy="WebsiteSwitcherItem-button"
+            className={classes.root}
+            disabled={active}
+            onClick={handleClick}
+        >
+            <span className={classes.content}>
+                <span className={classes.text}>{children}</span>
+                {activeIcon}
+            </span>
+        </button>
+    );
+};
+
+WebsiteSwitcherItem.propTypes = {
+    active: bool,
+    classes: shape({
+        content: string,
+        root: string,
+        text: string
+    }),
+    onClick: func,
+    option: string
+};
+
+export default WebsiteSwitcherItem;

package/src/components/Header/websiteSwitcherItem.module.css

@@ -1,20 +1,20 @@
-.root {
-    composes: flex from global;
-    composes: items-center from global;
-    composes: w-full from global;
-}
-
-.content {
-    composes: gap-3 from global;
-    composes: grid from global;
-    composes: grid-cols-[1fr] from global;
-    composes: grid-flow-col from global;
-    composes: items-center from global;
-    composes: px-xs from global;
-    composes: py-2xs from global;
-    composes: w-full from global;
-}
-
-.text {
-    composes: text-left from global;
-}
+.root {
+    composes: flex from global;
+    composes: items-center from global;
+    composes: w-full from global;
+}
+
+.content {
+    composes: gap-3 from global;
+    composes: grid from global;
+    composes: grid-cols-[1fr] from global;
+    composes: grid-flow-col from global;
+    composes: items-center from global;
+    composes: px-xs from global;
+    composes: py-2xs from global;
+    composes: w-full from global;
+}
+
+.text {
+    composes: text-left from global;
+}

package/src/components/LegoSets/legoSets.js

@@ -20,20 +20,14 @@ const LegoSets = props => {
     const { location } = globalThis;
 
     const query = new URLSearchParams(location.search);
-    const activeParam = query.get('active_tab') || null;
 
     const [active, setActive] = useState('all');
     const [activeTab, setActiveTab] = useState('all');
-    const [activeFilter, setActiveFilter] = useState('Major Baseball League');
 
     const [searchQuery, setSearchQuery] = useState('');
-
-    let availableLeagues = [];
-    let availableBrands = [];
     
     const shopby = query.get('shopby') || null;
     const setType = query.get('set_type') || null;
-    const brandsFilter = query.get('sc_brands[filter]') || null;
 
     let defaultSort = {
         sortText: 'All (A-Z)',
@@ -57,25 +51,25 @@ const LegoSets = props => {
     // Sorting
     const sortProps = useCustomSort({ sortFromSearch: false, defaultSort: defaultSort});
     const [currentSort] = sortProps;
-    const [sortBy, setSortBy] = useState({
-        sortText: 'All (A-Z)',
-        value: 'all'
-    });
-
-    let availableSortBy = [
-        {
-            'label': 'All (A-Z)',
-            'value': 'all'
-        },
-        {
-            'label': 'By Year',
-            'value': 'newest'
-        }
-    ];
+    // const [sortBy, setSortBy] = useState({
+    //     sortText: 'All (A-Z)',
+    //     value: 'all'
+    // });
+
+    // let availableSortBy = [
+    //     {
+    //         'label': 'All (A-Z)',
+    //         'value': 'all'
+    //     },
+    //     {
+    //         'label': 'By Year',
+    //         'value': 'newest'
+    //     }
+    // ];
 
     const classes = useStyle(defaultClasses);
 
-    const talonProps = useLegoSets({ searchQuery, setActive, currentSort, shopby, setType, categoryId, activeTab, activeFilter });
+    const talonProps = useLegoSets({ searchQuery, setActive, currentSort, shopby, setType, categoryId, activeTab });
 
     const { error, loading, legoSets, categoryUrlSuffix, categoryUrlKey, productType, filteredLegoSets, availableGroups, category } = talonProps;
 
@@ -96,48 +90,11 @@ const LegoSets = props => {
             legoSets.map((setRelease, index) => {
                 const { group, sets } = setRelease;
 
-                // if (sets.length) {
-                //     sets.map((set, index) => {
-                //         // console.log(set)
-                //         if (set.sc_league) {
-                //             if (!availableLeagues.includes(set.sc_league)) {
-                //                 availableLeagues.push(set.sc_league)
-                //             }
-                //         }
-                //     })
-                // }
-
                 setsLengthArr[group] = sets.length
             })
         }
     // }, [legoSets])
 
-    if (legoSets && legoSets.length) {
-        legoSets.map((setRelease, index) => {
-            const { group, sets } = setRelease;
-            if (active == 'all' || active != "all" && active == group) {
-                if (sets.length) {
-                    sets.map((set, index) => {
-                        // console.log(set)
-                        if (set.sc_league) {
-                            if (!availableLeagues.includes(set.sc_league)) {
-                                availableLeagues.push(set.sc_league)
-                            }
-                        }
-
-                        if (set.sc_brands) {
-                            if (!availableBrands.includes(set.sc_brands)) {
-                                availableBrands.push(set.sc_brands)
-                            }
-                        }
-
-                        // availableBrands
-                    })
-                }
-            }
-        })
-    }
-
     const splitToNChunks = (array, n) => {
         let result = [];
         for (let i = n; i > 0; i--) {
@@ -156,7 +113,7 @@ const LegoSets = props => {
                 const { set_name, option_id, release_year } = set;
 
                 const categoryUrl = resourceUrl(
-                    `/${category?.url_path}${categoryUrlSuffix || ''}?sc_${category?.url_key}_release[filter]=${set_name},${option_id}`
+                    `/${category?.url_path}${categoryUrlSuffix || ''}?lego_set_name[filter]=${set_name},${option_id}`
                 );
 
                 setsResult.push(<li className='list-none'>
@@ -196,11 +153,6 @@ const LegoSets = props => {
     const handleActive = (val) => {
         setActive(val);
 
-        availableLeagues = [];
-
-        setActiveFilter('Major Baseball League')
-
-
         setSearchQuery('')
     }
 
@@ -209,11 +161,9 @@ const LegoSets = props => {
 
         setSearchQuery('')
     }
-
-    const handleActiveFilter = (val) => {
-        setActiveFilter(val);
-
-        setSearchQuery('')
+    const handleSearchQuery = (val) => {
+        setSearchQuery(val)
+        setActive('all')
     }
 
     let alpha = ['#', 'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z'];
@@ -277,7 +227,7 @@ const LegoSets = props => {
                     <div
                         className={classes.toolbar}
                     >
-                        <div style={{"width":"35%"}}><ArraySearchInput active={active} searchQuery={searchQuery} placeholder="Search sets..." isOpen={true} setSearchQuery={setSearchQuery} /></div>
+                        <div style={{"width":"35%"}}><ArraySearchInput active={active} searchQuery={searchQuery} placeholder="Search sets..." isOpen={true} setSearchQuery={handleSearchQuery} /></div>
                         {/* <CustomSortBy sortProps={sortProps} availableSortMethods={availableSortBy} /> */}
                     </div>
                 ) : ''}
@@ -324,7 +274,6 @@ const LegoSets = props => {
             </div>
         </Fragment>
     );
-    return '';
 }
 
 export default LegoSets;

package/src/components/PhoneTextInput/index.js

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

package/src/components/PhoneTextInput/phoneTextInput.js

@@ -1,62 +1,62 @@
-import React, { Fragment, useState } from 'react';
-import { node, shape, string } from 'prop-types';
-import useFieldState from '@magento/peregrine/lib/hooks/hook-wrappers/useInformedFieldStateWrapper';
-
-import { useStyle } from '@magento/venia-ui/lib/classify';
-import { FieldIcons, Message } from '@magento/venia-ui/lib/components/Field';
-import defaultClasses from './phoneTextInput.module.css';
-import PhoneInput from 'react-phone-number-input'
-import 'react-phone-number-input/style.css'
-
-const PhoneTextInput = props => {
-    const {
-        after,
-        before,
-        classes: propClasses,
-        regionError,
-        field,
-        message,
-        countryCodeField = "country",
-        ...rest
-    } = props;
-    const fieldState = useFieldState(field);
-    const { value: phoneValue } = fieldState;
-    const classes = useStyle(defaultClasses, propClasses);
-    var inputClass =
-        fieldState.error || regionError ? classes.input_error : classes.input;
-    
-    const handleChange = (value) => {
-        fieldState.value = value;
-    }
-
-    const countryFieldState = useFieldState(countryCodeField);
-    const { value: country } = countryFieldState;
-
-    return (
-        <Fragment>
-            <FieldIcons after={after} before={before}>
-                <PhoneInput
-                international
-                countryCallingCodeEditable={false}
-                defaultCountry={country}
-                name={field}
-                value={phoneValue}
-                onChange={handleChange}
-                />
-            </FieldIcons>
-            <Message fieldState={fieldState}>{message}</Message>
-        </Fragment>
-    );
-};
-
-export default PhoneTextInput;
-
-PhoneTextInput.propTypes = {
-    after: node,
-    before: node,
-    classes: shape({
-        input: string
-    }),
-    field: string.isRequired,
-    message: node
-};
+import React, { Fragment, useState } from 'react';
+import { node, shape, string } from 'prop-types';
+import useFieldState from '@magento/peregrine/lib/hooks/hook-wrappers/useInformedFieldStateWrapper';
+
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import { FieldIcons, Message } from '@magento/venia-ui/lib/components/Field';
+import defaultClasses from './phoneTextInput.module.css';
+import PhoneInput from 'react-phone-number-input'
+import 'react-phone-number-input/style.css'
+
+const PhoneTextInput = props => {
+    const {
+        after,
+        before,
+        classes: propClasses,
+        regionError,
+        field,
+        message,
+        countryCodeField = "country",
+        ...rest
+    } = props;
+    const fieldState = useFieldState(field);
+    const { value: phoneValue } = fieldState;
+    const classes = useStyle(defaultClasses, propClasses);
+    var inputClass =
+        fieldState.error || regionError ? classes.input_error : classes.input;
+    
+    const handleChange = (value) => {
+        fieldState.value = value;
+    }
+
+    const countryFieldState = useFieldState(countryCodeField);
+    const { value: country } = countryFieldState;
+
+    return (
+        <Fragment>
+            <FieldIcons after={after} before={before}>
+                <PhoneInput
+                international
+                countryCallingCodeEditable={false}
+                defaultCountry={country}
+                name={field}
+                value={phoneValue}
+                onChange={handleChange}
+                />
+            </FieldIcons>
+            <Message fieldState={fieldState}>{message}</Message>
+        </Fragment>
+    );
+};
+
+export default PhoneTextInput;
+
+PhoneTextInput.propTypes = {
+    after: node,
+    before: node,
+    classes: shape({
+        input: string
+    }),
+    field: string.isRequired,
+    message: node
+};

package/src/components/ProductListTab/index.js

@@ -1,4 +1,4 @@
-export { default } from './productListTab';
-export {
-    default as ProductListTabShimmer
-} from './productListTab.shimmer';
+export { default } from './productListTab';
+export {
+    default as ProductListTabShimmer
+} from './productListTab.shimmer';