@riosst100/pwa-marketplace 2.1.4 → 2.1.5

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

@@ -0,0 +1,112 @@
+import React, { useMemo } from 'react';
+import { FormattedMessage } from 'react-intl';
+import {
+    arrayOf,
+    func,
+    number,
+    object,
+    oneOfType,
+    shape,
+    string
+} from 'prop-types';
+
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import getOptionType from '@magento/venia-ui/lib/components/ProductOptions/getOptionType';
+import SwatchList from '@magento/venia-ui/lib/components/ProductOptions/swatchList';
+import TileList from './tileList';
+import defaultClasses from './option.module.css';
+import { useOption } from '@magento/peregrine/lib/talons/ProductOptions/useOption';
+
+const getItemKey = ({ value_index }) => value_index;
+
+// TODO: get an explicit field from the API
+// that identifies an attribute as a swatch
+const getListComponent = (attribute_code, values) => {
+    const optionType = getOptionType({ attribute_code, values });
+
+    return optionType === 'swatch' ? SwatchList : TileList;
+};
+
+const Option = props => {
+    const {
+        attribute_code,
+        attribute_id,
+        label,
+        onSelectionChange,
+        selectedValue,
+        values,
+        variants,
+        setHoveredMedia,
+        isEverythingOutOfStock,
+        outOfStockVariants
+    } = props;
+
+    const talonProps = useOption({
+        attribute_id,
+        attribute_code,
+        label,
+        variants,
+        onSelectionChange,
+        selectedValue,
+        values
+    });
+
+    const {
+        handleSelectionChange,
+        initialSelection,
+        selectedValueDescription,
+        filteredVariants
+    } = talonProps;
+
+    const ValueList = useMemo(() => getListComponent(attribute_code, values), [
+        attribute_code,
+        values
+    ]);
+
+    const classes = useStyle(defaultClasses, props.classes);
+
+    return (
+        <div className={classes.root} data-cy="ProductOptions-Option-root">
+            <span className={classes.title}>{label}</span>
+            <ValueList
+                getItemKey={getItemKey}
+                selectedValue={initialSelection}
+                items={values}
+                setHoveredMedia={setHoveredMedia}
+                onSelectionChange={handleSelectionChange}
+                isEverythingOutOfStock={isEverythingOutOfStock}
+                outOfStockVariants={outOfStockVariants}
+                filteredVariants={filteredVariants}
+                attributeLabel={label}
+            />
+            <dl className={classes.selection} style={{ display: 'none' }}>
+                <dt
+                    data-cy="ProductOptions-Option-selectedLabel"
+                    className={classes.selectionLabel}
+                >
+                    <FormattedMessage
+                        id="productOptions.selectedLabel"
+                        defaultMessage="Selected {label}:"
+                        values={{ label }}
+                    />
+                </dt>
+                <dd>{selectedValueDescription}</dd>
+            </dl>
+        </div>
+    );
+};
+
+Option.propTypes = {
+    attribute_code: string.isRequired,
+    attribute_id: string,
+    classes: shape({
+        root: string,
+        title: string
+    }),
+    label: string.isRequired,
+    onSelectionChange: func,
+    selectedValue: oneOfType([number, string]),
+    values: arrayOf(object).isRequired
+};
+
+export default Option;

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

@@ -0,0 +1,30 @@
+.root {
+    composes: border-b from global;
+    composes: border-solid from global;
+    /* composes: border-subtle from global; */
+    /* composes: mx-sm from global; */
+    composes: my-0 from global;
+    composes: px-0 from global;
+    composes: py-xs from global;
+
+    border-color: rgb(230 233 234);
+}
+
+.title {
+    composes: block from global;
+    composes: font-semibold from global;
+    composes: leading-normal from global;
+    composes: mb-xs from global;
+    composes: text-colorDefault from global;
+}
+
+.selection {
+    composes: flex from global;
+    composes: leading-normal from global;
+    composes: mt-xs from global;
+    composes: text-colorDefault from global;
+}
+
+.selectionLabel {
+    composes: mr-xs from global;
+}

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

@@ -0,0 +1,49 @@
+import React from 'react';
+import { array, func } from 'prop-types';
+
+import Option from './option';
+import { useOptions } from '@magento/peregrine/lib/talons/ProductOptions/useOptions';
+
+const Options = props => {
+    const {
+        classes,
+        onSelectionChange,
+        options,
+        variants,
+        setHoveredMedia,
+        selectedValues = [],
+        isEverythingOutOfStock,
+        outOfStockVariants
+    } = props;
+
+    const talonProps = useOptions({
+        onSelectionChange,
+        selectedValues,
+        options
+    });
+
+    const { handleSelectionChange, selectedValueMap } = talonProps;
+
+    // Render a list of options passing in any pre-selected values.
+    return options.map(option => (
+        <Option
+            {...option}
+            classes={classes}
+            key={option.attribute_id}
+            variants={variants}
+            setHoveredMedia={setHoveredMedia}
+            onSelectionChange={handleSelectionChange}
+            selectedValue={selectedValueMap.get(option.label)}
+            isEverythingOutOfStock={isEverythingOutOfStock}
+            outOfStockVariants={outOfStockVariants}
+        />
+    ));
+};
+
+Options.propTypes = {
+    onSelectionChange: func,
+    options: array.isRequired,
+    selectedValues: array
+};
+
+export default Options;

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/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]);