@riosst100/pwa-marketplace 2.3.2 → 2.3.4

package/src/overwrites/venia-ui/lib/components/MegaMenu/submenuColumn.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 import { Link } from 'react-router-dom';
 
 import resourceUrl from '@magento/peregrine/lib/util/makeUrl';
@@ -6,9 +6,6 @@ import resourceUrl from '@magento/peregrine/lib/util/makeUrl';
 import { useStyle } from '@magento/venia-ui/lib/classify';
 import defaultClasses from './submenuColumn.module.css';
 import PropTypes from 'prop-types';
-import { ArrowDown2 } from 'iconsax-react';
-import { textPrimary } from '@riosst100/pwa-marketplace/src/theme/vars';
-import CustomSubmenuColumn from '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/MegaMenu/customSubmenuColumn';
 import cn from 'classnames';
 
 /**
@@ -31,12 +28,8 @@ const SubmenuColumn = props => {
     const categoryUrl = resourceUrl(
         `/${category.url_path}${categoryUrlSuffix || ''}`
     );
-    let children = null;
-
-    // let maybeDownArrowIcon = () => {
-    //     return ;
-    // };
 
+    let children = null;
     let childrenItems = '';
 
     if (category.children.length) {
@@ -54,41 +47,10 @@ const SubmenuColumn = props => {
 
             const customMenuItems = subCategory.custom_submenu;
 
-            const [showCustomMenu, setShowCustomMenu] = useState(false);
-
-            const toggleCustomMenu = () => {
-                if (!showCustomMenu) {
-                    setShowCustomMenu(true);
-                } else {
-                    setShowCustomMenu(false);
-                }
-            }
-
-            const customSubMenus = customMenuItems.length ? (
-                <CustomSubmenuColumn
-                    categoryUrlSuffix={categoryUrlSuffix}
-                    onNavigate={onNavigate}
-                    handleCloseSubMenu={handleCloseSubMenu}
-                    category={subCategory}
-                    customMenuItems={customMenuItems}
-                    toggleCustomMenu={toggleCustomMenu}
-                />
-            ) : '';
-
-            // if (customMenuItems.length) {
-                // console.log(customMenuItems)
-            // }
-
-            // var childLi = '';
             let result = [];
-
             if (customMenuItems.length) {
-                // console.log('customMenuItems length')
-                // console.log(customMenuItems)
-
                 customMenuItems.map((submenu, index) => {
-                    const {name, path} = submenu;
-
+                    const {name} = submenu;
                     result.push(
                         <li key={index} className={cn(classes.submenuChildItem, 'mt-0')}>
                             <Link
@@ -106,8 +68,6 @@ const SubmenuColumn = props => {
                         </li>
                     )
                 })
-
-                // console.log(childrenItems)
             } else {
                 result.push(
                     <li key={index} className={cn(classes.submenuChildItem, 'mt-0')}>
@@ -127,19 +87,11 @@ const SubmenuColumn = props => {
                 );
             }
 
-            // return '';
-
-            // return childLi;
-
-
-            
-
             return result;
         });
     }
 
-    if (category.custom_submenu && category.custom_submenu.length) 
-    {
+    if (category.custom_submenu && category.custom_submenu.length) {
         childrenItems = category.custom_submenu.map((subCategory, index) => {
             const { path, isActive, name } = subCategory;
             const categoryUrl = resourceUrl(

package/src/talons/ProductContent/index.js

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

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

@@ -0,0 +1,98 @@
+import { gql } from '@apollo/client';
+
+export const GET_PRODUCT_FILTERS_BY_CATEGORY = gql`
+    query getProductFiltersByCategory(
+        $categoryIdFilter: FilterEqualTypeInput!
+    ) {
+        products(filter: { category_uid: $categoryIdFilter }) {
+            aggregations {
+                label
+                count
+                attribute_code
+                options {
+                    label
+                    value
+                }
+                position
+            }
+        }
+    }
+`;
+
+export const GET_CATEGORY_CONTENT = gql`
+    query getCategoryData($id: String!) {
+        categories(filters: { category_uid: { in: [$id] } }) {
+            # eslint-disable-next-line @graphql-eslint/require-id-when-available
+            items {
+                uid
+                name
+                description
+                url_key
+                url_path
+                hide_filters
+                allowed_filters {
+                    code
+                }
+                custom_subcategory {
+                    name
+                    path
+                }
+                attributes_block {
+                    label
+                    code
+                    items {
+                      label
+                      value
+                    }
+                }
+                parent {
+                    uid
+                    name
+                    position
+                    url_path
+                    # eslint-disable-next-line @graphql-eslint/require-id-when-available
+                }
+                children {
+                    uid
+                    name
+                    position
+                    url_path
+                    # eslint-disable-next-line @graphql-eslint/require-id-when-available
+                }
+            }
+        }
+    }
+`;
+
+export const GET_CATEGORY_AVAILABLE_SORT_METHODS = gql`
+    query getCategoryAvailableSortMethods(
+        $categoryIdFilter: FilterEqualTypeInput!
+    ) {
+        products(filter: { category_uid: $categoryIdFilter }) {
+            sort_fields {
+                options {
+                    label
+                    value
+                }
+            }
+        }
+    }
+`;
+
+export const GET_STORE_CONFIG_DATA = gql`
+    query GetStoreConfigForBreadcrumbs {
+        # eslint-disable-next-line @graphql-eslint/require-id-when-available
+        storeConfig {
+            store_code
+            custommarketplace_plp_filters_virtualcategory
+        }
+    }
+`;
+
+
+export default {
+    getCategoryContentQuery: GET_CATEGORY_CONTENT,
+    getProductFiltersByCategoryQuery: GET_PRODUCT_FILTERS_BY_CATEGORY,
+    getCategoryAvailableSortMethodsQuery: GET_CATEGORY_AVAILABLE_SORT_METHODS,
+    getStoreConfigQuery: GET_STORE_CONFIG_DATA
+};

package/src/talons/ProductContent/useProductContent.js

@@ -0,0 +1,192 @@
+import { useEffect, useMemo } from 'react';
+import { useLazyQuery, useQuery } from '@apollo/client';
+
+import mergeOperations from '@magento/peregrine/lib/util/shallowMerge';
+import { useEventingContext } from '@magento/peregrine/lib/context/eventing';
+
+import DEFAULT_OPERATIONS from './productContent.gql';
+
+/**
+ * Returns props necessary to render the categoryContent component.
+ *
+ * @param {object} props.data - The results of a getCategory GraphQL query.
+ *
+ * @returns {object} result
+ * @returns {string} result.categoryDescription - This category's description.
+ * @returns {string} result.categoryName - This category's name.
+ * @returns {object} result.filters - The filters object.
+ * @returns {object} result.items - The items in this category.
+ * @returns {number} result.totalPagesFromData - The total amount of pages for the query.
+ */
+export const useProductContent = props => {
+    const { categoryId, data, pageSize = 6 } = props;
+
+    const operations = mergeOperations(DEFAULT_OPERATIONS, props.operations);
+
+    const {
+        getCategoryContentQuery,
+        getProductFiltersByCategoryQuery,
+        getCategoryAvailableSortMethodsQuery,
+        getStoreConfigQuery
+    } = operations;
+
+    const placeholderItems = Array.from({ length: pageSize }).fill(null);
+    
+    const { data: storeConfigData } = useQuery(getStoreConfigQuery, {
+        fetchPolicy: 'cache-and-network'
+    });
+
+    const virtualCategoryFilters = useMemo(() => {
+        if (storeConfigData) {
+            const data = storeConfigData.storeConfig.custommarketplace_plp_filters_virtualcategory;
+            return data ? data.split(',') : [];
+        }
+    }, [storeConfigData]);
+
+    const [getFilters, { data: filterData }] = useLazyQuery(
+        getProductFiltersByCategoryQuery,
+        {
+            fetchPolicy: 'cache-and-network',
+            nextFetchPolicy: 'cache-first'
+        }
+    );
+
+    const [getSortMethods, { data: sortData }] = useLazyQuery(
+        getCategoryAvailableSortMethodsQuery,
+        {
+            fetchPolicy: 'cache-and-network',
+            nextFetchPolicy: 'cache-first'
+        }
+    );
+
+    const { data: categoryData, loading: categoryLoading } = useQuery(
+        getCategoryContentQuery,
+        {
+            fetchPolicy: 'cache-and-network',
+            nextFetchPolicy: 'cache-first',
+            skip: !categoryId,
+            variables: {
+                id: categoryId
+            }
+        }
+    );
+
+    const [, { dispatch }] = useEventingContext();
+
+    useEffect(() => {
+        if (categoryId) {
+            getFilters({
+                variables: {
+                    categoryIdFilter: {
+                        eq: categoryId
+                    }
+                }
+            });
+        }
+    }, [categoryId, getFilters]);
+
+    useEffect(() => {
+        if (categoryId) {
+            getSortMethods({
+                variables: {
+                    categoryIdFilter: {
+                        in: categoryId
+                    }
+                }
+            });
+        }
+    }, [categoryId, getSortMethods]);
+
+    const rawFilters = filterData ? filterData.products.aggregations : null;
+    const items = data ? data.products.items : placeholderItems;
+    const category =
+        categoryData && categoryData.categories.items.length
+            ? categoryData.categories.items[0]
+            : null;
+    const children =
+        categoryData && categoryData.categories.items.length
+            ? categoryData.categories.items[0].children
+            : null;
+
+    const filters = [];
+
+    rawFilters && rawFilters.map((filter, index) => {
+
+        const filterOptions = [];
+        let label = filter.label;
+        if (filter.attribute_code == "category_uid") {
+            children && children.map((category, index) => {
+                filterOptions.push({
+                    'label': category.name,
+                    'value': category.uid,
+                    'path': category.url_path
+                });
+            });
+
+            label = category ? category.name : label;
+        }
+
+        const newFilter = {
+            attribute_code: filter.attribute_code,
+            count: filter.count,
+            label: label,
+            position: filter.position,
+            options: filterOptions.length ? filterOptions : filter.options
+        };
+
+        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
+        : null;
+    const totalPagesFromData = data
+        ? data.products.page_info.total_pages
+        : null;
+    const totalCount = data ? data.products.total_count : null;
+    
+    const categoryName =
+        categoryData && categoryData.categories.items.length
+            ? categoryData.categories.items[0].name
+            : null;
+    const categoryDescription =
+        categoryData && categoryData.categories.items.length
+            ? categoryData.categories.items[0].description
+            : null;
+    const availableSortMethods = sortData
+        ? sortData.products.sort_fields.options
+        : null;
+
+    useEffect(() => {
+        if (!categoryLoading && categoryData.categories.items.length > 0) {
+            dispatch({
+                type: 'CATEGORY_PAGE_VIEW',
+                payload: {
+                    id: categoryData.categories.items[0].uid,
+                    name: categoryData.categories.items[0].name,
+                    url_key: categoryData.categories.items[0].url_key,
+                    url_path: categoryData.categories.items[0].url_path
+                }
+            });
+        }
+    }, [categoryData, dispatch, categoryLoading]);
+
+    return {
+        availableSortMethods,
+        categoryName,
+        categoryDescription,
+        filters,
+        items,
+        totalCount,
+        totalPagesFromData,
+        children,
+        parent,
+        attributesBlock,
+        category,
+        virtualCategoryFilters
+    };
+};

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

@@ -0,0 +1,103 @@
+import { gql } from '@apollo/client';
+
+export const CategoryFragment = gql`
+    # eslint-disable-next-line @graphql-eslint/require-id-when-available
+    fragment CategoryFragment on CategoryTree {
+        uid
+        meta_title
+        meta_keywords
+        meta_description
+    }
+`;
+
+export const ProductsFragment = gql`
+    fragment ProductsFragment on Products {
+        items {
+            id
+            uid
+            name
+            preorder {
+                is_preorder
+                preorder_notes
+                preorder_availability
+            }
+            auction_data {
+                is_auction
+            }
+            seller {
+                name
+            }
+            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
+                    }
+                }
+            }
+            price_range {
+                maximum_price {
+                    final_price {
+                        currency
+                        value
+                    }
+                    regular_price {
+                        currency
+                        value
+                    }
+                    discount {
+                        amount_off
+                    }
+                }
+                minimum_price {
+                    final_price {
+                        currency
+                        value
+                    }
+                    regular_price {
+                        currency
+                        value
+                    }
+                    discount {
+                        amount_off
+                    }
+                }
+            }
+            sku
+            small_image {
+                url
+            }
+            stock_status
+            rating_summary
+            __typename
+            url_key
+        }
+        page_info {
+            total_pages
+        }
+        total_count
+    }
+`;

package/src/talons/SellerProducts/index.js

@@ -0,0 +1,2 @@
+export { useSellerProducts } from './useSellerProducts';
+export { useProductContent } from './useProductContent';

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

@@ -0,0 +1,98 @@
+import { gql } from '@apollo/client';
+
+export const GET_PRODUCT_FILTERS_BY_CATEGORY = gql`
+    query getProductFiltersByCategory(
+        $categoryIdFilter: FilterEqualTypeInput!
+    ) {
+        products(filter: { category_uid: $categoryIdFilter }) {
+            aggregations {
+                label
+                count
+                attribute_code
+                options {
+                    label
+                    value
+                }
+                position
+            }
+        }
+    }
+`;
+
+export const GET_CATEGORY_CONTENT = gql`
+    query getCategoryData($id: String!) {
+        categories(filters: { category_uid: { in: [$id] } }) {
+            # eslint-disable-next-line @graphql-eslint/require-id-when-available
+            items {
+                uid
+                name
+                description
+                url_key
+                url_path
+                hide_filters
+                allowed_filters {
+                    code
+                }
+                custom_subcategory {
+                    name
+                    path
+                }
+                attributes_block {
+                    label
+                    code
+                    items {
+                      label
+                      value
+                    }
+                }
+                parent {
+                    uid
+                    name
+                    position
+                    url_path
+                    # eslint-disable-next-line @graphql-eslint/require-id-when-available
+                }
+                children {
+                    uid
+                    name
+                    position
+                    url_path
+                    # eslint-disable-next-line @graphql-eslint/require-id-when-available
+                }
+            }
+        }
+    }
+`;
+
+export const GET_CATEGORY_AVAILABLE_SORT_METHODS = gql`
+    query getCategoryAvailableSortMethods(
+        $categoryIdFilter: FilterEqualTypeInput!
+    ) {
+        products(filter: { category_uid: $categoryIdFilter }) {
+            sort_fields {
+                options {
+                    label
+                    value
+                }
+            }
+        }
+    }
+`;
+
+export const GET_STORE_CONFIG_DATA = gql`
+    query GetStoreConfigForBreadcrumbs {
+        # eslint-disable-next-line @graphql-eslint/require-id-when-available
+        storeConfig {
+            store_code
+            custommarketplace_plp_filters_virtualcategory
+        }
+    }
+`;
+
+
+export default {
+    getCategoryContentQuery: GET_CATEGORY_CONTENT,
+    getProductFiltersByCategoryQuery: GET_PRODUCT_FILTERS_BY_CATEGORY,
+    getCategoryAvailableSortMethodsQuery: GET_CATEGORY_AVAILABLE_SORT_METHODS,
+    getStoreConfigQuery: GET_STORE_CONFIG_DATA
+};

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

@@ -0,0 +1,63 @@
+import { gql } from '@apollo/client';
+
+import { CategoryFragment, ProductsFragment } from './categoryFragments.gql';
+
+export const GET_PRODUCTS = gql`
+    query GetProductsBySellerId(
+        $sellerId: Int!,
+        $filter: ProductAttributeFilterInput,
+        $pageSize: Int,
+        $currentPage: Int,
+        $sort: ProductAttributeSortInput
+    ) {
+        productsBySellerId(
+            seller_id: $sellerId,
+            pageSize: $pageSize,
+            currentPage: $currentPage,
+            filter: $filter,
+            sort: $sort
+        ) {
+            # eslint-disable-next-line @graphql-eslint/require-id-when-available
+            ...ProductsFragment
+        }
+    }
+    ${ProductsFragment}
+`;
+
+export const GET_FILTER_INPUTS = gql`
+    query GetFilterInputsForCategory {
+        __type(name: "ProductAttributeFilterInput") {
+            inputFields {
+                name
+                type {
+                    name
+                }
+            }
+        }
+    }
+`;
+
+export const GET_CATEGORIES_DATA = gql`
+    query GetCategories (
+        $filters: CategoryFilterInput,
+        $pageSize: Int,
+        $currentPage: Int
+    ) {
+        categories(
+            filters: $filters,
+            pageSize: $pageSize,
+            currentPage: $currentPage
+        ) {
+            total_count
+            items {
+                uid
+            }
+        }
+    }
+`;
+
+export default {
+    getProductsQuery: GET_PRODUCTS,
+    getFilterInputsQuery: GET_FILTER_INPUTS,
+    getCategoryDataQuery: GET_CATEGORIES_DATA
+};