@riosst100/pwa-marketplace 1.4.2 → 1.4.4

package/package.json

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

package/src/componentOverrideMapping.js

@@ -14,6 +14,8 @@ module.exports = componentOverrideMapping = {
     [`@magento/peregrine/lib/talons/SignIn/useSignIn.js`]: '@riosst100/pwa-marketplace/src/overwrites/peregrine/lib/talons/SignIn/useSignIn.js',
     [`@magento/peregrine/lib/talons/AccountMenu/useAccountMenuItems.js`]: '@riosst100/pwa-marketplace/src/overwrites/peregrine/lib/talons/AccountMenu/useAccountMenuItems.js',
     [`@magento/peregrine/lib/talons/MegaMenu/megaMenu.gql.js`]: '@riosst100/pwa-marketplace/src/overwrites/peregrine/lib/talons/MegaMenu/megaMenu.gql.js',
+    [`@magento/peregrine/lib/talons/RootComponents/Product/productDetailFragment.gql.js`]: '@riosst100/pwa-marketplace/src/overwrites/peregrine/lib/talons/RootComponents/Product/productDetailFragment.gql.js',
+    [`@magento/peregrine/lib/talons/ProductFullDetail/useProductFullDetail.js`]: '@riosst100/pwa-marketplace/src/overwrites/peregrine/lib/talons/ProductFullDetail/useProductFullDetail.js',
     [`@magento/peregrine/lib/util/deriveErrorMessage.js`]: '@riosst100/pwa-marketplace/src/overwrites/peregrine/lib/util/deriveErrorMessage.js',
     [`@magento/venia-ui/lib/components/MegaMenu/megaMenu.js`]: '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/MegaMenu/megaMenu.js',
     [`@magento/venia-ui/lib/components/FilterModal/FilterList/filterDefault.js`]: '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/FilterModal/FilterList/filterDefault.js',

package/src/components/SubCategory/subCategory.module.css

@@ -3,7 +3,7 @@
     composes: flex-wrap from global;
     composes: mt-3 from global;
     composes: gap-[15px] from global;
-    margin-bottom: 30px;
+    margin-bottom: 10px;
 }
 
 .item {

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

@@ -0,0 +1,639 @@
+import { useCallback, useState, useMemo } from 'react';
+import { useIntl } from 'react-intl';
+import { useMutation, useQuery } from '@apollo/client';
+import { useCartContext } from '@magento/peregrine/lib/context/cart';
+import { useUserContext } from '@magento/peregrine/lib/context/user';
+
+import { appendOptionsToPayload } from '@magento/peregrine/lib/util/appendOptionsToPayload';
+import { findMatchingVariant } from '@magento/peregrine/lib/util/findMatchingProductVariant';
+import { isProductConfigurable } from '@magento/peregrine/lib/util/isProductConfigurable';
+import { isSupportedProductType as isSupported } from '@magento/peregrine/lib/util/isSupportedProductType';
+import { deriveErrorMessage } from '@magento/peregrine/lib/util/deriveErrorMessage';
+import mergeOperations from '@magento/peregrine/lib/util/shallowMerge';
+import defaultOperations from '@magento/peregrine/lib/talons/ProductFullDetail/productFullDetail.gql';
+import { useEventingContext } from '@magento/peregrine/lib/context/eventing';
+import { getOutOfStockVariants } from '@magento/peregrine/lib/util/getOutOfStockVariants';
+
+const INITIAL_OPTION_CODES = new Map();
+const INITIAL_OPTION_SELECTIONS = new Map();
+const OUT_OF_STOCK_CODE = 'OUT_OF_STOCK';
+const IN_STOCK_CODE = 'IN_STOCK';
+
+const deriveOptionCodesFromProduct = product => {
+    // If this is a simple product it has no option codes.
+    if (!isProductConfigurable(product)) {
+        return INITIAL_OPTION_CODES;
+    }
+
+    // Initialize optionCodes based on the options of the product.
+    const initialOptionCodes = new Map();
+    for (const {
+        attribute_id,
+        attribute_code
+    } of product.configurable_options) {
+        initialOptionCodes.set(attribute_id, attribute_code);
+    }
+
+    return initialOptionCodes;
+};
+
+// Similar to deriving the initial codes for each option.
+const deriveOptionSelectionsFromProduct = product => {
+    if (!isProductConfigurable(product)) {
+        return INITIAL_OPTION_SELECTIONS;
+    }
+
+    const initialOptionSelections = new Map();
+    for (const { attribute_id } of product.configurable_options) {
+        initialOptionSelections.set(attribute_id, undefined);
+    }
+
+    return initialOptionSelections;
+};
+
+const getIsMissingOptions = (product, optionSelections) => {
+    // Non-configurable products can't be missing options.
+    if (!isProductConfigurable(product)) {
+        return false;
+    }
+
+    // Configurable products are missing options if we have fewer
+    // option selections than the product has options.
+    const { configurable_options } = product;
+    const numProductOptions = configurable_options.length;
+    const numProductSelections = Array.from(optionSelections.values()).filter(
+        value => !!value
+    ).length;
+
+    return numProductSelections < numProductOptions;
+};
+
+const getIsOutOfStock = (product, optionCodes, optionSelections) => {
+    const { stock_status, 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
+        });
+        const stockStatus = item?.product?.stock_status;
+
+        return stockStatus === OUT_OF_STOCK_CODE || !stockStatus;
+    }
+    return stock_status === OUT_OF_STOCK_CODE;
+};
+const getIsAllOutOfStock = product => {
+    const { stock_status, variants } = product;
+    const isConfigurable = isProductConfigurable(product);
+
+    if (isConfigurable) {
+        const inStockItem = variants.find(item => {
+            return item.product.stock_status === IN_STOCK_CODE;
+        });
+        return !inStockItem;
+    }
+
+    return stock_status === OUT_OF_STOCK_CODE;
+};
+
+const getMediaGalleryEntries = (product, optionCodes, optionSelections) => {
+    let value = [];
+
+    const { media_gallery_entries, variants } = product;
+    const isConfigurable = isProductConfigurable(product);
+
+    // Selections are initialized to "code => undefined". Once we select a value, like color, the selections change. This filters out unselected options.
+    const optionsSelected =
+        Array.from(optionSelections.values()).filter(value => !!value).length >
+        0;
+
+    if (!isConfigurable || !optionsSelected) {
+        value = media_gallery_entries;
+    } else {
+        // If any of the possible variants matches the selection add that
+        // variant's image to the media gallery. NOTE: This _can_, and does,
+        // include variants such as size. If Magento is configured to display
+        // an image for a size attribute, it will render that image.
+        const item = findMatchingVariant({
+            optionCodes,
+            optionSelections,
+            variants
+        });
+
+        value = item
+            ? [...item.product.media_gallery_entries, ...media_gallery_entries]
+            : media_gallery_entries;
+    }
+
+    return value;
+};
+
+// We only want to display breadcrumbs for one category on a PDP even if a
+// product has multiple related categories. This function filters and selects
+// one category id for that purpose.
+const getBreadcrumbCategoryId = categories => {
+    // Exit if there are no categories for this product.
+    if (!categories || !categories.length) {
+        return;
+    }
+    const breadcrumbSet = new Set();
+    categories.forEach(({ breadcrumbs }) => {
+        // breadcrumbs can be `null`...
+        (breadcrumbs || []).forEach(({ category_id }) =>
+            breadcrumbSet.add(category_id)
+        );
+    });
+
+    // Until we can get the single canonical breadcrumb path to a product we
+    // will just return the first category id of the potential leaf categories.
+    const leafCategory = categories.find(
+        category => !breadcrumbSet.has(category.uid)
+    );
+
+    // If we couldn't find a leaf category then just use the first category
+    // in the list for this product.
+    return leafCategory.uid || categories[0].uid;
+};
+
+const getConfigPrice = (product, optionCodes, optionSelections) => {
+    let value;
+
+    const { variants } = product;
+    const isConfigurable = isProductConfigurable(product);
+
+    const optionsSelected =
+        Array.from(optionSelections.values()).filter(value => !!value).length >
+        0;
+
+    if (!isConfigurable || !optionsSelected) {
+        value = product.price_range?.maximum_price;
+    } else {
+        const item = findMatchingVariant({
+            optionCodes,
+            optionSelections,
+            variants
+        });
+
+        value = item
+            ? item.product.price_range?.maximum_price
+            : product.price_range?.maximum_price;
+    }
+
+    return value;
+};
+
+const attributeLabelCompare = (attribute1, attribute2) => {
+    const label1 = attribute1['attribute_metadata']['label'].toLowerCase();
+    const label2 = attribute2['attribute_metadata']['label'].toLowerCase();
+    if (label1 < label2) return -1;
+    else if (label1 > label2) return 1;
+    else return 0;
+};
+
+const getCustomAttributes = (product, optionCodes, optionSelections) => {
+    const { custom_attributes, 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.custom_attributes].sort(attributeLabelCompare)
+            : [];
+    }
+
+    return custom_attributes
+        ? [...custom_attributes].sort(attributeLabelCompare)
+        : [];
+};
+
+/**
+ * @param {GraphQLDocument} props.addConfigurableProductToCartMutation - configurable product mutation
+ * @param {GraphQLDocument} props.addSimpleProductToCartMutation - configurable product mutation
+ * @param {Object.<string, GraphQLDocument>} props.operations - collection of operation overrides merged into defaults
+ * @param {Object} props.product - the product, see RootComponents/Product
+ *
+ * @returns {{
+ *  breadcrumbCategoryId: string|undefined,
+ *  errorMessage: string|undefined,
+ *  handleAddToCart: func,
+ *  handleSelectionChange: func,
+ *  handleSetQuantity: func,
+ *  isAddToCartDisabled: boolean,
+ *  isSupportedProductType: boolean,
+ *  mediaGalleryEntries: array,
+ *  productDetails: object,
+ *  quantity: number
+ * }}
+ */
+export const useProductFullDetail = props => {
+    const {
+        addConfigurableProductToCartMutation,
+        addSimpleProductToCartMutation,
+        product
+    } = props;
+
+    const [, { dispatch }] = useEventingContext();
+
+    const hasDeprecatedOperationProp = !!(
+        addConfigurableProductToCartMutation || addSimpleProductToCartMutation
+    );
+
+    const operations = mergeOperations(defaultOperations, props.operations);
+
+    const productType = product.__typename;
+
+    const isSupportedProductType = isSupported(productType);
+
+    const [{ cartId }] = useCartContext();
+    const [{ isSignedIn }] = useUserContext();
+    const { formatMessage } = useIntl();
+
+    const { data: storeConfigData } = useQuery(
+        operations.getWishlistConfigQuery,
+        {
+            fetchPolicy: 'cache-and-network'
+        }
+    );
+
+    const [
+        addConfigurableProductToCart,
+        {
+            error: errorAddingConfigurableProduct,
+            loading: isAddConfigurableLoading
+        }
+    ] = useMutation(
+        addConfigurableProductToCartMutation ||
+            operations.addConfigurableProductToCartMutation
+    );
+
+    const [
+        addSimpleProductToCart,
+        { error: errorAddingSimpleProduct, loading: isAddSimpleLoading }
+    ] = useMutation(
+        addSimpleProductToCartMutation ||
+            operations.addSimpleProductToCartMutation
+    );
+
+    const [
+        addProductToCart,
+        {
+            data: addToCartResponseData,
+            error: errorAddingProductToCart,
+            loading: isAddProductLoading
+        }
+    ] = useMutation(operations.addProductToCartMutation);
+
+    const breadcrumbCategoryId = useMemo(
+        () => getBreadcrumbCategoryId(product.categories),
+        [product.categories]
+    );
+
+    const derivedOptionSelections = useMemo(
+        () => deriveOptionSelectionsFromProduct(product),
+        [product]
+    );
+
+    const [optionSelections, setOptionSelections] = useState(
+        derivedOptionSelections
+    );
+
+    const [singleOptionSelection, setSingleOptionSelection] = useState();
+
+    const derivedOptionCodes = useMemo(
+        () => deriveOptionCodesFromProduct(product),
+        [product]
+    );
+    const [optionCodes] = useState(derivedOptionCodes);
+
+    const isMissingOptions = useMemo(
+        () => getIsMissingOptions(product, optionSelections),
+        [product, optionSelections]
+    );
+
+    const isOutOfStock = useMemo(
+        () => getIsOutOfStock(product, optionCodes, optionSelections),
+        [product, optionCodes, optionSelections]
+    );
+
+    // Check if display out of stock products option is selected in the Admin Dashboard
+    const isOutOfStockProductDisplayed = useMemo(() => {
+        let totalVariants = 1;
+        const isConfigurable = isProductConfigurable(product);
+        if (product.configurable_options && isConfigurable) {
+            for (const option of product.configurable_options) {
+                const length = option.values.length;
+                totalVariants = totalVariants * length;
+            }
+            return product.variants.length === totalVariants;
+        }
+    }, [product]);
+
+    const isEverythingOutOfStock = useMemo(() => getIsAllOutOfStock(product), [
+        product
+    ]);
+
+    const outOfStockVariants = useMemo(
+        () =>
+            getOutOfStockVariants(
+                product,
+                optionCodes,
+                singleOptionSelection,
+                optionSelections,
+                isOutOfStockProductDisplayed
+            ),
+        [
+            product,
+            optionCodes,
+            singleOptionSelection,
+            optionSelections,
+            isOutOfStockProductDisplayed
+        ]
+    );
+
+    const mediaGalleryEntries = useMemo(
+        () => getMediaGalleryEntries(product, optionCodes, optionSelections),
+        [product, optionCodes, optionSelections]
+    );
+
+    const customAttributes = useMemo(
+        () => getCustomAttributes(product, optionCodes, optionSelections),
+        [product, optionCodes, optionSelections]
+    );
+
+    const productPrice = useMemo(
+        () => getConfigPrice(product, optionCodes, optionSelections),
+        [product, optionCodes, optionSelections]
+    );
+
+    // The map of ids to values (and their uids)
+    // For example:
+    // { "179" => [{ uid: "abc", value_index: 1 }, { uid: "def", value_index: 2 }]}
+    const attributeIdToValuesMap = useMemo(() => {
+        const map = new Map();
+        // For simple items, this will be an empty map.
+        const options = product.configurable_options || [];
+        for (const { attribute_id, values } of options) {
+            map.set(attribute_id, values);
+        }
+        return map;
+    }, [product.configurable_options]);
+
+    // An array of selected option uids. Useful for passing to mutations.
+    // For example:
+    // ["abc", "def"]
+    const selectedOptionsArray = useMemo(() => {
+        const selectedOptions = [];
+
+        optionSelections.forEach((value, key) => {
+            const values = attributeIdToValuesMap.get(key);
+
+            const selectedValue = values?.find(
+                item => item.value_index === value
+            );
+
+            if (selectedValue) {
+                selectedOptions.push(selectedValue.uid);
+            }
+        });
+        return selectedOptions;
+    }, [attributeIdToValuesMap, optionSelections]);
+
+    const handleAddToCart = useCallback(
+        async formValues => {
+            const { quantity } = formValues;
+
+            /*
+                @deprecated in favor of general addProductsToCart mutation. Will support until the next MAJOR.
+             */
+            if (hasDeprecatedOperationProp) {
+                const payload = {
+                    item: product,
+                    productType,
+                    quantity
+                };
+
+                if (isProductConfigurable(product)) {
+                    appendOptionsToPayload(
+                        payload,
+                        optionSelections,
+                        optionCodes
+                    );
+                }
+
+                if (isSupportedProductType) {
+                    const variables = {
+                        cartId,
+                        parentSku: payload.parentSku,
+                        product: payload.item,
+                        quantity: payload.quantity,
+                        sku: payload.item.sku
+                    };
+                    // Use the proper mutation for the type.
+                    if (productType === 'SimpleProduct') {
+                        try {
+                            await addSimpleProductToCart({
+                                variables
+                            });
+                        } catch {
+                            return;
+                        }
+                    } else if (productType === 'ConfigurableProduct') {
+                        try {
+                            await addConfigurableProductToCart({
+                                variables
+                            });
+                        } catch {
+                            return;
+                        }
+                    }
+                } else {
+                    console.error(
+                        'Unsupported product type. Cannot add to cart.'
+                    );
+                }
+            } else {
+                const variables = {
+                    cartId,
+                    product: {
+                        sku: product.sku,
+                        quantity
+                    },
+                    entered_options: [
+                        {
+                            uid: product.uid,
+                            value: product.name
+                        }
+                    ]
+                };
+
+                if (selectedOptionsArray.length) {
+                    variables.product.selected_options = selectedOptionsArray;
+                }
+
+                try {
+                    await addProductToCart({ variables });
+
+                    const selectedOptionsLabels =
+                        selectedOptionsArray?.map((uid, i) => ({
+                            attribute: product.configurable_options[i].label,
+                            value:
+                                product.configurable_options[i].values.findLast(
+                                    x => x.uid === uid
+                                )?.label || null
+                        })) || null;
+
+                    dispatch({
+                        type: 'CART_ADD_ITEM',
+                        payload: {
+                            cartId,
+                            sku: product.sku,
+                            name: product.name,
+                            pricing: product.price,
+                            priceTotal: productPrice.final_price.value,
+                            currencyCode: productPrice.final_price.currency,
+                            discountAmount: productPrice.discount.amount_off,
+                            selectedOptions: selectedOptionsLabels,
+                            quantity
+                        }
+                    });
+                } catch {
+                    return;
+                }
+            }
+        },
+        [
+            addConfigurableProductToCart,
+            addProductToCart,
+            addSimpleProductToCart,
+            cartId,
+            dispatch,
+            hasDeprecatedOperationProp,
+            isSupportedProductType,
+            optionCodes,
+            optionSelections,
+            product,
+            productPrice,
+            productType,
+            selectedOptionsArray
+        ]
+    );
+
+    const handleSelectionChange = useCallback(
+        (optionId, selection) => {
+            // We must create a new Map here so that React knows that the value
+            // of optionSelections has changed.
+            const nextOptionSelections = new Map([...optionSelections]);
+            nextOptionSelections.set(optionId, selection);
+            setOptionSelections(nextOptionSelections);
+            // Create a new Map to keep track of single selections with key as String
+            const nextSingleOptionSelection = new Map();
+            nextSingleOptionSelection.set(optionId, selection);
+            setSingleOptionSelection(nextSingleOptionSelection);
+        },
+        [optionSelections]
+    );
+
+    // Normalization object for product details we need for rendering.
+    const productDetails = {
+        description: product.description,
+        shortDescription: product.short_description,
+        name: product.name,
+        price: productPrice?.final_price,
+        sku: product.sku,
+        term_and_conditions: product.term_and_conditions,
+        shipping_policy: product.shipping_policy,
+        return_policy: product.return_policy
+    };
+
+    const sellerDetails = {
+        name: product.seller?.name,
+        url_key: product.seller?.url_key,
+        city: product.seller?.city,
+        country: product.seller?.country
+    };
+
+    const derivedErrorMessage = useMemo(
+        () =>
+            deriveErrorMessage([
+                errorAddingSimpleProduct,
+                errorAddingConfigurableProduct,
+                errorAddingProductToCart,
+                ...(addToCartResponseData?.addProductsToCart?.user_errors || [])
+            ]),
+        [
+            errorAddingConfigurableProduct,
+            errorAddingProductToCart,
+            errorAddingSimpleProduct,
+            addToCartResponseData
+        ]
+    );
+
+    const wishlistItemOptions = useMemo(() => {
+        const options = {
+            quantity: 1,
+            sku: product.sku
+        };
+
+        if (productType === 'ConfigurableProduct') {
+            options.selected_options = selectedOptionsArray;
+        }
+
+        return options;
+    }, [product, productType, selectedOptionsArray]);
+
+    const wishlistButtonProps = {
+        buttonText: isSelected =>
+            isSelected
+                ? formatMessage({
+                      id: 'wishlistButton.addedText',
+                      defaultMessage: 'Added to Favorites'
+                  })
+                : formatMessage({
+                      id: 'wishlistButton.addText',
+                      defaultMessage: 'Add to Favorites'
+                  }),
+        item: wishlistItemOptions,
+        storeConfig: storeConfigData ? storeConfigData.storeConfig : {}
+    };
+
+    return {
+        breadcrumbCategoryId,
+        errorMessage: derivedErrorMessage,
+        handleAddToCart,
+        handleSelectionChange,
+        isOutOfStock,
+        isEverythingOutOfStock,
+        outOfStockVariants,
+        isAddToCartDisabled:
+            isOutOfStock ||
+            isEverythingOutOfStock ||
+            isMissingOptions ||
+            isAddConfigurableLoading ||
+            isAddSimpleLoading ||
+            isAddProductLoading,
+        isSupportedProductType,
+        mediaGalleryEntries,
+        shouldShowWishlistButton:
+            isSignedIn &&
+            storeConfigData &&
+            !!storeConfigData.storeConfig.magento_wishlist_general_is_enabled,
+        productDetails,
+        customAttributes,
+        wishlistButtonProps,
+        wishlistItemOptions,
+        sellerDetails
+    };
+};

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

@@ -0,0 +1,31 @@
+import { gql } from '@apollo/client';
+
+import { ProductDetailsFragment } from './productDetailFragment.gql';
+
+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
+        }
+    }
+`;
+
+export const GET_PRODUCT_DETAIL_QUERY = gql`
+    query getProductDetailForProductPage($urlKey: String!) {
+        products(filter: { url_key: { eq: $urlKey } }) {
+            items {
+                id
+                uid
+                ...ProductDetailsFragment
+            }
+        }
+    }
+    ${ProductDetailsFragment}
+`;
+
+export default {
+    getStoreConfigData: GET_STORE_CONFIG_DATA,
+    getProductDetailQuery: GET_PRODUCT_DETAIL_QUERY
+};

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

@@ -0,0 +1,191 @@
+import { gql } from '@apollo/client';
+
+export const ProductDetailsFragment = gql`
+    fragment ProductDetailsFragment on ProductInterface {
+        __typename
+        # eslint-disable-next-line @graphql-eslint/require-id-when-available
+        categories {
+            uid
+            breadcrumbs {
+                category_uid
+            }
+        }
+        seller {
+            name
+            url_key
+            city
+            country
+        }
+        description {
+            html
+        }
+        short_description {
+            html
+        }
+        id
+        uid
+        # eslint-disable-next-line @graphql-eslint/require-id-when-available
+        media_gallery_entries {
+            uid
+            label
+            position
+            disabled
+            file
+        }
+        meta_description
+        name
+        price {
+            regularPrice {
+                amount {
+                    currency
+                    value
+                }
+            }
+        }
+        price_range {
+            maximum_price {
+                final_price {
+                    currency
+                    value
+                }
+                discount {
+                    amount_off
+                }
+            }
+        }
+        sku
+        term_and_conditions
+        shipping_policy
+        return_policy
+        small_image {
+            url
+        }
+        stock_status
+        url_key
+        custom_attributes {
+            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 {
+                attribute_code
+                attribute_id
+                uid
+                label
+                # eslint-disable-next-line @graphql-eslint/require-id-when-available
+                values {
+                    uid
+                    default_label
+                    label
+                    store_label
+                    use_default_value
+                    value_index
+                    swatch_data {
+                        ... on ImageSwatchData {
+                            thumbnail
+                        }
+                        value
+                    }
+                }
+            }
+            variants {
+                attributes {
+                    code
+                    value_index
+                }
+                # eslint-disable-next-line @graphql-eslint/require-id-when-available
+                product {
+                    uid
+                    # eslint-disable-next-line @graphql-eslint/require-id-when-available
+                    media_gallery_entries {
+                        uid
+                        disabled
+                        file
+                        label
+                        position
+                    }
+                    sku
+                    stock_status
+                    price {
+                        regularPrice {
+                            amount {
+                                currency
+                                value
+                            }
+                        }
+                    }
+                    price_range {
+                        maximum_price {
+                            final_price {
+                                currency
+                                value
+                            }
+                            discount {
+                                amount_off
+                            }
+                        }
+                    }
+                    custom_attributes {
+                        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
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+`;

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

@@ -185,9 +185,9 @@ const CategoryContent = props => {
                 </div>
                 <SubCategory children={children} />
                 <AttributesBlock category={category} attributesBlock={attributesBlock} />
-                <section className='category_brand-slider my-5'>
+                {/* <section className='category_brand-slider my-5'>
                     <BrandSlider />
-                </section>
+                </section> */}
                 <div className={classes.contentWrapper}>
                     <div ref={sidebarRef} className={classes.sidebar}>
                         <Suspense fallback={<FilterSidebarShimmer />}>

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

@@ -4,7 +4,7 @@
     composes: flex from global;
     composes: items-center from global;
     composes: gap-[6px] from global;
-    composes: my-[30px] from global;
+    composes: my-[10px] from global;
     padding-top: 20px;
 }
 

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

@@ -24,7 +24,8 @@ import Tabs from '@riosst100/pwa-marketplace/src/components/commons/Tabs';
 import ProductReviews from './components/productReview';
 import RichText from '@magento/venia-ui/lib/components/RichText';
 import { Star1, Verify, Sms, Message, Shop } from 'iconsax-react';
-import { Link } from "react-router-dom";
+import { Link } from 'react-router-dom';
+import resourceUrl from '@magento/peregrine/lib/util/makeUrl';
 import Divider from '@riosst100/pwa-marketplace/src/components/Divider';
 
 const WishlistButton = React.lazy(() => import('@magento/venia-ui/lib/components/Wishlist/AddToListButton'));
@@ -62,7 +63,8 @@ const ProductFullDetail = props => {
         mediaGalleryEntries,
         productDetails,
         customAttributes,
-        wishlistButtonProps
+        wishlistButtonProps,
+        sellerDetails
     } = talonProps;
 
     const { formatMessage } = useIntl();
@@ -144,22 +146,22 @@ const ProductFullDetail = props => {
     const customAttributesDetails = useMemo(() => {
         const list = [];
         const pagebuilder = [];
-        const skuAttribute = {
-            attribute_metadata: {
-                uid: 'attribute_sku',
-                used_in_components: ['PRODUCT_DETAILS_PAGE'],
-                ui_input: {
-                    ui_input_type: 'TEXT'
-                },
-                label: formatMessage({
-                    id: 'global.sku',
-                    defaultMessage: 'SKU'
-                })
-            },
-            entered_attribute_value: {
-                value: productDetails.sku
-            }
-        };
+        // const skuAttribute = {
+        //     attribute_metadata: {
+        //         uid: 'attribute_sku',
+        //         used_in_components: ['PRODUCT_DETAILS_PAGE'],
+        //         ui_input: {
+        //             ui_input_type: 'TEXT'
+        //         },
+        //         label: formatMessage({
+        //             id: 'global.sku',
+        //             defaultMessage: 'SKU'
+        //         })
+        //     },
+        //     entered_attribute_value: {
+        //         value: productDetails.sku
+        //     }
+        // };
         if (Array.isArray(customAttributes)) {
             customAttributes.forEach(customAttribute => {
                 if (
@@ -172,7 +174,7 @@ const ProductFullDetail = props => {
                 }
             });
         }
-        list.unshift(skuAttribute);
+        // list.unshift(skuAttribute);
         return {
             list: list,
             pagebuilder: pagebuilder
@@ -275,15 +277,6 @@ const ProductFullDetail = props => {
     const ProductMoreInfo = () => (
         <>
             <div className={cn(contentContainerClass)}>
-                <span
-                    data-cy="ProductFullDetail-detailsTitle"
-                    className={classes.detailsTitle}
-                >
-                    <FormattedMessage
-                        id={'productFullDetail.details'}
-                        defaultMessage={'Details'}
-                    />
-                </span>
                 <CustomAttributes
                     customAttributes={customAttributesDetails.list}
                 />
@@ -292,11 +285,50 @@ const ProductFullDetail = props => {
         </>
     );
 
+    const customAttributesList = useMemo(
+        () =>
+            customAttributesDetails.list.reduce((customAttributesData, currentAttribute) => {
+                const attrCode = currentAttribute.attribute_metadata?.code || null;
+                const value = currentAttribute.entered_attribute_value?.value || "";
+                if (attrCode) {
+                    customAttributesData.push({
+                        'code': attrCode,
+                        'value': value
+                    });
+                }
+
+                return customAttributesData;
+            }, []),
+        [customAttributesDetails.list]
+    );
+
     const ProductTNC = () => (
         <div className={cn(contentContainerClass)}>
-            <p>
-                Terms and Conditions
-            </p>
+            <p>{customAttributesList.map((data, index) => {
+                if (data.code == "term_and_conditions") {
+                    return data.value;
+                }
+            })}</p>
+        </div>
+    )
+
+    const ShippingPolicy = () => (
+        <div className={cn(contentContainerClass)}>
+            <p>{customAttributesList.map((data, index) => {
+                if (data.code == "shipping_policy") {
+                    return data.value;
+                }
+            })}</p>
+        </div>
+    )
+
+    const ReturnPolicy = () => (
+        <div className={cn(contentContainerClass)}>
+            <p>{customAttributesList.map((data, index) => {
+                if (data.code == "return_policy") {
+                    return data.value;
+                }
+            })}</p>
         </div>
     )
 
@@ -313,19 +345,29 @@ const ProductFullDetail = props => {
         [
             {
                 id: 'product-detail',
-                title: 'Details',
+                title: 'Description',
                 content: <ProductDescription />
             },
             {
                 id: 'product-more-info',
-                title: 'More Info',
+                title: 'Details',
                 content: <ProductMoreInfo />
             },
             {
                 id: 'product-tnc',
-                title: 'Terms & Conditions',
+                title: 'Term & Conditions',
                 content: <ProductTNC />
             },
+            {
+                id: 'product-shipping-policy',
+                title: 'Shipping Policy',
+                content: <ShippingPolicy />
+            },
+            {
+                id: 'product-return-policy',
+                title: 'Return Policy',
+                content: <ReturnPolicy />
+            },
             {
                 id: 'product-faq',
                 title: 'FAQ',
@@ -394,11 +436,11 @@ const ProductFullDetail = props => {
                     >
                         {shortDescription}
                     </div>
-                    <div className='product_brand-container mb-[30px] leading-[18px]'>
+                    {/* <div className='product_brand-container mb-[30px] leading-[18px]'>
                         <div className='text-sm'>
                             Brand : <span className='text-blue-700'><Link to="">Bandai Namco</Link></span>
                         </div>
-                    </div>
+                    </div> */}
                     <Divider />
                     <div
                         className={cn(
@@ -446,11 +488,12 @@ const ProductFullDetail = props => {
                         />
 
                         <div className='product_shipping-information mb-[30px] leading-[18px] mt-[25px]'>
+                            {sellerDetails &&
                             <div className='text-xs'>
-                                Shiping From <span className='font-semibold'>Singapore</span>
-                            </div>
+                                Ship From <span className='font-semibold'>{sellerDetails.country}</span>
+                            </div>}
                             <div className='text-xs'>
-                                Shiping To <span className='font-semibold'>Yishun</span>
+                                Ship To <span className='font-semibold'>Yishun</span>
                             </div>
                             <div className='text-xs'>
                                 Shiping Method <span className='font-semibold'>Store Pick Up | Meet Up</span>
@@ -498,14 +541,14 @@ const ProductFullDetail = props => {
                                 <div className='flex flex-col xs_items-center md_items-start gap-[6px] relative'>
                                     <div className="gap-x-[10px] gap-y-1 flex xs_flex-col md_flex-row xs_items-center md_items-start relative">
                                         <div className="text-sm">
-                                            Good Smile
+                                            {sellerDetails ? sellerDetails.name : ''}
                                         </div>
                                         <div className="flex items-center relative">
                                             <Verify variant='Bold' color='#4E31DB' size={20} />
                                         </div>
                                     </div>
                                     <div class="relative w-fit font-normal text-[#999999] text-[12px] tracking-[0] leading-[14px] whitespace-nowrap">
-                                        Jurong West
+                                        {sellerDetails ? sellerDetails.city + ', ' + sellerDetails.country : ''}
                                     </div>
                                 </div>
                                 <div className='flex flex-wrap items-start gap-4 relative'>
@@ -525,14 +568,14 @@ const ProductFullDetail = props => {
                                             </div>
                                         </div>
                                     </button>
-                                    <button class="flex items-center justify-center gap-[5px] py-1 px-5 relative bg-white rounded-[30px] border border-solid border-[#6243fa]">
+                                    <Link to={`/seller/${sellerDetails.url_key}`} class="flex items-center justify-center gap-[5px] py-1 px-5 relative bg-white rounded-[30px] border border-solid border-[#6243fa]">
                                         <div class="flex items-center justify-center gap-[10px] relative">
                                             <Shop color="#6243FA" size={14} variant="Outline" className='stroke-[#6243FA]' />
                                             <div class="relative xs_hidden lg_flex w-fit font-medium text-[#6243fa] text-[14px] tracking-[0] leading-[20px] whitespace-nowrap">
                                                 Visit Store
                                             </div>
                                         </div>
-                                    </button>
+                                    </Link>
                                 </div>
                             </div>
                         </div>