@riosst100/pwa-marketplace 3.1.8 → 3.2.0

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

@@ -1,10 +1,11 @@
 import React, { useState, useMemo, Fragment, Suspense, useRef, useEffect } from 'react';
-import { useQuery } from '@apollo/client';
+import { useQuery, useMutation } from '@apollo/client';
 import { FormattedMessage, useIntl } from 'react-intl';
 import { arrayOf, bool, number, shape, string } from 'prop-types';
 import { Form } from 'informed';
 import { Info } from 'react-feather';
 import { useToasts } from '@magento/peregrine/lib';
+import { useUserContext } from '@magento/peregrine/lib/context/user';
 
 import Price from '@magento/venia-ui/lib/components/Price';
 import { useProductFullDetail } from '@magento/peregrine/lib/talons/ProductFullDetail/useProductFullDetail';
@@ -43,6 +44,10 @@ import Collapsible from '@riosst100/pwa-marketplace/src/components/commons/Colla
 import { useLocation } from 'react-router-dom';
 import Icon from '@magento/venia-ui/lib/components/Icon';
 import { ShoppingCart } from 'react-feather';
+import MessagesModal from '@riosst100/pwa-marketplace/src/components/LiveChat/MessagesModal';
+import SellerOperations from '@riosst100/pwa-marketplace/src/talons/Seller/seller.gql';
+
+import AgeVerificationModal from '@riosst100/pwa-marketplace/src/components/AgeVerification/ageVerificationModal';
 
 import { totalListings, lowestPrice } from '@riosst100/pwa-marketplace/src/components/CrossSeller/crossSellerBuy';
 
@@ -113,6 +118,7 @@ const ProductFullDetail = props => {
     } = talonProps;
 
     const [, { addToast }] = useToasts();
+    const [{ isSignedIn }] = useUserContext();
 
     const { formatMessage } = useIntl();
 
@@ -126,6 +132,89 @@ const ProductFullDetail = props => {
 
     const [hoveredMedia, setHoveredMedia] = useState(null);
     const [selectedPaymentType, setSelectedPaymentType] = useState(null);
+    const [isMessagesOpen, setIsMessagesOpen] = useState(false);
+
+    // Messages GraphQL operations
+    const {
+        getCustomerSellerMessages,
+        customerSendMessageMutation,
+        customerReplyMessageMutation,
+        customerDeleteMessageMutation
+    } = SellerOperations;
+
+    const [messageListVars] = 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',
+        variables: messageListVars,
+        pollInterval: 10000,
+        notifyOnNetworkStatusChange: true
+    });
+
+    const [sendMessage] = useMutation(customerSendMessageMutation);
+    const [replyMessage] = useMutation(customerReplyMessageMutation);
+    const [deleteMessage] = useMutation(customerDeleteMessageMutation);
+
+    const handleSendMessage = 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;
+    };
+
+    const handleReplyMessage = 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;
+    };
+
+    const handleDeleteMessage = 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' });
+    };
+
+    const openMessagesModal = () => {
+        if (!isSignedIn) {
+            addToast({
+                type: 'info',
+                message: formatMessage({
+                    id: 'messages.loginRequired',
+                    defaultMessage: 'Please sign in to your account to send a message to the seller.'
+                }),
+                timeout: 3000
+            });
+            return;
+        }
+        setIsMessagesOpen(true);
+    };
+    const closeMessagesModal = () => setIsMessagesOpen(false);
 
     const options = isProductConfigurable(product) ? (
         <Suspense fallback={<ProductOptionsShimmer />}>
@@ -722,6 +811,7 @@ const ProductFullDetail = props => {
         <Fragment>
             {breadcrumbs}
             {productPreviewMessages}
+            {/* <AgeVerificationModal /> */}
             <Form
                 className={classes.root}
                 data-cy="ProductFullDetail-root"
@@ -886,14 +976,14 @@ const ProductFullDetail = props => {
                                                 <div class="flex items-center justify-center gap-[5px] py-1 relative bg-white">
                                                     <div class="flex items-center justify-center gap-[5px] relative">
                                                         <div className='flex flex-wrap items-start gap-4 relative'>
-                                                            <Link to='#' class="flex items-center justify-center gap-[5px] py-1 px-5 relative bg-white rounded-[30px] border border-solid border-[#f76b1c]">
+                                                            <button type="button" onClick={openMessagesModal} class="flex items-center justify-center gap-[5px] py-1 px-5 relative bg-white rounded-[30px] border border-solid border-[#f76b1c]">
                                                                 <div class="flex items-center justify-center gap-[10px] relative">
                                                                     <Sms color="#f76b1c" size={14} variant="Outline" className='stroke-[#f76b1c]' />
                                                                     <div class="relative xs_hidden lg_flex w-fit font-medium text-[#f76b1c] text-[14px] tracking-[0] leading-[20px] whitespace-nowrap">
                                                                         Send Message
                                                                     </div>
                                                                 </div>
-                                                            </Link>
+                                                            </button>
                                                             <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-[#f76b1c]">
                                                                 <div class="flex items-center justify-center gap-[10px] relative">
                                                                     <Shop color="#f76b1c" size={14} variant="Outline" className='stroke-[#f76b1c]' />
@@ -951,6 +1041,16 @@ const ProductFullDetail = props => {
                     <CrossSeller/>
                 </div>
             </section>
+            <MessagesModal
+                isOpen={isMessagesOpen}
+                onClose={closeMessagesModal}
+                messages={messagesData?.customer?.sellerMessages}
+                seller={sellerDetails}
+                onReply={handleReplyMessage}
+                onDelete={handleDeleteMessage}
+                onSend={handleSendMessage}
+                loading={messagesLoading}
+            />
         </Fragment>
     );
 };
@@ -1006,3 +1106,5 @@ ProductFullDetail.propTypes = {
 };
 
 export default ProductFullDetail;
+// Messages modal attached at root to avoid layout shifts
+

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,
 };