@riosst100/pwa-marketplace 2.1.4 → 2.1.6

package/src/overwrites/venia-ui/lib/components/ProductOptions/tile.module.css

@@ -0,0 +1,68 @@
+.root {
+    composes: root from '@magento/venia-ui/lib/components/clickable.module.css';
+
+    /* composes: border from global; */
+    /* composes: border-solid from global; */
+    /* composes: border-strong from global; */
+    /* composes: h-[3rem] from global; */
+    /* composes: min-w-[3rem] from global; */
+    /* composes: px-2xs from global; */
+    /* composes: py-0 from global; */
+    /* composes: rounded-sm from global; */
+    position: relative;
+    border: 1px solid rgb(230 233 234);
+    border-radius: 2px;
+    padding: .5rem;
+    align-items: center;
+}
+
+.variantImageSwatch {
+    width: 24px;
+    height: 24px;
+}
+
+.root:hover {
+    border-color: rgba(247, 107, 28);
+    color: rgba(247, 107, 28);
+}
+
+.label {
+    padding-left: 0.4rem;
+    padding-right: 5px;
+}
+
+.root_selected {
+    composes: root;
+
+    /* composes: bg-gray-900 from global;
+    composes: text-white from global; */
+    border-color: rgba(247, 107, 28);
+    color: rgba(247, 107, 28);
+}
+
+.root_focused {
+    composes: root;
+}
+
+.root_selected_focused {
+    composes: root_selected;
+}
+
+.root_outOfStock,
+.root_selected_outOfStock {
+    composes: root;
+    composes: bg-disabledTile from global;
+    composes: opacity-50 from global;
+    composes: border-2 from global;
+    composes: border-solid from global;
+    composes: border-gray-400 from global;
+    composes: text-gray-600 from global;
+}
+.root_outOfStock:after,
+.root_selected_outOfStock:after {
+    content: '';
+    position: absolute;
+    border-top: 2px solid rgb(var(--venia-global-color-gray-400));
+    width: 62px;
+    transform: rotate(-45deg);
+}

package/src/overwrites/venia-ui/lib/components/ProductOptions/tileList.js

@@ -0,0 +1,78 @@
+import React, { useMemo } from 'react';
+import { arrayOf, func, object, shape, string } from 'prop-types';
+import Tile from './tile';
+
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import defaultClasses from './tileList.module.css';
+
+const TileList = props => {
+    const {
+        getItemKey,
+        selectedValue = {},
+        items,
+        onSelectionChange,
+        isEverythingOutOfStock,
+        outOfStockVariants,
+        setHoveredMedia,
+        filteredVariants
+    } = props;
+
+    const classes = useStyle(defaultClasses, props.classes);
+
+    const tiles = useMemo(
+        () =>
+            items.map(item => {
+                const value_index = item.value_index;
+
+                const itemVariant = filteredVariants.filter(variant => {
+                    return variant.attributes.some(attribute => attribute.value_index === value_index);
+                });
+
+                const isSelected = item.label === selectedValue.label;
+                let isOptionOutOfStock;
+                if (outOfStockVariants && outOfStockVariants.length > 0) {
+                    const flatOutOfStockArray = outOfStockVariants.flat();
+                    isOptionOutOfStock = flatOutOfStockArray.includes(
+                        item.value_index
+                    );
+                }
+
+                return (
+                    <Tile
+                        key={getItemKey(item)}
+                        isSelected={isSelected}
+                        item={item}
+                        setHoveredMedia={setHoveredMedia}
+                        itemVariant={itemVariant}
+                        onClick={onSelectionChange}
+                        isEverythingOutOfStock={isEverythingOutOfStock}
+                        isOptionOutOfStock={isOptionOutOfStock}
+                    />
+                );
+            }),
+        [
+            getItemKey,
+            selectedValue.label,
+            items,
+            onSelectionChange,
+            isEverythingOutOfStock,
+            outOfStockVariants
+        ]
+    );
+
+    return <div className={classes.root}>{tiles}</div>;
+};
+
+TileList.propTypes = {
+    classes: shape({
+        root: string
+    }),
+    getItemKey: func,
+    selectedValue: object,
+    items: arrayOf(object),
+    onSelectionChange: func
+};
+
+TileList.displayName = 'TileList';
+
+export default TileList;

package/src/overwrites/venia-ui/lib/components/ProductOptions/tileList.module.css

@@ -0,0 +1,6 @@
+.root {
+    composes: gap-xs from global;
+    composes: grid from global;
+    composes: grid-flow-col from global;
+    grid-template-columns: repeat(auto-fit, minmax(3rem, max-content));
+}

package/src/overwrites/venia-ui/lib/components/ProductOptions/tileList.shimmer.js

@@ -0,0 +1,32 @@
+import React, { useMemo } from 'react';
+import { shape, string } from 'prop-types';
+import Shimmer from '@magento/venia-ui/lib/components/Shimmer';
+
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import defaultClasses from './tileList.module.css';
+
+const TileListShimmer = props => {
+    const classes = useStyle(defaultClasses, props.classes);
+
+    const tiles = useMemo(() => {
+        return Array.from({ length: 3 })
+            .fill(null)
+            .map((value, index) => {
+                return <Shimmer width={3} height={3} key={`tile-${index}`} />;
+            });
+    }, []);
+
+    return <div className={classes.root}>{tiles}</div>;
+};
+
+TileListShimmer.defaultProps = {
+    classes: {}
+};
+
+TileListShimmer.propTypes = {
+    classes: shape({
+        root: string
+    })
+};
+
+export default TileListShimmer;

package/src/talons/CustomFilters/useCustomFilters.js

@@ -68,8 +68,6 @@ export const useCustomFilters = props => {
         return typeMap;
     }, [introspectionData]);
 
-    console.log(category)
-
     useEffect(() => {
 
         if (!filterTypeMap.size) {

package/src/talons/FavoriteSeller/AddToListButton/addToListButton.gql.js

@@ -1,30 +1,30 @@
-import { gql } from '@apollo/client';
-
-export const ADD_TO_FAVORITE_SELLER_LIST = gql`
-    mutation AddSellerToFavoriteList(
-        $sellerId: ID!
-    ) {
-        addSellerToFavoritelist(
-            sellerId: $sellerId
-        ) {
-            favorite {
-                id
-                customer_id
-                creation_time
-                status
-            }
-            error
-        }
-    }
-`;
-
-export const GET_SELLER_IN_FAVORITE_LISTS = gql`
-    query GetProductsInWishlistsForGallery {
-        customerWishlistProducts @client
-    }
-`;
-
-export default {
-    addToFavoriteSellerMutation: ADD_TO_FAVORITE_SELLER_LIST,
-    getSellerInFavoriteListsQuery: GET_SELLER_IN_FAVORITE_LISTS
-};
+import { gql } from '@apollo/client';
+
+export const ADD_TO_FAVORITE_SELLER_LIST = gql`
+    mutation AddSellerToFavoriteList(
+        $sellerId: ID!
+    ) {
+        addSellerToFavoritelist(
+            sellerId: $sellerId
+        ) {
+            favorite {
+                id
+                customer_id
+                creation_time
+                status
+            }
+            error
+        }
+    }
+`;
+
+export const GET_SELLER_IN_FAVORITE_LISTS = gql`
+    query GetProductsInWishlistsForGallery {
+        customerWishlistProducts @client
+    }
+`;
+
+export default {
+    addToFavoriteSellerMutation: ADD_TO_FAVORITE_SELLER_LIST,
+    getSellerInFavoriteListsQuery: GET_SELLER_IN_FAVORITE_LISTS
+};

package/src/talons/FavoriteSeller/AddToListButton/useAddToFavoriteListButton.js

@@ -39,7 +39,6 @@ export const useAddToFavoriteListButton = props => {
     const [{ isSignedIn }] = useUserContext();
 
     const handleClick = useCallback(async () => {
-        console.log(item)
         if (!isSignedIn) {
             setShowLoginToast(current => ++current);
         } else {

package/src/talons/LegoSets/useLegoSets.js

@@ -51,19 +51,14 @@ export const useLegoSets = props => {
     }, [introspectionData]);
     const filters = getFiltersFromSearch(search);
 
-    // console.log(search)
-
     // Construct the filter arg object.
     const newFilters = {};
     filters.forEach((values, key) => {
         newFilters[key] = getFilterInput(values, filterTypeMap.get(key));
-// console.log(key)
-// console.log(values)
         
         if (key == "sc_baseball_release") {
             for(let item of values) {
                 if(item) {
-                    // console.log(item.split(',')[0])
                     const data = search.split('&');
                     data.pop();
                     activeFilters.push(

package/src/talons/TrainsSets/useTrainsSets.js

@@ -133,7 +133,6 @@ export const useTrainsSets = props => {
                     }
                     
                     if (activeTab == "trains_gauge") {
-                        console.log(activeFilter + ' dan '+set.trains_gauge)
                         return set.trains_gauge.search(new RegExp('<'+activeFilter+'>', "i")) != -1;
                     }
 
@@ -177,8 +176,6 @@ export const useTrainsSets = props => {
             })
         }
 
-        console.log(filteredSets)
-
         return searchQuery || activeFilter ? filteredSets : trainsSets;
     }, [trainsSets, searchQuery, activeFilter]);