@riosst100/pwa-marketplace 3.0.7 → 3.0.9

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@riosst100/pwa-marketplace",
   "author": "riosst100@gmail.com",
-  "version": "3.0.7",
+  "version": "3.0.9",
   "main": "src/index.js",
   "pwa-studio": {
     "targets": {

package/src/components/FilterTop/filterTop.js

@@ -95,13 +95,6 @@ const FilterTop = props => {
         [handleApply, filterRef]
     );
 
-    // const allowedFiltersArr = [];
-
-    // allowedFilters.length && allowedFilters.map((val, index) => {
-    //     allowedFiltersArr.push(val.code);
-    // });
-    // const allowedFiltersArr = ['card_rarity','card_print_version','card_set', 'card_product_type'];
-
     const filtersList = useMemo(
         () =>
             Array.from(filterItems, ([group, items], iteration) => {

package/src/components/ShowMore/showMore.js

@@ -339,7 +339,6 @@ const ShowMore = props => {
             <StoreTitle>{title}</StoreTitle>
             <Breadcrumbs categoryId={categoryId} customPage={title} currentFilter={activeFilters} />
             {category?.url_path.includes('model-railway') && <FilterTop shopby={shopby} filters={[]} category={category} children={[]} allowedFilters={category ? category.allowed_filters : []} />}
-            {/* <ShopByFilters handleActiveFilter={handleActiveFilter} activeFilter={activeFilter} category={category} /> */}
             {availableFilterOption.length ? 
                 <ul className={classes.nav}>
                     {availableFilterOption.map((filter, index) => (

package/src/overwrites/peregrine/lib/talons/ProductFullDetail/useProductFullDetail.js

@@ -302,12 +302,36 @@ const getCustomAttributes = (product, optionCodes, optionSelections) => {
         });
 
         return item && item.product
-            ? [...item.product.custom_attributes].sort(attributeLabelCompare)
+            ? [...item.product.custom_attributes]
             : [];
     }
 
     return custom_attributes
-        ? [...custom_attributes].sort(attributeLabelCompare)
+        ? [...custom_attributes]
+        : [];
+};
+
+const getProductDetailsAttributes = (product, optionCodes, optionSelections) => {
+    const { product_details, variants } = product;
+    const isConfigurable = isProductConfigurable(product);
+    const optionsSelected =
+        Array.from(optionSelections.values()).filter(value => !!value).length >
+        0;
+
+    if (isConfigurable && optionsSelected) {
+        const item = findMatchingVariant({
+            optionCodes,
+            optionSelections,
+            variants
+        });
+
+        return item && item.product
+            ? [...item.product.product_details]
+            : [];
+    }
+
+    return product_details
+        ? [...product_details]
         : [];
 };
 
@@ -529,6 +553,11 @@ export const useProductFullDetail = props => {
         [product, optionCodes, optionSelections]
     );
 
+    const productDetailsAttributes = useMemo(
+        () => getProductDetailsAttributes(product, optionCodes, optionSelections),
+        [product, optionCodes, optionSelections]
+    );
+
     const productPrice = useMemo(
         () => getConfigPrice(product, optionCodes, optionSelections),
         [product, optionCodes, optionSelections]
@@ -817,6 +846,7 @@ export const useProductFullDetail = props => {
             !!storeConfigData.storeConfig.magento_wishlist_general_is_enabled,
         productDetails,
         customAttributes,
+        productDetailsAttributes,
         wishlistButtonProps,
         wishlistItemOptions,
         sellerDetails,

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

@@ -43,6 +43,7 @@ export const GET_CATEGORY_CONTENT = gql`
                 allowed_filters {
                     code
                 }
+                prefixes
                 custom_subcategory {
                     name
                     path

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

@@ -141,9 +141,9 @@ export const useCategoryContent = props => {
             // Construct the filter arg object.
             const newFilters = {};
             filters.forEach((values, key) => {
-                if (masterAttributes.includes(key)) {
+                // if (masterAttributes.includes(key)) {
                     newFilters[key] = getFilterInput(values, filterTypeMap.get(key));
-                }
+                // }
             });
 
             // console.log('newFilters',newFilters)

package/src/overwrites/peregrine/lib/talons/RootComponents/Product/productDetailFragment.gql.js

@@ -131,6 +131,37 @@ export const ProductDetailsFragment = gql`
                 }
             }
         }
+        product_details {
+            selected_attribute_options {
+                attribute_option {
+                    uid
+                    label
+                    is_default
+                }
+            }
+            entered_attribute_value {
+                value
+            }
+            attribute_metadata {
+                uid
+                code
+                label
+                attribute_labels {
+                    store_code
+                    label
+                }
+                data_type
+                is_system
+                entity_type
+                ui_input {
+                    ui_input_type
+                    is_html_allowed
+                }
+                ... on ProductAttributeMetadata {
+                    used_in_components
+                }
+            }
+        }
         ... on ConfigurableProduct {
             # eslint-disable-next-line @graphql-eslint/require-id-when-available
             configurable_options {

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

@@ -165,7 +165,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 : []} />
+        <FilterSidebar hideFilters={category && category.hide_filters ? true : false} children={children} filters={filters} allowedFilters={category ? category.allowed_filters : []} prefixes={category ? category.prefixes : []} />
     ) : shouldShowFilterShimmer ? (
         <FilterSidebarShimmer />
     ) : null;

package/src/overwrites/venia-ui/lib/components/FilterSidebar/filterSidebar.js

@@ -21,7 +21,7 @@ const SCROLL_OFFSET = 150;
  * @param {Object} props.filters - filters to display
  */
 const FilterSidebar = props => {
-    const { filters, filterCountToOpen, allowedFilters, hideFilters } = props;
+    const { filters, filterCountToOpen, allowedFilters, prefixes, hideFilters } = props;
     const talonProps = useFilterSidebar({ filters });
     const {
         filterApi,
@@ -116,7 +116,15 @@ const FilterSidebar = props => {
     // // console.log([...sorted.entries()]);
     // const filterItems = [...sorted.entries()];
 
-    // console.log('filterItems',filterItems)
+    const removePrefix = (attrCode) => {
+        if (prefixes) {
+            return prefixes.reduce((s, p) => 
+            s.startsWith(p + "_") ? s.replace(p + "_", "") : s
+            , attrCode);
+        }
+
+        return attrCode;
+    };
 
     const filtersList = useMemo(
         () =>
@@ -124,10 +132,10 @@ const FilterSidebar = props => {
                 const blockState = filterState.get(group);
                 const groupName = filterNames.get(group);
                 const frontendInput = filterFrontendInput.get(group);
-
-                const hideFilters = ['card_game','bricks_categories','sc_sports_categories','trains','trains_locomotives','trains_supplies_type','lof_preorder','card_pre_orders','auction','special_price','sc_baseball_inserts','sc_baseball_parallel','sale','sc_set_type','sc_brands'];
-                if (!allowedFiltersArr?.length || filterState.size && allowedFiltersArr.length || !filterState.size && allowedFiltersArr.length && allowedFiltersArr.includes(group)) {
-                    if (!hideFilters.includes(group) && groupName && !group.includes('card_release') && !group.includes('card_set') && !group.includes('sc_set_name')) {
+                
+                if (!allowedFiltersArr.length || allowedFiltersArr.length && allowedFiltersArr.includes(removePrefix(group))) {
+                    console.log('removePrefix(group)',removePrefix(group))
+                    // if (!hideFilters.includes(group) && groupName && !group.includes('card_release') && !group.includes('card_set') && !group.includes('sc_set_name')) {
                     
                     // if (!allowedFiltersArr?.length && group != "category_uid" || allowedFiltersArr?.length && allowedFiltersArr.includes(group)) {
                         let subFilter = null;
@@ -177,7 +185,7 @@ const FilterSidebar = props => {
                                 initialOpen={true}
                             />
                         );
-                    }
+                    // }
                 }
             }),
         [
@@ -254,6 +262,7 @@ FilterSidebar.propTypes = {
         root: string,
         root_open: string
     }),
+    prefixes: [],
     filters: arrayOf(
         shape({
             attribute_code: string,

package/src/overwrites/venia-ui/lib/components/ProductFullDetail/CustomAttributes/customAttributes.js

@@ -22,7 +22,6 @@ const CustomAttributes = props => {
     const list = useMemo(
         () =>
             customAttributes.reduce((previousAttribute, currentAttribute) => {
-                console.log('currentAttribute',currentAttribute)
                 const attrCode = currentAttribute.attribute_metadata?.code;
                 const usedInComponents =
                     currentAttribute.attribute_metadata?.used_in_components ||

package/src/overwrites/venia-ui/lib/components/ProductFullDetail/ProductCardDetails/index.js

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

package/src/overwrites/venia-ui/lib/components/ProductFullDetail/ProductCardDetails/productCardDetails.js

@@ -0,0 +1,63 @@
+import React, { useMemo } from 'react';
+import { array, shape, string } from 'prop-types';
+
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import defaultClasses from './productCardDetails.module.css';
+import cn from 'classnames';
+
+export const IS_VISIBLE_ON_FRONT = 'PRODUCT_DETAILS_PAGE';
+
+const ProductCardDetails = props => {
+    const { customAttributes, showLabels } = props;
+    const classes = useStyle(defaultClasses, props.classes);
+
+    const getAttributeValue = (currentAttribute, key, useSuffix = false) => {
+        if (!currentAttribute) return "";
+
+        if (currentAttribute.selected_attribute_options?.attribute_option?.length) {
+            return currentAttribute.selected_attribute_options.attribute_option
+                .map(opt => opt.label)
+                .join(", ");
+        }
+        return currentAttribute.entered_attribute_value?.value || "";
+    };
+
+    const list = useMemo(
+        () =>
+            customAttributes.reduce((previousAttribute, currentAttribute) => {
+                const attrCode = currentAttribute.attribute_metadata?.code;
+                const usedInComponents =
+                    currentAttribute.attribute_metadata?.used_in_components ||
+                    [];
+                // Visible on front attributes only
+                if (usedInComponents.includes(IS_VISIBLE_ON_FRONT)) {
+                    const attributeContent = (
+                        <p key={currentAttribute.attribute_metadata.uid}><strong>{currentAttribute.attribute_metadata.label}:</strong> {getAttributeValue(currentAttribute)}</p>
+                    );
+
+                    previousAttribute.push(attributeContent);
+                }
+
+                return previousAttribute;
+            }, []),
+        [classes, customAttributes, showLabels]
+    );
+
+    if (list.length === 0) {
+        return null;
+    }
+
+    return list;
+};
+
+ProductCardDetails.propTypes = {
+    classes: shape({
+        root: string,
+        title: string,
+        list: string,
+        listItem: string
+    }),
+    customAttributes: array.isRequired
+};
+
+export default ProductCardDetails;

package/src/overwrites/venia-ui/lib/components/ProductFullDetail/ProductCardDetails/productCardDetails.module.css

@@ -0,0 +1,8 @@
+.root {}
+
+.list {
+    composes: list-none from global;
+    composes: mb-2 from global;
+    composes: mt-2 from global;
+    composes: pl-2 from global;
+}

package/src/overwrites/venia-ui/lib/components/ProductFullDetail/productFullDetail.js

@@ -19,6 +19,7 @@ import RichContent from '@magento/venia-ui/lib/components/RichContent/richConten
 import QuantityStepper from '../QuantityStepper';
 import { ProductOptionsShimmer } from '@magento/venia-ui/lib/components/ProductOptions';
 import CustomAttributes from './CustomAttributes';
+import ProductCardDetails from './ProductCardDetails';
 import defaultClasses from './productFullDetail.module.css';
 import cn from 'classnames';
 import Tabs from '@riosst100/pwa-marketplace/src/components/commons/Tabs';
@@ -102,6 +103,7 @@ const ProductFullDetail = props => {
         selectedMedia,
         productDetails,
         customAttributes,
+        productDetailsAttributes,
         wishlistButtonProps,
         sellerDetails,
         handleToastAction,
@@ -231,6 +233,28 @@ const ProductFullDetail = props => {
         };
     }, [customAttributes, productDetails.sku, formatMessage]);
 
+    const productCardDetailsAttributes = useMemo(() => {
+        const list = [];
+        const pagebuilder = [];
+        if (Array.isArray(productDetailsAttributes)) {
+            productDetailsAttributes.forEach(customAttribute => {
+                if (
+                    customAttribute.attribute_metadata.ui_input
+                        .ui_input_type === 'PAGEBUILDER'
+                ) {
+                    pagebuilder.push(customAttribute);
+                } else {
+                    list.push(customAttribute);
+                }
+            });
+        }
+        // list.unshift(skuAttribute);
+        return {
+            list: list,
+            pagebuilder: pagebuilder
+        };
+    }, [productDetailsAttributes, productDetails.sku, formatMessage]);
+
     const shortDescription = productDetails.shortDescription ? (
         <RichText
             rootClassName="px-0"
@@ -356,19 +380,19 @@ const ProductFullDetail = props => {
         return attr.entered_attribute_value?.value || "";
     };
 
-    const preOrder = getAttributeValue(customAttributesDetails, "card_pre_orders", true);
-    const preOrderDate = getAttributeValue(customAttributesDetails, "pre_order_date", true);
-    const preOrderDeposite = getAttributeValue(customAttributesDetails, "pre_order_deposit", true);
-    const preOrderNote = getAttributeValue(customAttributesDetails, "pre_order_notes", true);
-    const preOrderPaymentType = getAttributeValue(customAttributesDetails, "pre_order_payment_type", true);
-    const releaseDate = getAttributeValue(customAttributesDetails, "release_date", true);
-    const setNameValue = getAttributeValue(customAttributesDetails, "card_set", true);
-    const cardNameValue = getAttributeValue(customAttributesDetails, "card_name", true);
-    const cardNumberValue = getAttributeValue(customAttributesDetails, "card_number", true);
-    const rarityValue = getAttributeValue(customAttributesDetails, "card_rarity", true);
-    const featureValue = getAttributeValue(customAttributesDetails, "card_feature", true);
-    const conditionValue = getAttributeValue(customAttributesDetails, "card_condition", true);
-    const foilValue = getAttributeValue(customAttributesDetails, "card_foil", true);
+    const preOrder = getAttributeValue(productCardDetailsAttributes, "card_pre_orders", true);
+    const preOrderDate = getAttributeValue(productCardDetailsAttributes, "pre_order_date", true);
+    const preOrderDeposite = getAttributeValue(productCardDetailsAttributes, "pre_order_deposit", true);
+    const preOrderNote = getAttributeValue(productCardDetailsAttributes, "pre_order_notes", true);
+    const preOrderPaymentType = getAttributeValue(productCardDetailsAttributes, "pre_order_payment_type", true);
+    const releaseDate = getAttributeValue(productCardDetailsAttributes, "release_date", true);
+    const setNameValue = getAttributeValue(productCardDetailsAttributes, "card_set", true);
+    const cardNameValue = getAttributeValue(productCardDetailsAttributes, "card_name", true);
+    const cardNumberValue = getAttributeValue(productCardDetailsAttributes, "card_number", true);
+    const rarityValue = getAttributeValue(productCardDetailsAttributes, "card_rarity", true);
+    const featureValue = getAttributeValue(productCardDetailsAttributes, "card_feature", true);
+    const conditionValue = getAttributeValue(productCardDetailsAttributes, "card_condition", true);
+    const foilValue = getAttributeValue(productCardDetailsAttributes, "card_foil", true);
 
     const isPreOrderProduct = typeof preOrder === 'string'
         ? preOrder.trim().toLowerCase() === 'pre orders'
@@ -729,7 +753,7 @@ const ProductFullDetail = props => {
                         <section className='right_left-container w-full'>
                             <ExpandableSection>
                                 <div className="text-sm leading-6 leading-[2.5rem]">
-                                    {setNameValue && (
+                                    {/* {setNameValue && (
                                         <p><strong>Set Name:</strong> {setNameValue}</p>
                                     )}
                                     {cardNameValue && (
@@ -749,7 +773,12 @@ const ProductFullDetail = props => {
                                     )}
                                     {foilValue && (
                                         <p><strong>Foil/Non Foil:</strong> {foilValue}</p>
-                                    )}
+                                    )} */}
+                                    {/* <div className={cn(contentContainerClass, classes.contentContainerTabOverride)}> */}
+                                        <ProductCardDetails
+                                            customAttributes={productCardDetailsAttributes.list}
+                                        />
+                                    {/* </div> */}
                                 </div>
                             </ExpandableSection>
                         </section>

package/src/talons/ProductContent/productContent.gql.js

@@ -33,6 +33,7 @@ export const GET_CATEGORY_CONTENT = gql`
                 allowed_filters {
                     code
                 }
+                prefixes
                 custom_subcategory {
                     name
                     path

package/src/talons/SellerProducts/productContent.gql.js

@@ -34,6 +34,7 @@ export const GET_CATEGORY_CONTENT = gql`
                 allowed_filters {
                     code
                 }
+                    prefixes
                 custom_subcategory {
                     name
                     path

package/src/components/RelatedProducts/index.js

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

package/src/components/RelatedProducts/relatedProducts.js

@@ -1,44 +0,0 @@
-import React, { Fragment } from 'react';
-import { FormattedMessage } from 'react-intl';
-import { useRelatedProducts } from '@riosst100/pwa-marketplace/src/talons/RelatedProducts/useRelatedProducts';
-import ErrorView from '@magento/venia-ui/lib/components/ErrorView';
-import { StoreTitle, Meta } from '@magento/venia-ui/lib/components/Head';
-import mapSeller from '@riosst100/pwa-marketplace/src/util/mapSeller';
-import SellerDetail from '@riosst100/pwa-marketplace/src/components/SellerDetail/sellerDetail';
-
-const RelatedProducts = props => {
-    const { categoryUrlKey } = props;
-
-    const talonProps = useRelatedProducts({
-        mapSeller
-    });
-
-    const { error, loading, seller } = talonProps;
-
-    if (loading && !seller)
-        return '';
-    // return <SellerShimmer />;
-    if (error && !seller) return <ErrorView />;
-    if (!seller) {
-        return (
-            <h1>
-                <FormattedMessage
-                    id={'seller.notFound'}
-                    defaultMessage={
-                        'Seller Not Found.'
-                    }
-                />
-            </h1>
-        );
-    }
-
-    return (
-        <Fragment>
-            <StoreTitle>{seller.name}</StoreTitle>
-            <Meta name="description" content={seller.description} />
-            {seller && <SellerDetail seller={seller} />}
-        </Fragment>
-    );
-};
-
-export default RelatedProducts;

package/src/talons/RelatedProducts/useRelatedProducts.js

@@ -1,112 +0,0 @@
-import { useQuery } from '@apollo/client';
-import { useEffect, useMemo } from 'react';
-import { useLocation } from 'react-router-dom';
-import { useAppContext } from '@magento/peregrine/lib/context/app';
-import { useIntl } from 'react-intl';
-
-import mergeOperations from '@magento/peregrine/lib/util/shallowMerge';
-import DEFAULT_OPERATIONS from './relatedProducts.gql';
-
-export const useRelatedProducts = props => {
-    const { mapSeller } = props;
-
-    const { formatMessage } = useIntl();
-
-    const operations = mergeOperations(DEFAULT_OPERATIONS, props.operations);
-    const { getStoreConfigData, getSellerDetailQuery, getCouponCodeQuery } = operations;
-    const { pathname } = useLocation();
-    const [
-        ,
-        {
-            actions: { setPageLoading }
-        }
-    ] = useAppContext();
-
-    const { data: storeConfigData } = useQuery(getStoreConfigData, {
-        fetchPolicy: 'cache-and-network',
-        nextFetchPolicy: 'cache-first'
-    });
-
-    const slug = pathname.split('/')[2];
-    const productUrlSuffix = storeConfigData?.storeConfig?.product_url_suffix;
-    const urlKey = productUrlSuffix ? slug.replace(productUrlSuffix, '') : slug;
-
-    const getOtherInfo = true;
-    const getProducts = true;
-
-    const { error, loading, data } = useQuery(getSellerDetailQuery, {
-        fetchPolicy: 'cache-and-network',
-        nextFetchPolicy: 'cache-first',
-        skip: !storeConfigData,
-        variables: {
-            urlKey,
-            getOtherInfo,
-            getProducts
-        }
-    });
-
-    const {
-        data: couponData,
-        error: couponError,
-        loading: couponLoading
-    } = useQuery(getCouponCodeQuery, {
-        fetchPolicy: 'cache-and-network',
-        nextFetchPolicy: 'cache-first',
-        variables: {
-            sellerUrl: urlKey,
-            pageSize: 20,
-            currentPage: 1,
-            filters: {
-                is_public: {
-                    eq: '1'
-                }
-            }
-        },
-        skip: !urlKey
-    });
-
-    const isBackgroundLoading = !!data && loading;
-
-    const seller = useMemo(() => {
-        if (!data) {
-            return null;
-        }
-        
-        const seller = data.sellerByUrl;
-
-        if (!seller) {
-            return null;
-        }
-
-        return mapSeller(seller);
-    }, [data, mapSeller, urlKey]);
-
-    // Update the page indicator if the GraphQL query is in flight.
-    useEffect(() => {
-        setPageLoading(isBackgroundLoading);
-    }, [isBackgroundLoading, setPageLoading]);
-
-    const favoriteSellerOptions = useMemo(() => {
-        const options = {
-            seller_id: seller?.seller_id
-        };
-
-        return options;
-    }, [seller]);
-
-    const favoriteSellerButtonProps = {
-        buttonText: '',
-        item: favoriteSellerOptions,
-        storeConfig: storeConfigData ? storeConfigData.storeConfig : {}
-    };
-
-    return {
-        error,
-        loading,
-        seller,
-        favoriteSellerButtonProps,
-        couponData,
-        couponError,
-        couponLoading
-    };
-};