@riosst100/pwa-marketplace 3.1.9 → 3.2.1

package/src/overwrites/venia-ui/lib/components/StoreCodeRoute/storeCodeRoute.js

@@ -1,10 +1,10 @@
-// import { useEffect, useMemo } from 'react';
-// import { useHistory } from 'react-router-dom';
-// import { BrowserPersistence } from '@magento/peregrine/lib/util';
-// import { useCartContext } from '@magento/peregrine/lib/context/cart';
-// import { useApolloClient, useQuery } from '@apollo/client';
+import { useEffect, useMemo } from 'react';
+import { useHistory } from 'react-router-dom';
+import { BrowserPersistence } from '@magento/peregrine/lib/util';
+import { useCartContext } from '@magento/peregrine/lib/context/cart';
+import { useApolloClient, useQuery } from '@apollo/client';
 
-// const storage = new BrowserPersistence();
+const storage = new BrowserPersistence();
 
 /**
  * This component checks for use of a store code in the url that is not the
@@ -12,42 +12,42 @@
  * and reloads the page so that they are used in the graphQL headers.
  */
 const StoreCodeRoute = () => {
-    // const history = useHistory();
+    const history = useHistory();
 
-    // const websiteCodes = [];
-    // const websiteStores = useMemo(() => ({}), []);
-    // const storeCurrencies = useMemo(() => ({}), []);
-    // const storeSecureBaseMediaUrl = useMemo(() => ({}), []);
+    const websiteCodes = [];
+    const websiteStores = useMemo(() => ({}), []);
+    const storeCurrencies = useMemo(() => ({}), []);
+    const storeSecureBaseMediaUrl = useMemo(() => ({}), []);
 
-    // AVAILABLE_WEBSITES.forEach(store => {
-    //     websiteCodes.push(store.website_code);
-    //     websiteStores[store.website_code] = store.store_code;
-    //     storeCurrencies[store.store_code] = store.default_display_currency_code;
-    //     storeSecureBaseMediaUrl[store.store_code] = store.secure_base_media_url;
-    // });
+    AVAILABLE_WEBSITES.forEach(store => {
+        websiteCodes.push(store.website_code);
+        websiteStores[store.website_code] = store.store_code;
+        storeCurrencies[store.store_code] = store.default_display_currency_code;
+        storeSecureBaseMediaUrl[store.store_code] = store.secure_base_media_url;
+    });
 
-    // // Sort by length (longest first) to avoid false hits ie "en" matching just
-    // // the "/en" in "/en-us/home.html" when "en-us" is also in storeCodes.
-    // websiteCodes.sort((a, b) => b.length - a.length);
+    // Sort by length (longest first) to avoid false hits ie "en" matching just
+    // the "/en" in "/en-us/home.html" when "en-us" is also in storeCodes.
+    websiteCodes.sort((a, b) => b.length - a.length);
 
-    // // Find the store code in the url. This will always be the first path.
-    // // ie `https://example.com/fr/foo/baz.html` => `fr`.
-    // const { location } = globalThis;
-    // const match = location && location.pathname.split("/")[1];
-    // let websiteCodeInUrl = websiteCodes.find((str) => str === match);
+    // Find the store code in the url. This will always be the first path.
+    // ie `https://example.com/fr/foo/baz.html` => `fr`.
+    const { location } = globalThis;
+    const match = location && location.pathname.split("/")[1];
+    let websiteCodeInUrl = websiteCodes.find((str) => str === match);
 
-    // // Determine what the current store code is using the configured basename.
-    // const currentWebsiteCode = storage && storage.getItem('website_code') || process.env.WEBSITE_CODE;
+    // Determine what the current store code is using the configured basename.
+    const currentWebsiteCode = storage && storage.getItem('website_code') || process.env.WEBSITE_CODE;
 
     
 
     // If we find a store code in the url that is not the current one, update
     // the storage value and refresh so that we start using the new code.
-    // useEffect(() => {
-    //     if (!websiteCodeInUrl) {
-    //         history.replace(location.pathname + location.search)
-    //     } else if (websiteCodeInUrl && websiteCodeInUrl !== currentWebsiteCode) {
-    //         const storeCodeInUrl = websiteStores[websiteCodeInUrl];
+    useEffect(() => {
+        if (!websiteCodeInUrl) {
+            history.replace(location.pathname + location.search)
+        } else if (websiteCodeInUrl && websiteCodeInUrl !== currentWebsiteCode) {
+            const storeCodeInUrl = websiteStores[websiteCodeInUrl];
 
             // alert(storeCodeInUrl)
 
@@ -63,31 +63,33 @@ const StoreCodeRoute = () => {
 
             // await apolloClient.clearCacheData(apolloClient, 'cart');
             // await removeCart();
-
-            // storage.setItem('store_view_code', storeCodeInUrl);
-            // storage.setItem('website_code', websiteCodeInUrl);
-            // storage.setItem(
-            //     'store_view_currency',
-            //     storeCurrencies[storeCodeInUrl]
-            // );
-            // storage.setItem(
-            //     'store_view_secure_base_media_url',
-            //     storeSecureBaseMediaUrl[storeCodeInUrl]
-            // );
+            alert('22ok')
+            storage.removeItem('cartId');
+
+            storage.setItem('store_view_code', storeCodeInUrl);
+            storage.setItem('website_code', websiteCodeInUrl);
+            storage.setItem(
+                'store_view_currency',
+                storeCurrencies[storeCodeInUrl]
+            );
+            storage.setItem(
+                'store_view_secure_base_media_url',
+                storeSecureBaseMediaUrl[storeCodeInUrl]
+            );
 
             // We're required to reload the page as the basename doesn't
             // change entirely without a full page reload.
             // history.go(0);
-    //     }
-    // }, [
-    //     websiteCodeInUrl,
-    //     // currentWebsiteCode,
-    //     history
-    //     // , apolloClient, removeCart
-    //     // storeCodeInUrl,
-    //     // storeCurrencies,
-    //     // storeSecureBaseMediaUrl
-    // ]);
+        }
+    }, [
+        websiteCodeInUrl,
+        // currentWebsiteCode,
+        history
+        // , apolloClient, removeCart
+        // storeCodeInUrl,
+        // storeCurrencies,
+        // storeSecureBaseMediaUrl
+    ]);
 
     return null;
 };

package/src/talons/HelpCenter/helpCenter.gql.js

@@ -32,45 +32,56 @@ export const FAQ_CATEGORIES = gql`
 `;
 
 export const FAQ_QUESTIONS = gql`
-    query faqQuestions {
-        faqQuestions {
-            _first_store_id
-            animation_class
-            animation_speed
-            answer
-            author_email
-            author_name
-            body_bg
-            body_color
-            body_size
-            border_width
-            creation_time
-            disklike
-            is_active
-            is_featured
-            like
-            meta_description
-            meta_keywords
-            page_title
-            question_active_icon
-            question_icon
-            question_id
-            question_margin
-            question_position
-            question_type
-            question_url
-            store_code
-            store_id
-            tags
-            title
-            title_bg
-            title_bg_active
-            title_border_color
-            title_border_radius
-            title_color
-            title_color_active
-            title_size
-            update_time
+    query faqQuestions(
+        $search: String
+        $pageSize: Int
+        $currentPage: Int
+    ) {
+        faqQuestions(search: $search, pageSize: $pageSize, currentPage: $currentPage) {
+            items {
+                _first_store_id
+                animation_class
+                animation_speed
+                answer
+                author_email
+                author_name
+                body_bg
+                body_color
+                body_size
+                border_width
+                creation_time
+                disklike
+                is_active
+                is_featured
+                like
+                meta_description
+                meta_keywords
+                page_title
+                question_active_icon
+                question_icon
+                question_id
+                question_margin
+                question_position
+                question_type
+                question_url
+                store_code
+                store_id
+                tags
+                title
+                title_bg
+                title_bg_active
+                title_border_color
+                title_border_radius
+                title_color
+                title_color_active
+                title_size
+                update_time
+            }
+            page_info {
+                current_page
+                total_pages
+            }
+            total_count
         }
     }
 `;

package/src/talons/HelpCenter/useHelpCenter.js

@@ -1,12 +1,19 @@
-import { useMemo } from 'react';
+import { useEffect, useMemo } from 'react';
 import { useIntl } from 'react-intl';
-import { useQuery } from '@apollo/client';
+import { useQuery, useLazyQuery } from '@apollo/client';
 import mergeOperations from '@magento/peregrine/lib/util/shallowMerge';
 import DEFAULT_OPERATIONS from './helpCenter.gql';
+import { usePagination } from '@magento/peregrine/lib/hooks/usePagination';
 
-export const useHelpCenter = (props = {}) => {
+export const useHelpCenter = (props) => {
     const { formatMessage } = useIntl();
 
+    const { searchQuery, pageSize = 10 } = props;
+
+    const [paginationValues, paginationApi] = usePagination();
+    const { currentPage = 1, totalPages } = paginationValues;
+    const { setCurrentPage, setTotalPages } = paginationApi;
+
     const operations = mergeOperations(DEFAULT_OPERATIONS, props.operations);
 
     const {
@@ -23,13 +30,45 @@ export const useHelpCenter = (props = {}) => {
         fetchPolicy: 'cache-and-network'
     });
 
-    const {
+    // const {
+    //     data: questionsData,
+    //     loading: questionsLoading,
+    //     error: questionsError
+    // } = useQuery(faqQuestionsQuery, {
+    //     fetchPolicy: 'cache-and-network',
+    //     nextFetchPolicy: 'cache-first',
+    //     variables: {
+    //         search: searchQuery,
+    //         pageSize: 20,
+    //         currentPage: 1
+    //     },
+    // });
+
+    console.log('searchQuery',searchQuery)
+
+    const [runQuery, {
         data: questionsData,
         loading: questionsLoading,
         error: questionsError
-    } = useQuery(faqQuestionsQuery, {
-        fetchPolicy: 'cache-and-network'
+    }] = useLazyQuery(faqQuestionsQuery, {
+        fetchPolicy: 'cache-and-network',
+        nextFetchPolicy: 'cache-first'
     });
+    
+    useEffect(() => {
+        runQuery({
+            variables: {
+                pageSize: pageSize,
+                currentPage: currentPage,
+                search: searchQuery
+            }
+        });
+    }, [
+        runQuery,
+        pageSize,
+        currentPage,
+        searchQuery
+    ]);
 
     const {
         data: tagsData,
@@ -44,14 +83,35 @@ export const useHelpCenter = (props = {}) => {
 
     const data = useMemo(() => ({
         categories: categoriesData?.faqCategories || [],
-        questions: questionsData?.faqQuestions || [],
+        questions: questionsData?.faqQuestions.items || [],
         tags: tagsData?.faqTags || []
     }), [categoriesData, questionsData, tagsData]);
 
+    const totalPagesFromData = questionsData
+        ? questionsData.faqQuestions?.page_info?.total_pages
+        : null;
+
+    useEffect(() => {
+        setTotalPages(totalPagesFromData);
+        return () => {
+            setTotalPages(null);
+        };
+    }, [setTotalPages, totalPagesFromData]);
+
+    const pageControl = {
+        currentPage,
+        setPage: setCurrentPage,
+        totalPages
+    };
+
+    console.log('pageControl',pageControl)
+
     return {
         loading,
         error,
         data,
+        totalPagesFromData,
+        pageControl,
         formatMessage
     };
 };

package/src/talons/Seller/seller.gql.js

@@ -202,8 +202,98 @@ export const GET_COUPON_CODE_QUERY = gql`
     }
 `;
 
+export const GET_CUSTOMER_SELLER_MESSAGES = gql`
+    query GetCustomerSellerMessages(
+        $pageSize: Int!
+        $currentPage: Int!
+        $filter: SellerMessageFilterInput
+        $sort: SellerMessageSortInput
+    ) {
+        customer {
+            sellerMessages(
+                pageSize: $pageSize
+                currentPage: $currentPage
+                filter: $filter
+                sort: $sort
+            ) {
+                total_count
+                page_info {
+                    current_page
+                    page_size
+                    total_pages
+                }
+                items {
+                    message_id
+                    subject
+                    description
+                    sender_email
+                    sender_name
+                    created_at
+                    status
+                    is_read
+                    sender_id
+                    owner_id
+                    receiver_id
+                    seller_send
+                    details(pageSize: 500, currentPage: 1) {
+                        total_count
+                        items {
+                            content
+                            sender_name
+                            sender_email
+                            receiver_name
+                            is_read
+                            created_at
+                        }
+                    }
+                }
+            }
+        }
+    }
+`;
+
+export const CUSTOMER_SEND_MESSAGE_MUTATION = gql`
+    mutation CustomerSendMessage($input: CustomerMessageInput!) {
+        customerSendMessage(input: $input) {
+            message_id
+            subject
+            description
+            sender_name
+            sender_email
+            created_at
+            status
+        }
+    }
+`;
+
+export const CUSTOMER_REPLY_MESSAGE_MUTATION = gql`
+    mutation CUSTOMER_REPLY_MESSAGE_MUTATION($input: ReplyMessageInput!) {
+        customerReplyMessage(input: $input) {
+            content
+            sender_name
+            sender_email
+            receiver_name
+            is_read
+            created_at
+        }
+    }
+`;
+
+export const CUSTOMER_DELETE_MESSAGE_MUTATION = gql`
+    mutation CustomerDeleteMessage($id: Int!) {
+        customerDeleteMessage(message_id: $id) {
+            message
+            code
+        }
+    }
+`;
+
 export default {
     getStoreConfigData: GET_STORE_CONFIG_DATA,
     getSellerDetailQuery: GET_SELLER_DETAIL_QUERY,
     getCouponCodeQuery: GET_COUPON_CODE_QUERY,
+    getCustomerSellerMessages: GET_CUSTOMER_SELLER_MESSAGES,
+    customerSendMessageMutation: CUSTOMER_SEND_MESSAGE_MUTATION,
+    customerReplyMessageMutation: CUSTOMER_REPLY_MESSAGE_MUTATION,
+    customerDeleteMessageMutation: CUSTOMER_DELETE_MESSAGE_MUTATION,
 };

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/SellerProducts/useProductContent.js

@@ -62,8 +62,8 @@ export const useProductContent = props => {
         }
     );
 
-    console.log('categoryData',categoryData)
-    console.log('categoryId',categoryId)
+    // console.log('categoryData',categoryData)
+    // console.log('categoryId',categoryId)
 
     const [, { dispatch }] = useEventingContext();
 
@@ -99,7 +99,7 @@ export const useProductContent = props => {
         categoryData && categoryData.categories.items.length
             ? categoryData.categories.items[0]
             : null;
-            console.log('categorycategory',category)
+            // console.log('categorycategory',category)
     const children =
         categoryData && categoryData.categories.items.length
             ? categoryData.categories.items[0].children
@@ -138,7 +138,7 @@ export const useProductContent = props => {
         [history, location]
     );
 
-    console.log('category category',category)
+    // console.log('category category',category)
 
     useEffect(() => {
         const { search } = location;