@riosst100/pwa-marketplace 3.1.8 → 3.2.0

package/src/talons/Seller/useSeller.js

@@ -1,5 +1,6 @@
-import { useQuery } from '@apollo/client';
-import { useEffect, useMemo } from 'react';
+import { useQuery, useMutation } from '@apollo/client';
+import { useEffect, useMemo, useCallback, useState } from 'react';
+import { useToasts } from '@magento/peregrine/lib/Toasts/useToasts';
 import { useLocation } from 'react-router-dom';
 import { useAppContext } from '@magento/peregrine/lib/context/app';
 import { useIntl } from 'react-intl';
@@ -13,7 +14,15 @@ export const useSeller = props => {
     const { formatMessage } = useIntl();
 
     const operations = mergeOperations(DEFAULT_OPERATIONS, props.operations);
-    const { getStoreConfigData, getSellerDetailQuery, getCouponCodeQuery } = operations;
+    const {
+        getStoreConfigData,
+        getSellerDetailQuery,
+        getCouponCodeQuery,
+        getCustomerSellerMessages,
+        customerSendMessageMutation,
+        customerReplyMessageMutation,
+        customerDeleteMessageMutation
+    } = operations;
     const { pathname } = useLocation();
     const [
         ,
@@ -27,6 +36,8 @@ export const useSeller = props => {
         nextFetchPolicy: 'cache-first'
     });
 
+    const [, { addToast }] = useToasts();
+
     const slug = pathname.split('/')[2];
     const productUrlSuffix = storeConfigData?.storeConfig?.product_url_suffix;
     const urlKey = productUrlSuffix ? slug.replace(productUrlSuffix, '') : slug;
@@ -100,6 +111,82 @@ export const useSeller = props => {
         storeConfig: storeConfigData ? storeConfigData.storeConfig : {}
     };
 
+    // Messages state
+    const [messageListVars, setMessageListVars] = useState({
+        pageSize: 500,
+        currentPage: 1,
+        filter: undefined,
+        sort: undefined
+    });
+
+    const {
+        data: messagesData,
+        loading: messagesLoading,
+        error: messagesError,
+        refetch: refetchMessages
+    } = useQuery(getCustomerSellerMessages, {
+        fetchPolicy: 'network-only',
+        nextFetchPolicy: 'network-only',
+        skip: !storeConfigData,
+        variables: messageListVars,
+        pollInterval: 10000,
+        notifyOnNetworkStatusChange: true
+    });
+
+    const [sendMessage, { loading: sendLoading }] = useMutation(customerSendMessageMutation);
+    const [replyMessage, { loading: replyLoading }] = useMutation(customerReplyMessageMutation);
+    const [deleteMessage, { loading: deleteLoading }] = useMutation(customerDeleteMessageMutation);
+
+    const handleSendMessage = useCallback(async ({ subject, content, seller_url }) => {
+        const input = {
+            subject,
+            content,
+            seller_url
+        };
+        const result = await sendMessage({ variables: { input }, refetchQueries: [{ query: getCustomerSellerMessages, variables: messageListVars }] });
+        addToast({
+            type: 'success',
+            message: formatMessage({
+                id: 'messages.messageSent',
+                defaultMessage: 'Message sent successfully.'
+            }),
+            timeout: 3000
+        });
+        await refetchMessages({ fetchPolicy: 'network-only' });
+        return result?.data?.customerSendMessage;
+    }, [sendMessage, refetchMessages, addToast, formatMessage]);
+
+    const handleReplyMessage = useCallback(async ({ message_id, content }) => {
+        const input = {
+            message_id,
+            content
+        };
+        const result = await replyMessage({ variables: { input }, refetchQueries: [{ query: getCustomerSellerMessages, variables: messageListVars }] });
+        addToast({
+            type: 'success',
+            message: formatMessage({
+                id: 'messages.replySent',
+                defaultMessage: 'Reply sent successfully.'
+            }),
+            timeout: 3000
+        });
+        await refetchMessages({ fetchPolicy: 'network-only' });
+        return result?.data?.customerReplyMessage;
+    }, [replyMessage, refetchMessages, addToast, formatMessage]);
+
+    const handleDeleteMessage = useCallback(async ({ id }) => {
+        await deleteMessage({ variables: { id }, refetchQueries: [{ query: getCustomerSellerMessages, variables: messageListVars }] });
+        addToast({
+            type: 'success',
+            message: formatMessage({
+                id: 'messages.messageDeleted',
+                defaultMessage: 'Message deleted successfully.'
+            }),
+            timeout: 3000
+        });
+        await refetchMessages({ fetchPolicy: 'network-only' });
+    }, [deleteMessage, refetchMessages, addToast, formatMessage]);
+
     return {
         error,
         loading,
@@ -107,6 +194,17 @@ export const useSeller = props => {
         favoriteSellerButtonProps,
         couponData,
         couponError,
-        couponLoading
+        couponLoading,
+        // messages
+        messages: messagesData?.customer?.sellerMessages,
+        messagesLoading,
+        messagesError,
+        setMessageListVars,
+        sendLoading,
+        replyLoading,
+        deleteLoading,
+        handleSendMessage,
+        handleReplyMessage,
+        handleDeleteMessage
     };
 };

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

@@ -10,9 +10,9 @@ export const GET_STORE_CONFIG_DATA = gql`
 `;
 
 export const GET_MEGA_MENU = gql`
-    query getMegaMenu {
+    query getSellerMegaMenu {
         # eslint-disable-next-line @graphql-eslint/require-id-when-available
-        categoryList {
+        sellerCategories {
             uid
             name
             # eslint-disable-next-line @graphql-eslint/require-id-when-available
@@ -22,22 +22,10 @@ export const GET_MEGA_MENU = gql`
                 name
                 position
                 url_path
-                custom_submenu {
-                    name
-                    attribute {
-                        code
-                        value
-                    }
-                    path
-                }
-                shop_by {
-                    name
-                    code
-                    items {
-                        name
-                        option_id
-                        url_path
-                    }
+                default_top_filter {
+                    attribute_code
+                    label
+                    value
                 }
                 # eslint-disable-next-line @graphql-eslint/require-id-when-available
                 children {
@@ -46,6 +34,11 @@ export const GET_MEGA_MENU = gql`
                     name
                     position
                     url_path
+                    default_top_filter {
+                        attribute_code
+                        label
+                        value
+                    }
                     custom_submenu {
                         name
                         attribute {

package/src/talons/SellerMegaMenu/useSellerMegaMenu.js

@@ -1,5 +1,5 @@
 import { useMemo, useState, useCallback, useEffect } from 'react';
-import { useLocation } from 'react-router-dom';
+import { useLocation, useHistory } from 'react-router-dom';
 import { useInternalLink } from '@magento/peregrine/lib/hooks/useInternalLink';
 
 import { useQuery } from '@apollo/client';
@@ -8,6 +8,7 @@ import { useEventListener } from '@magento/peregrine/lib/hooks/useEventListener'
 import mergeOperations from '@magento/peregrine/lib/util/shallowMerge';
 import DEFAULT_OPERATIONS from './megaMenu.gql';
 
+
 /**
  * The useSellerMegaMenu talon complements the SellerMegaMenu component.
  *
@@ -107,9 +108,65 @@ export const useSellerMegaMenu = (props = {}) => {
     );
 
     const megaMenuData = useMemo(() => {
-        return data ? processData(data.categoryList[0]) : {};
+        return data ? processData(data.sellerCategories[0]) : {};
     }, [data, processData]);
 
+    const category = useMemo(() => {
+        return Array.isArray(megaMenuData?.children)
+        ? megaMenuData.children[0]
+        : [];
+    }, [megaMenuData]);
+
+    const history = useHistory();
+
+    const setQueryParam = ({ history, location, parameter, replace, value }) => {
+        const { search } = location;
+        const queryParams = new URLSearchParams(search);
+
+        queryParams.set(parameter, value);
+        const destination = { search: queryParams.toString() };
+
+        if (replace) {
+            history.replace(destination);
+        } else {
+            history.push(destination);
+        }
+    };
+
+    const setDefaultSubcategoryAndTopFilter = useCallback(
+        (value, searchParam, replace = false) => {
+            // Update the query parameter.
+            setQueryParam({
+                history,
+                location,
+                parameter: searchParam,
+                replace,
+                value: value
+            });
+        },
+        [history, location]
+    );
+
+    useEffect(() => {
+        const { search } = location;
+
+        // if (category && category.default_top_filter) {
+        //     const defaultTopFilter = category.default_top_filter;
+
+        //     const attrCode = defaultTopFilter.attribute_code;
+        //     const label = defaultTopFilter.label;
+        //     const value = defaultTopFilter.value;
+
+        //     if (!search.includes(attrCode)) {
+        //         setDefaultSubcategoryAndTopFilter(
+        //             label + ',' + value, 
+        //             attrCode + '[filter]', 
+        //             true
+        //         );
+        //     }
+        // }
+    }, [category, location, setDefaultSubcategoryAndTopFilter]);
+
     const findActiveCategory = useCallback(
         (pathname, category) => {
             if (isActive(category)) {

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

@@ -35,6 +35,11 @@ export const GET_CATEGORY_CONTENT = gql`
                 url_key
                 url_path
                 prefixes
+                default_top_filter {
+                    attribute_code
+                    label
+                    value
+                }
                 parent {
                     uid
                     name

package/src/talons/SellerProducts/useProductContent.js

@@ -1,6 +1,6 @@
-import React, { useEffect, useMemo } from 'react';
+import React, { useCallback, useEffect, useMemo } from 'react';
 import { useLazyQuery, useQuery } from '@apollo/client';
-
+import { useLocation, useHistory } from 'react-router-dom';
 import mergeOperations from '@magento/peregrine/lib/util/shallowMerge';
 import { useEventingContext } from '@magento/peregrine/lib/context/eventing';
 
@@ -48,6 +48,8 @@ export const useProductContent = props => {
         }
     );
 
+    
+
     const { data: categoryData, loading: categoryLoading } = useQuery(
         getCategoryContentQuery,
         {
@@ -60,6 +62,9 @@ export const useProductContent = props => {
         }
     );
 
+    // console.log('categoryData',categoryData)
+    // console.log('categoryId',categoryId)
+
     const [, { dispatch }] = useEventingContext();
 
     useEffect(() => {
@@ -94,6 +99,7 @@ export const useProductContent = props => {
         categoryData && categoryData.categories.items.length
             ? categoryData.categories.items[0]
             : null;
+            // console.log('categorycategory',category)
     const children =
         categoryData && categoryData.categories.items.length
             ? categoryData.categories.items[0].children
@@ -101,6 +107,59 @@ export const useProductContent = props => {
 
     const filters = [];
 
+    const history = useHistory();
+    const location = useLocation();
+
+    const setQueryParam = ({ history, location, parameter, replace, value }) => {
+        const { search } = location;
+        const queryParams = new URLSearchParams(search);
+
+        queryParams.set(parameter, value);
+        const destination = { search: queryParams.toString() };
+
+        if (replace) {
+            history.replace(destination);
+        } else {
+            history.push(destination);
+        }
+    };
+
+    const setDefaultSubcategoryAndTopFilter = useCallback(
+        (value, searchParam, replace = false) => {
+            // Update the query parameter.
+            setQueryParam({
+                history,
+                location,
+                parameter: searchParam,
+                replace,
+                value: value
+            });
+        },
+        [history, location]
+    );
+
+    // console.log('category category',category)
+
+    useEffect(() => {
+        const { search } = location;
+
+        if (category && category.default_top_filter) {
+            const defaultTopFilter = category.default_top_filter;
+
+            const attrCode = defaultTopFilter.attribute_code;
+            const label = defaultTopFilter.label;
+            const value = defaultTopFilter.value;
+
+            if (!search.includes(attrCode)) {
+                setDefaultSubcategoryAndTopFilter(
+                    label + ',' + value, 
+                    attrCode + '[filter]', 
+                    true
+                );
+            }
+        }
+    }, [category, location, setDefaultSubcategoryAndTopFilter]);
+
     rawFilters && rawFilters.map((filter, index) => {
 
         const filterOptions = [];