@riosst100/pwa-marketplace 3.1.2 → 3.1.4

package/src/overwrites/peregrine/lib/talons/RootComponents/Category/categoryContent.gql.js

@@ -39,23 +39,7 @@ export const GET_CATEGORY_CONTENT = gql`
                     value
                 }
                 url_path
-                hide_filters
-                allowed_filters {
-                    code
-                }
                 prefixes
-                custom_subcategory {
-                    name
-                    path
-                }
-                attributes_block {
-                    label
-                    code
-                    items {
-                      label
-                      value
-                    }
-                }
                 parent {
                     uid
                     name

package/src/overwrites/peregrine/lib/talons/RootComponents/Category/useCategoryContent.js

@@ -268,10 +268,7 @@ export const useCategoryContent = props => {
 
         filters.push(newFilter);
     });
-
-    const attributesBlock = categoryData && categoryData.categories.items.length
-    ? categoryData.categories.items[0].attributes_block
-    : null;
+    
     const parent =
     categoryData && categoryData.categories.items.length
         ? categoryData.categories.items[0].parent
@@ -317,7 +314,6 @@ export const useCategoryContent = props => {
         totalPagesFromData,
         children,
         parent,
-        attributesBlock,
         category,
         virtualCategoryFilters
     };

package/src/overwrites/venia-ui/lib/RootComponents/Category/category.js

@@ -1,4 +1,4 @@
-import React, { Fragment } from 'react';
+import React, { Fragment, useMemo } from 'react';
 import { shape, string } from 'prop-types';
 import { useCategory } from '@magento/peregrine/lib/talons/RootComponents/Category';
 import { useStyle } from '@magento/venia-ui/lib/classify';
@@ -41,9 +41,9 @@ const Category = props => {
 
     const query = new URLSearchParams(location.search);
     const shopby = query.get('shopby') || null;
-    const show_more = query.get('show_more') || null;
-    const filterby = query.get('filterby') || null;
-    const showSubcategory = query.get('show_subcategory') || null;
+    const showMoreGamesOrCategories = query.get('show_more') || null;
+
+    const sidebarFilterShowMore = query.get('filterby') || null;
 
     const talonProps = useCategory({
         id: uid,
@@ -84,72 +84,128 @@ const Category = props => {
             />
         );
     }
+    
+    const categoryContent = useMemo(() => {
+        if (sidebarFilterShowMore) {
+            return (
+                <FilterContent
+                    categoryId={uid}
+                    classes={classes}
+                    data={categoryData}
+                    filterby={sidebarFilterShowMore}
+                    isLoading={loading}
+                    pageControl={pageControl}
+                    sortProps={sortProps}
+                    pageSize={pageSize} 
+                />
+            );
+        }
 
-    const allowedShopby = ['card_artist'];
+        if (showMoreGamesOrCategories) {
+            return (
+                <ShowMore
+                    categoryId={uid}
+                    shopby={showMoreGamesOrCategories}
+                    isLoading={loading}
+                />
+            );
+        }
+        
+        if (
+            shopby == "release_year" 
+            || shopby == "secret_lair" 
+            || shopby == "expansion_sets" 
+            || shopby == "sets" 
+            || shopby == "release"
+        ) {
+            return (
+                <SetsData
+                    categoryId={uid}
+                    shopby={shopby}
+                    isLoading={loading} 
+                />
 
-    return (
-        <Fragment>
-            <Meta name="description" content={metaDescription} />
-            {showSubcategory ? (
-                <SubCategoryPage
-                categoryId={uid}
-                isLoading={loading} />
-            ) : (
-                filterby ? (
-                    <FilterContent
-                        categoryId={uid}
-                        classes={classes}
-                        data={categoryData}
-                        filterby={filterby}
-                        isLoading={loading}
-                        pageControl={pageControl}
-                        sortProps={sortProps}
-                        pageSize={pageSize} 
-                    />
-                ) : allowedShopby.includes(shopby) ? <ShopBy
-                categoryId={uid}
-                shopby={shopby}
-                isLoading={loading} /> : shopby == "release_year" || shopby == "secret_lair" || shopby == "expansion_sets" || shopby == "sets" || shopby == "release" ? <SetsData
-                categoryId={uid}
-                shopby={shopby}
-                isLoading={loading} /> : shopby == "singles" || shopby == "lego_set_name" && parentCategoryUrlKey == "lego" ? <LegoSets
-                categoryId={uid}
-                shopby={shopby}
-                isLoading={loading} /> : shopby && parentCategoryUrlKey == "non-sports-cards" ? <NonSportCardsSets
-                categoryId={uid}
-                shopby={shopby}
-                isLoading={loading} /> : shopby == "sc_baseball_players" || shopby == "sc_baseball_teams" || shopby == "release" && parentCategoryUrlKey == "sport-cards" ? <SportCardsSets
-                categoryId={uid}
-                shopby={shopby}
-                isLoading={loading} /> : shopby == "release_year" ? <ShopBySets
-                categoryId={uid}
-                shopby={shopby}
-                isLoading={loading} /> : shopby == "card" ? <ShopByCard
-                categoryId={uid}
-                shopby={shopby}
-                isLoading={loading} /> : (show_more ? (
-                    <ShowMore
+            );
+        }
+
+        if (
+            shopby == "singles" 
+            || shopby == "lego_set_name" 
+            && parentCategoryUrlKey == "lego"
+        ) {
+            return (
+                <LegoSets
                     categoryId={uid}
-                    shopby={show_more}
-                    isLoading={loading} />
-                ) : shopby && shopby != "gauge" ? (
-                    <ShopBy
+                    shopby={shopby}
+                    isLoading={loading} 
+                />
+            );
+        }
+
+        if (shopby && parentCategoryUrlKey == "non-sports-cards") {
+            return (
+                <NonSportCardsSets
                     categoryId={uid}
                     shopby={shopby}
-                    isLoading={loading} />
-                ) : (
-                    <CategoryContent
+                    isLoading={loading} 
+                />
+            );
+        }
+
+        if (
+            shopby == "sc_baseball_players" 
+            || shopby == "sc_baseball_teams" 
+            || shopby == "release" 
+            && parentCategoryUrlKey == "sport-cards"
+        ) {
+            return (
+                <SportCardsSets
+                    categoryId={uid}
+                    shopby={shopby}
+                    isLoading={loading} 
+                />
+            );
+        }
+
+        if (shopby) {
+            return (
+                <ShopBy
                     categoryId={uid}
-                    classes={classes}
-                    data={categoryData}
                     shopby={shopby}
                     isLoading={loading}
-                    pageControl={pageControl}
-                    sortProps={sortProps}
-                    pageSize={pageSize}
-                    />
-                ))
-            )}
+                />
+            );
+        }
+        return (
+            <CategoryContent
+                categoryId={uid}
+                classes={classes}
+                data={categoryData}
+                shopby={shopby}
+                isLoading={loading}
+                pageControl={pageControl}
+                sortProps={sortProps}
+                pageSize={pageSize}
+            />
+        );
+    }, [
+        uid,
+        classes,
+        categoryData,
+        shopby,
+        loading,
+        pageControl,
+        sortProps,
+        pageSize,
+        sidebarFilterShowMore,
+        showMoreGamesOrCategories,
+        parentCategoryUrlKey
+    ]);
+
+    return (
+        <Fragment>
+            <Meta name="description" content={metaDescription} />
+            {categoryContent}
         </Fragment>
     );
 };

package/src/overwrites/venia-ui/lib/RootComponents/Category/categoryContent.js

@@ -1,8 +1,7 @@
-import React, { useEffect, Fragment, Suspense, useMemo, useRef, useState } from 'react';
+import React, { Fragment, Suspense, useMemo, useRef, useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { array, number, shape, string } from 'prop-types';
 
-import { useIsInViewport } from '@magento/peregrine/lib/hooks/useIsInViewport';
 import { useCategoryContent } from '@magento/peregrine/lib/talons/RootComponents/Category';
 
 import { useStyle } from '@magento/venia-ui/lib/classify';
@@ -24,15 +23,8 @@ import defaultClasses from './category.module.css';
 import NoProductsFound from './NoProductsFound';
 import cn from 'classnames';
 import ProductListTab, { ProductListTabShimmer } from '@riosst100/pwa-marketplace/src/components/ProductListTab';
-import SubCategory from '@riosst100/pwa-marketplace/src/components/SubCategory/subCategory';
-import AttributesBlock from '@riosst100/pwa-marketplace/src/components/AttributesBlock/attributesBlock';
-
-import BrandSlider from '@riosst100/pwa-marketplace/src/components/BrandSlider';
-import CollectibleGameSets from '@riosst100/pwa-marketplace/src/components/CollectibleGameSets/collectibleGameSets';
 import { useLocation, useHistory } from 'react-router-dom';
 import { getFiltersFromSearch } from '@magento/peregrine/lib/talons/FilterModal/helpers';
-import CustomSubCategory from '@riosst100/pwa-marketplace/src/components/SubCategory/customSubCategory';
-import AlphaFilter from '@riosst100/pwa-marketplace/src/components/AlphaFilter';
 
 const FilterModal = React.lazy(() => import('@magento/venia-ui/lib/components/FilterModal'));
 const FilterSidebar = React.lazy(() =>
@@ -73,39 +65,13 @@ const CategoryContent = props => {
         parent,
         totalCount,
         totalPagesFromData,
-        attributesBlock,
         category,
         virtualCategoryFilters
     } = talonProps;
 
-    useEffect(() => {
-        if (category) {
-            const urlKey = category.url_key;
-            if (urlKey == "collectible-game") {
-                // history.replace('/games/collectible-game/magic-the-gathering.html')
-            }
-
-            if (urlKey == "sport-cards") {
-                // history.replace('/cards/sport-cards/baseball.html')
-            }
-
-            if (urlKey == "non-sports-cards") {
-                // history.replace('/cards/non-sports-cards/comics.html')
-            }
-
-            if (urlKey == "lego") {
-                // history.replace('/lego/lego-sets.html')
-            }
-        }
-    }, [category]);
-
     const [activeLetter, setActiveLetter] = useState('all')
     const [activeTab, setActiveTab] = useState('all');
 
-    const handleActiveLetter = (val) => {
-        setActiveLetter(val);
-    }
-
     const galleryItems = [];
 
     useMemo(() => {
@@ -142,9 +108,6 @@ const CategoryContent = props => {
 
     const sidebarRef = useRef(null);
     const classes = useStyle(defaultClasses, props.classes);
-    // const shouldRenderSidebarContent = useIsInViewport({
-    //     elementRef: sidebarRef
-    // });
     const shouldRenderSidebarContent = true;
 
     const shouldShowFilterButtons = filters && filters.length;
@@ -165,7 +128,7 @@ const CategoryContent = props => {
     ) : null;
 
     const sidebar = shouldShowFilterButtons ? (
-        <FilterSidebar hideFilters={category && category.hide_filters ? true : false} children={children} filters={filters} allowedFilters={category ? category.allowed_filters : []} prefixes={category ? category.prefixes : []} />
+        <FilterSidebar children={children} filters={filters} prefixes={category ? category.prefixes : []} />
     ) : shouldShowFilterShimmer ? (
         <FilterSidebarShimmer />
     ) : null;
@@ -310,15 +273,8 @@ const CategoryContent = props => {
                     </h1>
                     {categoryDescriptionElement}
                 </div>
-                {/* {activeFilters.size <= 0 && category && category.custom_landing_page ? ( */}
-                    <>
-                        {/* {currentFilter && <AlphaFilter isSingles={isSingles} items={items} handleActiveLetter={handleActiveLetter} activeLetter={activeLetter} />} */}
-                        {!currentFilter && <CustomSubCategory categoryName={category ? category.name : null} customSubCategory={category ? category.custom_subcategory : null} />}
-                        {/* {shopby != "gauge" && category?.name != "Collectible Card Games" ? <SubCategory parent={parent} children={children} /> : ''} */}
-                    </>
-                {/* ) : ( */}
                     <>
-                        <FilterTop shopby={shopby} filters={filters} category={category} children={children} allowedFilters={category ? category.allowed_filters : []} />
+                        <FilterTop shopby={shopby} filters={filters} category={category} children={children} />
                         <div className={classes.contentWrapper}>
                             <div ref={sidebarRef} className={classes.sidebar}>
                                 <Suspense fallback={<FilterSidebarShimmer />}>
@@ -366,9 +322,6 @@ CategoryContent.propTypes = {
         categoryInfo: string,
         headerButtons: string
     }),
-    // sortProps contains the following structure:
-    // [{sortDirection: string, sortAttribute: string, sortText: string},
-    // React.Dispatch<React.SetStateAction<{sortDirection: string, sortAttribute: string, sortText: string}]
     sortProps: array,
     pageSize: number
 };

package/src/overwrites/venia-ui/lib/components/Breadcrumbs/breadcrumbs.js

@@ -42,12 +42,6 @@ const Breadcrumbs = props => {
     // For all links generate a fragment like "/ Text"
     const links = useMemo(() => {
         return normalizedData.map(({ text, path }, index) => {
-            if (text == "dCollectible Card Games") {
-                return '';
-            }
-
-            console.log('index', index);
-
             return (
                 <Fragment key={index}>
                     <span className={classes.divider}>{DELIMITER}</span>
@@ -56,7 +50,7 @@ const Breadcrumbs = props => {
                         to={resourceUrl(path)}
                         onClick={handleClick}
                     >
-                        {text}
+                       {text}
                     </Link>
                 </Fragment>
             );

package/src/overwrites/venia-ui/lib/components/CartPage/ProductListingBySeller/EditModal/editModal.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import { useEditModal } from '@magento/peregrine/lib/talons/CartPage/ProductListing/EditModal/useEditModal';
+
+import ProductForm from './productForm';
+
+/**
+ * A child component of the ProductListing component.
+ * This component renders an edit modal for a product.
+ *
+ * @param {Object} props
+ * @param {Object} props.item Product to edit.
+ * @param {function} props.setActiveEditItem Function for setting the actively editing item
+ * See [productListingFragments.js]{@link https://github.com/magento/pwa-studio/blob/develop/packages/venia-ui/lib/components/CartPage/ProductListing/productListingFragments.js}
+ * for a list of properties for this object.
+ * @param {Function} props.setIsCartUpdating Function for setting the updating state of the cart.
+ * @param {Object} props.classes CSS className overrides.
+ * See [editModal.module.css]{@link https://github.com/magento/pwa-studio/blob/develop/packages/venia-ui/lib/components/CartPage/ProductListing/EditModal/editModal.module.css}
+ * for a list of classes you can override.
+ *
+ * @returns {React.Element}
+ *
+ * @example <caption>Importing into your project</caption>
+ * import EditModal from "@magento/venia-ui/lib/components/CartPage/ProductListing/EditModal";
+ */
+const EditModal = props => {
+    const { item, setActiveEditItem, setIsCartUpdating } = props;
+    const talonProps = useEditModal();
+    const { setVariantPrice, variantPrice } = talonProps;
+
+    return (
+        <ProductForm
+            item={item}
+            setIsCartUpdating={setIsCartUpdating}
+            setVariantPrice={setVariantPrice}
+            variantPrice={variantPrice}
+            setActiveEditItem={setActiveEditItem}
+        />
+    );
+};
+
+export default EditModal;

package/src/overwrites/venia-ui/lib/components/CartPage/ProductListingBySeller/EditModal/index.js

@@ -0,0 +1 @@
+export { default } from './editModal';

package/src/overwrites/venia-ui/lib/components/CartPage/ProductListingBySeller/EditModal/productDetail.js

@@ -0,0 +1,80 @@
+import React from 'react';
+import { FormattedMessage, useIntl } from 'react-intl';
+import Price from '@magento/venia-ui/lib/components/Price';
+import configuredVariant from '@magento/peregrine/lib/util/configuredVariant';
+
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import Image from '@magento/venia-ui/lib/components/Image';
+import defaultClasses from './productDetail.module.css';
+
+const IMAGE_SIZE = 240;
+
+const ProductDetail = props => {
+    const { item, variantPrice, configurableThumbnailSource } = props;
+    const { formatMessage } = useIntl();
+    const { prices, product } = item;
+    const { price } = prices;
+    const { currency, value: unitPrice } = variantPrice || price;
+    const { name, sku, stock_status: stockStatusValue } = product;
+    const stockStatusLabels = new Map([
+        [
+            'IN_STOCK',
+            formatMessage({
+                id: 'productDetail.inStock',
+                defaultMessage: 'In stock'
+            })
+        ],
+        [
+            'OUT_OF_STOCK',
+            formatMessage({
+                id: 'productDetail.outOfStock',
+                defaultMessage: 'Out of stock'
+            })
+        ]
+    ]);
+    const stockStatus =
+        stockStatusLabels.get(stockStatusValue) ||
+        formatMessage({
+            id: 'productDetail.unknown',
+            defaultMessage: 'Unknown'
+        });
+    const classes = useStyle(defaultClasses, props.classes);
+    const configured_variant = configuredVariant(
+        item.configurable_options,
+        product
+    );
+    return (
+        <div className={classes.root}>
+            <Image
+                alt={name}
+                classes={{
+                    image: classes.image,
+                    root: classes.imageContainer
+                }}
+                width={IMAGE_SIZE}
+                resource={
+                    configurableThumbnailSource === 'itself' &&
+                        configured_variant
+                        ? configured_variant.small_image.url
+                        : product.small_image.url
+                }
+            />
+            <span className={classes.productName}>{name}</span>
+            <div className={classes.stockRow}>
+                <span>
+                    <FormattedMessage
+                        id={'productDetail.skuNumber'}
+                        defaultMessage={'SKU # {sku}'}
+                        values={{ sku }}
+                    />
+                </span>
+                <span>{stockStatus}</span>
+            </div>
+            <div className={classes.price}>
+                <Price currencyCode={currency} value={unitPrice} />
+            </div>
+        </div>
+    );
+};
+
+export default ProductDetail;

package/src/overwrites/venia-ui/lib/components/CartPage/ProductListingBySeller/EditModal/productDetail.module.css

@@ -0,0 +1,33 @@
+.root {
+    composes: border-b from global;
+    composes: border-solid from global;
+    composes: border-subtle from global;
+    composes: gap-xs from global;
+    composes: grid from global;
+    composes: pb-xs from global;
+}
+
+.imageContainer {
+    composes: justify-self-center from global;
+}
+
+.image {
+    composes: px-md from global;
+    composes: py-0 from global;
+}
+
+.productName {
+    composes: font-medium from global;
+    composes: text-xl from global;
+}
+
+.stockRow {
+    composes: flex from global;
+    composes: font-light from global;
+    composes: justify-between from global;
+    composes: text-sm from global;
+}
+
+.price {
+    composes: font-medium from global;
+}