@riosst100/pwa-marketplace 3.2.8 → 3.3.0

package/src/components/RFQPage/quoteDetail.js

@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react';
 import { useIntl } from 'react-intl';
 import { StoreTitle } from '@magento/venia-ui/lib/components/Head';
 import Image from '@magento/venia-ui/lib/components/Image';
-import { Link, useParams, useLocation } from 'react-router-dom';
+import { useParams, useLocation, useHistory } from 'react-router-dom';
 import Button from '@magento/venia-ui/lib/components/Button';
 import ChatContent from '../LiveChat/chatContent';
 import cn from 'classnames';
@@ -10,16 +10,52 @@ import { Send } from 'iconsax-react';
 import Price from '@magento/venia-ui/lib/components/Price';
 import { useRFQ } from '@riosst100/pwa-marketplace/src/talons/RFQ/useRFQ';
 import LoadingIndicator from '@magento/venia-ui/lib/components/LoadingIndicator';
+import { useToasts } from '@magento/peregrine/lib';
+import { useCartContext } from '@magento/peregrine/lib/context/cart';
+import {
+    useApolloClient
+} from '@apollo/client';
 
 const quoteDetail = () => {
+    const history = useHistory();
+
     const { formatMessage } = useIntl();
     const { urlKey } = useParams();
     const location = useLocation();
     const locationRfq = location && location.state && location.state.rfq ? location.state.rfq : null;
-    const { loadRfqDetail, rfqDetailState, handleSendRfqMessage, startDetailPolling, stopDetailPolling, handleConvertQuickrfqToCart } = useRFQ();
+    const { fetchCartId, addToCartResponseData, isAddProductLoading, errorAddingProductToCart, loadRfqDetail, rfqDetailState, handleSendRfqMessage, startDetailPolling, stopDetailPolling, handleConvertQuickrfqToCart } = useRFQ();
+
+    const apolloClient = useApolloClient();
+    const [{ createCart, removeCart }] = useCartContext();
+
+    useEffect(async() => {
+        if (
+            addToCartResponseData 
+            && !addToCartResponseData?.addProductsToCart?.user_errors.length 
+            && !isAddProductLoading 
+            && !errorAddingProductToCart
+        ) {
+            try {
+                await removeCart();
+                await apolloClient.clearCacheData(apolloClient, 'cart');
+
+                // masked_cart_id
+                await createCart({ fetchCartId });
+
+                history.push('/checkout');
+            } catch (cleanupErr) {
+                // eslint-disable-next-line no-console
+                console.log(cleanupErr);
+            }
+
+            
+        }
+    }, [history, fetchCartId, apolloClient, removeCart, createCart, addToCartResponseData, errorAddingProductToCart, isAddProductLoading]);
+
     const [messageText, setMessageText] = useState('');
     const [isSending, setIsSending] = useState(false);
     const [sendError, setSendError] = useState(null);
+    
     const detailData = rfqDetailState && rfqDetailState.data ? rfqDetailState.data.quickrfqDetail : null;
     const detailLoading = rfqDetailState ? rfqDetailState.loading : false;
     const detailError = rfqDetailState ? rfqDetailState.error : null;
@@ -27,12 +63,9 @@ const quoteDetail = () => {
         id: 'Quotes.pageTitleTextQuoteDetail',
         defaultMessage: 'Quote Detail'
     });
-
-    // prefer image from info_buy_request if available; otherwise use placeholder
-    const urlImage = 'https://pwa-tcgcollective.local:8255/media/catalog/product/s/-/s-l1600_6__1.jpg?auto=webp&format=pjpg&width=495&height=618.75&fit=cover';
-
-    // Ensure we always pass a valid Int quickrfqId: prefer rfq.quickrfq_id, fallback to route param id
-    // Ensure we always pass a valid Int quickrfqId: prefer route param id, fallback to detailData.quickrfq_id
+    
+    const placeholderImage = 'https://pwa-tcgcollective.local:8255/media/catalog/product/s/-/s-l1600_6__1.jpg?auto=webp&format=pjpg&width=495&height=618.75&fit=cover';
+    
     useEffect(() => {
         if (!locationRfq) {
             const fromParam = urlKey ? parseInt(urlKey, 10) : NaN;
@@ -69,10 +102,20 @@ const quoteDetail = () => {
     const unitValue = pricePerProduct && typeof pricePerProduct.value === 'number' ? pricePerProduct.value : null;
     const qtyNumber = typeof quantity === 'number' ? quantity : (typeof quantity === 'string' ? parseFloat(quantity) : 0);
     const expectedTotal = unitValue !== null && !isNaN(qtyNumber) ? unitValue * qtyNumber : null;
+    // admin suggested fields
+    const adminQtyRaw = rfq && rfq.admin_quantity != null ? rfq.admin_quantity : null;
+    const adminQtyNumber = typeof adminQtyRaw === 'number' ? adminQtyRaw : (typeof adminQtyRaw === 'string' ? parseFloat(adminQtyRaw) : null);
+    const adminPrice = rfq && rfq.admin_price ? rfq.admin_price : null;
+    const adminCurrency = adminPrice && adminPrice.currency ? adminPrice.currency : currency;
+    const adminUnitValue = adminPrice && typeof adminPrice.value === 'number' ? adminPrice.value : null;
+    const adminTotal = adminUnitValue !== null && adminQtyNumber !== null && !isNaN(adminQtyNumber) ? adminUnitValue * adminQtyNumber : null;
     const contactName = rfq && rfq.contact_name ? rfq.contact_name : '-';
     const email = rfq && rfq.email ? rfq.email : '-';
     const phone = rfq && rfq.phone ? rfq.phone : '-';
     const dateNeedQuote = rfq && rfq.date_need_quote ? rfq.date_need_quote : '-';
+    const couponCode = rfq && rfq.coupon_code ? rfq.coupon_code : '-';
+    const sellerName = rfq && rfq.seller_name ? rfq.seller_name : '-';
+    const expiryDate = rfq && rfq.expiry ? rfq.expiry : '-';
 
     const isInitialLoading = detailLoading && !detailData;
     if (isInitialLoading && !locationRfq) {
@@ -147,7 +190,7 @@ const quoteDetail = () => {
                                 }
                             </span>
                             <span className='font-normal block'>
-                                -
+                                {adminQtyNumber !== null && !isNaN(adminQtyNumber) ? adminQtyNumber : '-'} Units
                             </span>
                         </p>
                     </div>
@@ -183,7 +226,13 @@ const quoteDetail = () => {
                                 }
                             </span>
                             <span className='font-normal block'>
-                                -
+                                {adminUnitValue !== null ? (
+                                    <>
+                                        <Price currencyCode={adminCurrency} value={adminUnitValue} /> {' '} Per Unit
+                                    </>
+                                ) : (
+                                    '-'
+                                )}
                             </span>
                         </p>
                     </div>
@@ -217,7 +266,11 @@ const quoteDetail = () => {
                                 }
                             </span>
                             <span className='font-normal block'>
-                                -
+                                {adminTotal !== null ? (
+                                    <Price currencyCode={adminCurrency} value={adminTotal} />
+                                ) : (
+                                    '-'
+                                )} {' '} Units
                             </span>
                         </p>
                     </div>
@@ -232,7 +285,7 @@ const quoteDetail = () => {
                                 }
                             </span>
                             <span className='font-normal block'>
-                                -
+                                {couponCode}
                             </span>
                         </p>
                         <small className='text-[10px] text-gray-600'>
@@ -255,7 +308,7 @@ const quoteDetail = () => {
                                 }
                             </span>
                             <span className='font-normal block'>
-                                -
+                                {sellerName}
                             </span>
                         </p>
                     </div>
@@ -285,7 +338,7 @@ const quoteDetail = () => {
                                 }
                             </span>
                             <span className='font-normal block'>
-                                -
+                                {expiryDate}
                             </span>
                         </p>
                     </div>
@@ -293,8 +346,8 @@ const quoteDetail = () => {
                 <div className='relative flex w-full md_w-6/12 justify-center flex-col mb-10 md_mb-0'>
                     <Image
                         alt='product image'
-                        className="relative max-w-[300px]"
-                        src={urlImage}
+                        className="relative max-w-[200px]"
+                        src={rfq && rfq.image_url ? rfq.image_url : placeholderImage}
                         classes={{
                             root: ' relative self-center mb-5'
                         }}
@@ -316,32 +369,15 @@ const quoteDetail = () => {
                         classes={{
                             content: 'capitalize text-[16px] font-medium'
                         }}
-                        disabled={isConverting || !quickrfqIdValue || isNaN(quickrfqIdValue)}
+                        disabled={isConverting || !quickrfqIdValue || isNaN(quickrfqIdValue) || status === 'Done'}
                         aria-busy={isConverting}
-                        onPress={async () => {
-                            const qid = quickrfqIdValue;
-                            if (!qid || isNaN(qid)) return;
-                            try {
-                                setConvertError(null);
-                                setConvertSuccess(null);
-                                setIsConverting(true);
-                                const res = await handleConvertQuickrfqToCart(qid);
-                                const payload = res && res.data && res.data.convertQuickrfqToCart ? res.data.convertQuickrfqToCart : null;
-                                if (payload && payload.status) {
-                                    setConvertSuccess(payload.message || 'Converted to cart.');
-                                } else {
-                                    setConvertError('Failed to convert quote to cart.');
-                                }
-                            } catch (e) {
-                                setConvertError('Failed to convert quote to cart.');
-                            } finally {
-                                setIsConverting(false);
-                            }
-                        }}
+                        onClick={handleConvertQuickrfqToCart}
                     >
                         {isConverting
                             ? formatMessage({ id: 'Quotes.converting', defaultMessage: 'Add To Cart…' })
-                            : formatMessage({ id: 'Quotes.addToCart', defaultMessage: 'Add To Cart' })}
+                            : status === 'Done'
+                                ? formatMessage({ id: 'Quotes.completed', defaultMessage: 'Completed' })
+                                : formatMessage({ id: 'Quotes.addToCart', defaultMessage: 'Add To Cart' })}
                     </Button>
                     {convertError ? (
                         <div className='text-red-600 text-[12px] mt-2 text-center'>{convertError}</div>

package/src/intercept.js

@@ -234,6 +234,13 @@ module.exports = targets => {
       pattern: "/order-history/view/:urlKey",
       path: require.resolve("./components/OrderDetail/orderDetailPage.js"),
       authed: true,
+    },
+    {
+      exact: true,
+      name: "Messages",
+      pattern: "/messages",
+      path: require.resolve("./components/MessagesPage/index.js"),
+      authed: true,
     }
   ];
 

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

@@ -41,12 +41,13 @@ import ProductLabel from '@riosst100/pwa-marketplace/src/components/ProductLabel
 import RFQ from '@riosst100/pwa-marketplace/src/components/RFQ';
 import LinkToOtherStores from '@riosst100/pwa-marketplace/src/components/LinkToOtherStores';
 import Collapsible from '@riosst100/pwa-marketplace/src/components/commons/Collapsible';
-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 { useLocation, useHistory } from 'react-router-dom';
+
 import AgeVerificationModal from '@riosst100/pwa-marketplace/src/components/AgeVerification/ageVerificationModal';
 
 import { totalListings, lowestPrice } from '@riosst100/pwa-marketplace/src/components/CrossSeller/crossSellerBuy';
@@ -87,6 +88,8 @@ const ProductDetailsCollapsible = (props) => {
 const ProductFullDetail = props => {
     const { product } = props;
 
+    const history = useHistory();
+
     const { search } = useLocation();
 
     const params = new URLSearchParams(search);
@@ -174,7 +177,10 @@ const ProductFullDetail = props => {
             message: formatMessage({ id: 'messages.messageSent', defaultMessage: 'Message sent successfully.' }),
             timeout: 3000
         });
-        await refetchMessages({ fetchPolicy: 'network-only' });
+        if (result) {
+            var messageId = result?.data?.customerSendMessage.message_id;
+            history.push('/messages?id=' + messageId);
+        }
         return result?.data?.customerSendMessage;
     };
 

package/src/talons/MessagesPage/messagesPage.gql.js

@@ -0,0 +1,303 @@
+import { gql } from '@apollo/client';
+
+export const GET_STORE_CONFIG_DATA = gql`
+    query getStoreConfigData {
+        # eslint-disable-next-line @graphql-eslint/require-id-when-available
+        storeConfig {
+            store_code
+            product_url_suffix
+        }
+    }
+`;
+
+export const GET_SELLER_DETAIL_QUERY = gql`
+    query getSellerDetailForSellerPage($urlKey: String!, $getOtherInfo: Boolean, $getProducts: Boolean) {
+        sellerByUrl(seller_url: $urlKey, get_other_info: $getOtherInfo, get_products: $getProducts) {
+            seller_id
+            contact_number
+            shop_title
+            company
+            term_and_conditions
+            website_url
+            ship_to
+            ship_to_country
+            seller_rates {
+                total_count
+                page_info {
+                    current_page
+                    page_size
+                    total_pages
+                }
+                items {
+                    rating_id
+                    seller_id
+                    customer_id
+                    rate1
+                    rate2
+                    rate3
+                    rate4
+                    rate5
+                    rating
+                    email
+                    title
+                    status
+                    detail
+                    nickname
+                    created_at
+                    verified_buyer
+                    is_recommended
+                    is_hidden
+                    answer
+                    admin_note
+                    like_about
+                    not_like_about
+                    guest_email
+                    plus_review
+                    minus_review
+                    report_abuse
+                    country
+                }
+            }
+            products {
+                total_count
+                page_info {
+                    current_page
+                    page_size
+                    total_pages
+                }
+                items {
+                    name
+                    sku
+                }
+            }
+            operating_hours {
+                day
+                status
+                time {
+                    opening_time
+                    closing_time
+                }
+            }
+            store_locators {
+                name
+                country
+                region
+                address_line_1
+                address_line_2
+                city
+                postcode
+                operating_hours {
+                    day
+                    status
+                    time {
+                        opening_time
+                        closing_time
+                    }
+                }
+            }
+            description
+            country
+            image
+            thumbnail
+            city
+            region
+            group
+            group_id
+            url
+            email
+            name
+            sale
+            creation_time
+            page_layout
+            status
+            position
+            twitter_id
+            facebook_id
+            gplus_id
+            youtube_id
+            vimeo_id
+            instagram_id
+            pinterest_id
+            linkedin_id
+            tw_active
+            fb_active
+            gplus_active
+            vimeo_active
+            instagram_active
+            pinterest_active
+            linkedin_active
+            banner_pic
+            shop_url
+            url_key
+            logo_pic
+            verify_status
+            product_count
+            telephone
+            creation_time
+            update_time
+            country_id
+            total_sold
+            operating_time
+            order_processing_time
+            shipping_partners
+            offers
+            benefits
+            product_shipping_info
+            prepare_time
+            response_ratio
+            response_time
+            store_id
+            products {
+                total_count
+                page_info {
+                    page_size
+                    current_page
+                }
+                items {
+                    id
+                    name
+                }
+            }
+        }
+    }
+`;
+
+export const GET_COUPON_CODE_QUERY = gql`
+    query getSellerCoupons(
+        $sellerUrl: String!
+        $pageSize: Int
+        $currentPage: Int
+        $filters: CouponCodeFilterInput
+        ) {
+        sellerCoupons(
+            sellerUrl: $sellerUrl
+            pageSize: $pageSize
+            currentPage: $currentPage
+            filters: $filters
+        ) {
+            items {
+            code
+            coupon_id
+            couponcode_id
+            created_at
+            description
+            discount_amount
+            expiration_date
+            from_date
+            is_active
+            name
+            seller_id
+            times_used
+            to_date
+            type
+            uses_per_customer
+            }
+            page_info {
+            current_page
+            page_size
+            total_pages
+            }
+            total_count
+        }
+    }
+`;
+
+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 {
+                    seller {
+                        name
+                        url_key
+                    }
+                    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/MessagesPage/useMessagesPage.js

@@ -0,0 +1,87 @@
+import { useCallback, useState, useEffect, useMemo } from 'react';
+import { useHistory, useLocation } from 'react-router-dom';
+import mergeOperations from '@magento/peregrine/lib/util/shallowMerge';
+import DEFAULT_OPERATIONS from './messagesPage.gql';
+import { useQuery, useMutation } from '@apollo/client';
+import { useToasts } from '@magento/peregrine/lib';
+import { FormattedMessage, useIntl } from 'react-intl';
+
+export const useMessagesPage = props => {
+    const operations = mergeOperations(DEFAULT_OPERATIONS, null);
+
+    const [, { addToast }] = useToasts();
+    const { formatMessage } = useIntl();
+
+    const {
+        getCustomerSellerMessages,
+        customerSendMessageMutation,
+        customerReplyMessageMutation,
+        customerDeleteMessageMutation
+    } = operations;
+
+    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' });
+    };
+
+    return {
+        messagesData,
+        messagesLoading,
+        handleReplyMessage,
+        handleDeleteMessage,
+        handleSendMessage
+    };
+};