@riosst100/pwa-marketplace 1.3.1 → 1.3.2

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

@@ -6,6 +6,7 @@ import { useSubMenu } from '@magento/peregrine/lib/talons/MegaMenu/useSubMenu';
 import { useStyle } from '@magento/venia-ui/lib/classify';
 import defaultClasses from './submenu.module.css';
 import SubmenuColumn from './submenuColumn';
+import ShopByColumn from '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/MegaMenu/shopByColumn';
 
 /**
  * The Submenu component displays submenu in mega menu
@@ -17,6 +18,7 @@ import SubmenuColumn from './submenuColumn';
 const Submenu = props => {
     const {
         items,
+        shopByItems,
         mainNavWidth,
         isFocused,
         subMenuState,
@@ -55,6 +57,34 @@ const Submenu = props => {
         );
     });
 
+    // const shopByItems = [
+    //     {
+    //         name: 'Shop By Franchise',
+    //         items: [
+    //             {
+    //                 name: 'Hasbro',
+    //                 url: '/'
+    //             }
+    //         ]
+    //     }
+    // ];
+
+    const shopBy = shopByItems.map((shopBy, index) => {
+        const keyboardProps =
+            index === shopByItems.length - 1 ? talonProps.keyboardProps : {};
+        return (
+            <ShopByColumn
+                index={index}
+                keyboardProps={keyboardProps}
+                // key={category.uid}
+                shopBy={shopBy}
+                // categoryUrlSuffix={categoryUrlSuffix}
+                onNavigate={onNavigate}
+                handleCloseSubMenu={handleCloseSubMenu}
+            />
+        );
+    });
+
     return (
         <div className={subMenuClassname}>
             <div
@@ -62,6 +92,7 @@ const Submenu = props => {
                 style={{ minWidth: mainNavWidth + PADDING_OFFSET }}
             >
                 {subMenus}
+                {shopBy}
             </div>
         </div>
     );

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

@@ -20,6 +20,7 @@ const SubmenuColumn = props => {
         onNavigate,
         handleCloseSubMenu
     } = props;
+    
     const classes = useStyle(defaultClasses, props.classes);
 
     const categoryUrl = resourceUrl(

package/src/overwrites/venia-ui/lib/components/SearchBar/searchField.js

@@ -27,7 +27,7 @@ const SearchField = props => {
             onFocus={onFocus}
             onValueChange={onChange}
             forwardedRef={inputRef}
-            classes={cn('search input')}
+            // classes={cn('search input')}
         />
     );
 };

package/src/talons/MegaMenu/megaMenu.gql.js

@@ -0,0 +1,70 @@
+import { gql } from '@apollo/client';
+export const GET_STORE_CONFIG_DATA = gql`
+    query GetStoreConfigForMegaMenu {
+        # eslint-disable-next-line @graphql-eslint/require-id-when-available
+        storeConfig {
+            store_code
+            category_url_suffix
+        }
+    }
+`;
+
+export const GET_MEGA_MENU = gql`
+    query getMegaMenu {
+        # eslint-disable-next-line @graphql-eslint/require-id-when-available
+        categoryList {
+            uid
+            name
+            # eslint-disable-next-line @graphql-eslint/require-id-when-available
+            children {
+                uid
+                include_in_menu
+                name
+                position
+                url_path
+                shop_by {
+                    name
+                    items {
+                        name
+                        url_path
+                    }
+                }
+                # eslint-disable-next-line @graphql-eslint/require-id-when-available
+                children {
+                    uid
+                    include_in_menu
+                    name
+                    position
+                    url_path
+                    shop_by {
+                        name
+                        items {
+                            name
+                            url_path
+                        }
+                    }
+                    # eslint-disable-next-line @graphql-eslint/require-id-when-available
+                    children {
+                        uid
+                        include_in_menu
+                        name
+                        position
+                        url_path
+                        shop_by {
+                            name
+                            items {
+                                name
+                                url_path
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+`;
+
+export default {
+    getMegaMenuQuery: GET_MEGA_MENU,
+    getStoreConfigQuery: GET_STORE_CONFIG_DATA
+};

package/src/talons/ShopByCategory/index.js

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

package/src/talons/ShopByCategory/shopByCategory.gql.js

@@ -0,0 +1,38 @@
+import { gql } from '@apollo/client';
+
+export const GET_STORE_CONFIG_DATA = gql`
+    query GetStoreConfigForBreadcrumbs {
+        # eslint-disable-next-line @graphql-eslint/require-id-when-available
+        storeConfig {
+            store_code
+            category_url_suffix
+        }
+    }
+`;
+
+export const GET_CATEGORY_LIST = gql`
+    query getCategoryData($id: String!) {
+        categories(filters: { category_uid: { eq: $id } }) {
+            items {
+                uid
+                name
+                url_path
+                parent {
+                    uid
+                    name
+                    url_path
+                }
+                children {
+                    uid
+                    name
+                    url_path
+                }
+            }
+        }
+    }
+`;
+
+export default {
+    getStoreConfigQuery: GET_STORE_CONFIG_DATA,
+    getCategoryQuery: GET_CATEGORY_LIST
+};

package/src/talons/ShopByCategory/useShopByCategory.js

@@ -0,0 +1,69 @@
+import { useMemo } from 'react';
+import { useQuery } from '@apollo/client';
+
+import mergeOperations from '@magento/peregrine/lib/util/shallowMerge';
+
+import DEFAULT_OPERATIONS from './shopByCategory.gql';
+
+const getPath = (path, suffix) => {
+    if (path) {
+        return `/${path}${suffix || ''}`;
+    }
+
+    // If there is no path this is just a dead link.
+    return '#';
+};
+
+export const useShopByCategory = props => {
+    const { children, parent } = props;
+
+    const operations = mergeOperations(DEFAULT_OPERATIONS, props.operations);
+    const { getStoreConfigQuery } = operations;
+
+    const { data: storeConfigData } = useQuery(getStoreConfigQuery, {
+        fetchPolicy: 'cache-and-network' 
+    });
+
+    const categoryUrlSuffix = useMemo(() => {
+        if (storeConfigData) {
+            return storeConfigData.storeConfig.category_url_suffix;
+        }
+    }, [storeConfigData]);
+
+    const childrenNormalizedData = useMemo(() => {
+        if (children) {
+            return (
+                children.length &&
+                children
+                    .map(category => ({
+                        text: category.name,
+                        path: getPath(
+                            category.url_path,
+                            categoryUrlSuffix
+                        )
+                    }))
+            );
+        }
+    }, [categoryUrlSuffix, children]);
+
+    const parentNormalizedData = useMemo(() => {
+        if (parent) {
+            return (
+                parent.length &&
+                parent
+                    .map(category => ({
+                        text: category.name,
+                        path: getPath(
+                            category.url_path,
+                            categoryUrlSuffix
+                        )
+                    }))
+            );
+        }
+    }, [categoryUrlSuffix, parent]);
+
+    return {
+        childrenNormalizedData: childrenNormalizedData || [],
+        parentNormalizedData: parentNormalizedData || []
+    };
+};

package/src/talons/SubCategory/subCategory.gql.js

@@ -0,0 +1,15 @@
+import { gql } from '@apollo/client';
+
+export const GET_STORE_CONFIG_DATA = gql`
+    query GetStoreConfigForBreadcrumbs {
+        # eslint-disable-next-line @graphql-eslint/require-id-when-available
+        storeConfig {
+            store_code
+            category_url_suffix
+        }
+    }
+`;
+
+export default {
+    getStoreConfigQuery: GET_STORE_CONFIG_DATA
+};

package/src/talons/SubCategory/useSubCategory.js

@@ -0,0 +1,52 @@
+import { useMemo } from 'react';
+import { useQuery } from '@apollo/client';
+
+import mergeOperations from '@magento/peregrine/lib/util/shallowMerge';
+
+import DEFAULT_OPERATIONS from './subCategory.gql';
+
+const getPath = (path, suffix) => {
+    if (path) {
+        return `/${path}${suffix || ''}`;
+    }
+
+    // If there is no path this is just a dead link.
+    return '#';
+};
+
+export const useSubCategory = props => {
+    const { children } = props;
+
+    const operations = mergeOperations(DEFAULT_OPERATIONS, props.operations);
+    const { getStoreConfigQuery } = operations;
+
+    const { data: storeConfigData } = useQuery(getStoreConfigQuery, {
+        fetchPolicy: 'cache-and-network'
+    });
+
+    const categoryUrlSuffix = useMemo(() => {
+        if (storeConfigData) {
+            return storeConfigData.storeConfig.category_url_suffix;
+        }
+    }, [storeConfigData]);
+
+    const normalizedData = useMemo(() => {
+        if (children) {
+            return (
+                children.length &&
+                children
+                    .map(category => ({
+                        text: category.name,
+                        path: getPath(
+                            category.url_path,
+                            categoryUrlSuffix
+                        )
+                    }))
+            );
+        }
+    }, [categoryUrlSuffix, children]);
+
+    return {
+        normalizedData: normalizedData || []
+    };
+};