@riosst100/pwa-marketplace 2.1.3 → 2.1.5

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

@@ -0,0 +1,118 @@
+import React from 'react';
+import { bool, func, number, oneOfType, shape, string } from 'prop-types';
+import { useIntl } from 'react-intl';
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import defaultClasses from './tile.module.css';
+import { useTile } from '@magento/peregrine/lib/talons/ProductOptions/useTile';
+import Image from '@magento/venia-ui/lib/components/Image';
+import resourceUrl from '@magento/peregrine/lib/util/makeUrl';
+
+const getClassName = (
+    name,
+    isSelected,
+    hasFocus,
+    isOptionOutOfStock,
+    isEverythingOutOfStock
+) =>
+    `${name}${isSelected ? '_selected' : ''}${hasFocus ? '_focused' : ''}${
+        isEverythingOutOfStock || isOptionOutOfStock ? '_outOfStock' : ''
+    }`;
+
+const Tile = props => {
+    const {
+        hasFocus,
+        isSelected,
+        item: { label, value_index },
+        onClick,
+        isEverythingOutOfStock,
+        isOptionOutOfStock,
+        setHoveredMedia,
+        itemVariant
+    } = props;
+
+    const talonProps = useTile({
+        onClick,
+        itemVariant,
+        setHoveredMedia,
+        value_index
+    });
+
+    const { handleMouseLeave, handleMouseEnter, handleClick, variantImg } = talonProps;
+    const classes = useStyle(defaultClasses, props.classes);
+    const className =
+        classes[
+            getClassName(
+                'root',
+                isSelected,
+                hasFocus,
+                isOptionOutOfStock,
+                isEverythingOutOfStock
+            )
+        ];
+    const { formatMessage } = useIntl();
+    const ariaLabelView = formatMessage(
+        {
+            id: 'ProductOptions.productSize',
+            defaultMessage: 'Fashion size {label}'
+        },
+        { label: label }
+    );
+
+    const ariaLabelSelected = formatMessage(
+        {
+            id: 'productOptions.selectedSize',
+            defaultMessage: 'Fashion size {label} button Selected'
+        },
+        { label: label }
+    );
+
+    const result = isSelected ? ariaLabelSelected : ariaLabelView;
+
+    // variantImg
+    let image = (
+        <Image
+            alt=''
+            classes={{
+                root: classes.variantImageSwatch
+            }}
+            resource={variantImg}
+            width={24}
+        />
+    );
+
+    return (
+        <button
+            className={className}
+            onClick={handleClick}
+            onMouseEnter={handleMouseEnter}
+            onFocus={handleMouseEnter}
+            onTouchStart={handleMouseEnter}
+            onMouseLeave={handleMouseLeave}
+            title={label}
+            type="button"
+            data-cy="Tile-button"
+            aria-label={result}
+            disabled={isEverythingOutOfStock || isOptionOutOfStock}
+        >
+            {image}
+            <span className={classes.label}>{label}</span>
+        </button>
+    );
+};
+
+export default Tile;
+
+Tile.propTypes = {
+    hasFocus: bool,
+    isSelected: bool,
+    item: shape({
+        label: string.isRequired,
+        value_index: oneOfType([number, string]).isRequired
+    }).isRequired,
+    onClick: func.isRequired
+};
+
+Tile.defaultProps = {
+    hasFocus: false,
+    isSelected: false
+};

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/Seller/useSeller.js

@@ -68,7 +68,7 @@ export const useSeller = props => {
 
     const favoriteSellerOptions = useMemo(() => {
         const options = {
-            seller_id: seller.seller_id
+            seller_id: seller?.seller_id
         };
 
         return options;

package/src/talons/SetsData/setsData.gql.js

@@ -0,0 +1,70 @@
+import { gql } from '@apollo/client';
+
+export const GET_STORE_CONFIG_DATA = gql`
+    query getStoreConfigData {
+        # eslint-disable-next-line @graphql-eslint/require-id-when-available
+        storeConfig {
+            store_code
+            product_url_suffix
+            category_url_suffix
+        }
+    }
+`;
+
+export const GET_SETS_DATA_QUERY = gql`
+    query getSetsData($categoryUrlKey: String!, $activeTab: String, $filters: ProductAttributeFilterInput!, $shopby: String, $activeFilter: String) {
+        getSetsData(categoryUrlKey: $categoryUrlKey, activeTab: $activeTab, filters: $filters, shopby: $shopby, activeFilter: $activeFilter) {
+            attribute {
+                attribute_code
+                label
+            }
+            page_info {
+                title
+                hide_title
+                filter_group
+            }
+            data {
+                group
+                sets {
+                    set_name
+                    option_id
+                    release_year
+                }
+            }
+        }
+    }
+`;
+
+export const GET_CATEGORY_CONTENT = gql`
+    query getCategoryData($id: String!) {
+        categories(filters: { category_uid: { in: [$id] } }) {
+            # eslint-disable-next-line @graphql-eslint/require-id-when-available
+            items {
+                uid
+                name
+                url_key
+                url_path
+            }
+        }
+    }
+`;
+
+export const GET_FILTER_INPUTS = gql`
+    query GetFilterInputsForCategory {
+        __type(name: "ProductAttributeFilterInput") {
+            inputFields {
+                name
+                type {
+                    name
+                }
+            }
+        }
+    }
+`;
+
+export default {
+    getStoreConfigData: GET_STORE_CONFIG_DATA,
+    getSetsDataQuery: GET_SETS_DATA_QUERY,
+    getCategoryContentQuery: GET_CATEGORY_CONTENT,
+    getFilterInputsQuery: GET_FILTER_INPUTS,
+};