@riosst100/pwa-marketplace 3.0.8 → 3.0.9

package/package.json

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

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/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/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>