@riosst100/pwa-marketplace 3.2.6 → 3.2.8

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@riosst100/pwa-marketplace",
   "author": "riosst100@gmail.com",
-  "version": "3.2.6",
+  "version": "3.2.8",
   "main": "src/index.js",
   "pwa-studio": {
     "targets": {

package/src/components/BecomeSeller/becomeSeller.js

@@ -243,8 +243,8 @@ const BecomeSeller = props => {
                     <label className='text-left text-xs font-normal text-gray-400 mt-2'>
                         <FormattedMessage
                             id={'becomeSeller.urlNotes'}
-                            defaultMessage={`Please enter a valid Store URL (Ex: "tcg-collective").
-                                Your Store URL will be https://tcg.com/seller/tcg-collective.html`}
+                            defaultMessage={`Please enter a valid Store URL (Ex: "tcg-store").
+                                Your Store URL will be https://tcgcollective.co/seller/tcg-store`}
                         />
                     </label>
                 </Field>

package/src/components/LiveChat/MessagesModal.js

@@ -169,11 +169,11 @@ const MessagesModal = ({
             }}
         >
             <div
-                className='bg-white rounded-[6px] shadow-lg w-full max-w-[960px] p-5'
+                className='bg-white rounded-[6px] shadow-lg w-full max-w-[500px] p-5'
                 onClick={(e) => e.stopPropagation()}
             >
                 <div className='flex items-center justify-between mb-3'>
-                    <h3 className='text-[18px] font-semibold'>{formatMessage({ id: 'messages.titleWithSeller', defaultMessage: 'Conversation with' })} {seller?.name}</h3>
+                    <h3 className='text-[18px] font-semibold'>{formatMessage({ id: 'messages.titleWithSeller', defaultMessage: 'Start Conversation With ' })} {seller?.name}</h3>
                     <button onClick={onClose} aria-label='Close' className='text-gray-600 text-[30px] hover:text-black'>×</button>
                 </div>
                 <div className='flex gap-4'>
@@ -190,7 +190,7 @@ const MessagesModal = ({
                                     }}
                                     className='text-[12px] px-2 py-1 rounded border border-[#FF6E26] text-[#FF6E26] hover:bg-[#FF6E26] hover:text-white'
                                 >
-                                    {formatMessage({ id: 'messages.compose.newMessage', defaultMessage: 'Create New Message' })}
+                                    {formatMessage({ id: 'messages.compose.newMessage', defaultMessage: 'Send New Message' })}
                                 </button>
                             </div>
                             <div className='max-h-[420px] overflow-y-auto'>
@@ -222,7 +222,7 @@ const MessagesModal = ({
                     <div className='flex-1 flex flex-col'>
                         {/* Compose new message (shown only when composing OR when no thread exists) */}
                         {(isComposing || sortedThreads.length === 0) && (
-                            <form onSubmit={handleSubmitNewMessage} className='mb-3 border rounded-[6px] p-3 flex flex-col gap-2'>
+                            <form onSubmit={handleSubmitNewMessage} className='mb-3 rounded-[6px] p-1 flex flex-col gap-2'>
                                 <div className='text-[13px] font-semibold flex items-center justify-between'>
                                     <span>{formatMessage({ id: 'messages.compose.header', defaultMessage: 'Create New Message' })}</span>
                                     {(sortedThreads.length > 0) && (
@@ -237,14 +237,14 @@ const MessagesModal = ({
                                 </div>
                                 <input
                                     type='text'
-                                    className='border rounded px-3 py-2 outline-none focus:ring-2 focus:ring-[#FF6E26]'
+                                    className='border border-gray-100 rounded px-3 py-2 outline-none focus:ring-2 focus:ring-[#FF6E26]'
                                     placeholder={formatMessage({ id: 'messages.compose.subjectPlaceholder', defaultMessage: 'Subject' })}
                                     value={newSubject}
                                     onChange={(e) => setNewSubject(e.target.value)}
                                 />
                                 <textarea
                                     rows={3}
-                                    className='border rounded px-3 py-2 outline-none focus:ring-2 focus:ring-[#FF6E26]'
+                                    className='border border-gray-100 rounded px-3 py-2 outline-none focus:ring-2 focus:ring-[#FF6E26]'
                                     placeholder={formatMessage({ id: 'messages.compose.contentPlaceholder', defaultMessage: 'Write a message to the seller…' })}
                                     value={newContent}
                                     onChange={(e) => setNewContent(e.target.value)}

package/src/components/LiveChat/liveChat.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
 import cn from 'classnames';
-import { ArrowSquareDown } from 'iconsax-react';
+import { Messages3 } from 'iconsax-react';
 import ChatContent from './chatContent';
 import { Send } from 'iconsax-react';
 import Button from '@magento/venia-ui/lib/components/Button';
@@ -71,68 +71,38 @@ const liveChat = (props) => {
     const { open, setOpen, chatData } = props;
     const [{ isSignedIn }] = useUserContext();
 
-    const dataTabs =
-        [
-            {
-                id: isSignedIn ? 'login-chat' : 'guest-chat',
-                title: isSignedIn ? 'Login Chat' : 'Guest Chat',
-                content: <ChatContentComponent chatData={chatData} />
-            },
-            {
-                id: !isSignedIn ? 'login-chat' : 'guest-chat',
-                title: !isSignedIn ? 'Login Chat' : 'Guest Chat',
-                content: isSignedIn ? <ChatContentComponent chatData={chatData} /> : <LoginComponent />
-            }
-        ];
-
     return (
         <>
             <div
                 className={cn(
-                    'bg-white flex flex-col w-full max-w-[380px] h-[520px] fixed right-6 animate-anima-slide-up z-50 shadow-type-1',
-                    open ? 'animate-anima-slide-up bottom-0' : 'animate-anima-slide-down bottom-[-468px]'
+                    'flex flex-col w-full max-w-[150px] fixed z-50',
+                    'bottom-[30px] right-[30px]'
                 )}
             >
-                <div
-                    className='bg-darkblue-900 p-4 rounded-t-md cursor-pointer flex justify-between items-center'
-                    onClick={() => setOpen(!open)}
+                <Link
+                    className='bg-darkblue-900 p-4 px-6 rounded-[40px] cursor-pointer flex justify-between items-center'
+                    to={'/messages'}
                 >
                     <span className='text-white font-medium'>
                         <FormattedMessage
-                            id={'chat.ChatWith'}
+                            id={'chat.messageButton'}
                             defaultMessage={
-                                'Chat with Gundam Info'
+                                'Messages'
                             }
                         />
                     </span>
                     <span>
-                        <ArrowSquareDown
-                            size="14"
+                        <Messages3
+                            size="24"
                             className={
                                 cn(
-                                    'transition-all text-white',
-                                    open ? 'rotate-180' : '',
+                                    'transition-all text-white'
                                 )
                             }
                         />
                     </span>
 
-                </div>
-                <div
-                    className={cn(
-                        'border border-gray-100 p-4 w-full h-full flex flex-col gap-3',
-                        'max-h-[468px]'
-                    )}
-                >
-                    <Tabs
-                        data={dataTabs}
-                        tabContentWrapperClassName='!p-0 h-full'
-                        hasContent
-                        tabWrapperClassName='justify-around'
-                        rootClassName="mb-0"
-                        tabTitleClassName="pt-0 pb-2 text-[12px]"
-                    />
-                </div>
+                </Link>
             </div>
             <style jsx="true">
                 {`

package/src/components/RFQPage/quoteDetail.js

@@ -13,7 +13,7 @@ import LoadingIndicator from '@magento/venia-ui/lib/components/LoadingIndicator'
 
 const quoteDetail = () => {
     const { formatMessage } = useIntl();
-    const { id } = useParams();
+    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();
@@ -31,15 +31,20 @@ const quoteDetail = () => {
     // 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
     useEffect(() => {
         if (!locationRfq) {
-            const parsedId = id ? parseInt(id, 10) : NaN;
-            if (!isNaN(parsedId)) {
-                const variables = { quickrfqId: parsedId };
-                loadRfqDetail(variables);
+            const fromParam = urlKey ? parseInt(urlKey, 10) : NaN;
+            const fromData = detailData && detailData.quickrfq_id
+                ? (typeof detailData.quickrfq_id === 'number' ? detailData.quickrfq_id : parseInt(detailData.quickrfq_id, 10))
+                : NaN;
+            const finalId = !isNaN(fromParam) ? fromParam : fromData;
+            if (!isNaN(finalId)) {
+                loadRfqDetail({ quickrfqId: finalId });
             }
         }
-    }, [id, locationRfq, loadRfqDetail]);
+    }, [urlKey, detailData, locationRfq, loadRfqDetail]);
 
     // start polling messages every 5s while on detail page; stop on unmount
     useEffect(() => {
@@ -50,7 +55,9 @@ const quoteDetail = () => {
     }, [startDetailPolling, stopDetailPolling]);
 
     const rfq = locationRfq || detailData || {};
-    const quickrfqIdValue = rfq && rfq.quickrfq_id ? (typeof rfq.quickrfq_id === 'number' ? rfq.quickrfq_id : parseInt(rfq.quickrfq_id, 10)) : (id ? parseInt(id, 10) : null);
+    const quickrfqIdValue = rfq && rfq.quickrfq_id
+        ? (typeof rfq.quickrfq_id === 'number' ? rfq.quickrfq_id : parseInt(rfq.quickrfq_id, 10))
+        : (urlKey ? parseInt(urlKey, 10) : null);
     const [isConverting, setIsConverting] = useState(false);
     const [convertError, setConvertError] = useState(null);
     const [convertSuccess, setConvertSuccess] = useState(null);
@@ -95,7 +102,7 @@ const quoteDetail = () => {
         <div className='relative grid gap-y-md'>
             <StoreTitle>{PAGE_TITLE}</StoreTitle>
             <div aria-live="polite" className="text-xl font-medium text-left">
-                {PAGE_TITLE} - #{id}
+                {PAGE_TITLE} - #{quickrfqIdValue}
             </div>
             <div className='rounded-md border border-gray-100 px-4 py-6 flex flex-col-reverse md_flex-row justify-between gap-x-10'>
                 <div className='flex flex-col gap-y-4 w-full md_w-6/12'>

package/src/components/SellerMegaMenu/sellerMegaMenu.js

@@ -16,6 +16,8 @@ const SellerMegaMenu = (props) => {
     const { rootClassName, seller, sellerMegaMenuItemClassname, titleClassName } = props
     const mainNavRef = useRef(null);
 
+    const sellerUrl = seller.url_key;
+
     const classes = useStyle(defaultClasses, props.classes);
     // const rootClass = cn(classes.sellerMegaMenu, rootClassName);
     const rootClass = cn('flex items-end gap-[40px] px-[30px] py-0 rounded-[6px] border border-solid border-gray-100 xs_hidden xl_flex flex-grow justify-self-center', rootClassName);
@@ -29,7 +31,7 @@ const SellerMegaMenu = (props) => {
         categoryUrlSuffix,
         handleNavigate,
         handleClickOutside
-    } = useSellerMegaMenu({ mainNavRef });
+    } = useSellerMegaMenu({ mainNavRef, sellerUrl });
     
     // const allowedCategoryUids = props.allowedCategoryUids || ['NTI=', 'NTA=', 'NTM=', 'MjY='];
 

package/src/components/SellerMegaMenu/sellerMegaMenuItem.js

@@ -116,7 +116,7 @@ const SellerMegaMenuItem = props => {
                     'flex items-center'
                 )}
                 data-cy="SellerMegaMenu-SellerMegaMenuItem-link"
-                to={'/seller/' + seller?.url_key + categoryUrl}
+                to={isActive ? '#' : '/seller/' + seller?.url_key + categoryUrl}
             >
                 {category.name}
             </Link>

package/src/components/SellerMegaMenu/sellerMegaMenuItem.module.css

@@ -11,7 +11,8 @@
 
 .sellerMegaMenuLinkActive {
     composes: sellerMegaMenuLink;
-    composes: underline from global;
+    /* composes: underline from global; */
+    font-weight: bold;
 }
 
 .sellerMegaMenuItem_active {

package/src/overwrites/venia-ui/lib/components/Footer/footer.js

@@ -1,11 +1,11 @@
-import React, { Fragment } from 'react';
+import React, { useState, Fragment } from 'react';
 import { Facebook, Instagram, Twitter, Linkedin } from 'react-feather';
 import { FormattedMessage, useIntl } from 'react-intl';
 import { Link } from 'react-router-dom';
 import { shape, string } from 'prop-types';
 import { useFooter } from '@magento/peregrine/lib/talons/Footer/useFooter';
 import { useLocation } from 'react-router-dom';
-
+import LiveChat from '@riosst100/pwa-marketplace/src/components/LiveChat';
 import Logo from '@magento/venia-ui/lib/components/Logo';
 import Newsletter from '@magento/venia-ui/lib/components/Newsletter';
 import { useStyle } from '@magento/venia-ui/lib/classify';
@@ -14,12 +14,17 @@ import { DEFAULT_LINKS, LOREM_IPSUM } from './sampleData';
 import resourceUrl from '@magento/peregrine/lib/util/makeUrl';
 import cn from 'classnames';
 import Divider from '@riosst100/pwa-marketplace/src/components/Divider';
-
+import Button from '@magento/venia-ui/lib/components/Button';
 const Footer = props => {
     const { links } = props;
     const classes = useStyle(defaultClasses, props.classes);
     const talonProps = useFooter();
 
+    const [openChat, setOpenChat] = useState(false);
+    const toggleChat = () => {
+        setOpenChat(!openChat);
+    }
+
     const location = useLocation();
     const isCheckoutPage = location.pathname === '/checkout';
 
@@ -86,6 +91,10 @@ const Footer = props => {
                 }
             }
         >
+            <LiveChat
+                open={openChat}
+                setOpen={setOpenChat}
+            />
             {!isCheckoutPage && <div className={classes.links} style={{"display":"flex"}}>
                 {linkGroups}
                 {/* <div>

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 getSellerMegaMenu {
+    query getSellerMegaMenu($sellerUrl: String!) {
         # eslint-disable-next-line @graphql-eslint/require-id-when-available
-        sellerCategories {
+        sellerCategories(sellerUrl: $sellerUrl) {
             uid
             name
             # eslint-disable-next-line @graphql-eslint/require-id-when-available
@@ -79,11 +79,12 @@ export const GET_MEGA_MENU = gql`
                     }
                 }
             }
+            __typename
         }
     }
 `;
 
 export default {
-    getMegaMenuQuery: GET_MEGA_MENU,
+    getSellerMegaMenuQuery: GET_MEGA_MENU,
     getStoreConfigQuery: GET_STORE_CONFIG_DATA
 };

package/src/talons/SellerMegaMenu/useSellerMegaMenu.js

@@ -20,10 +20,11 @@ import DEFAULT_OPERATIONS from './megaMenu.gql';
  */
 export const useSellerMegaMenu = (props = {}) => {
     const operations = mergeOperations(DEFAULT_OPERATIONS, props.operations);
-    const { getMegaMenuQuery, getStoreConfigQuery } = operations;
+    const { getSellerMegaMenuQuery, getStoreConfigQuery } = operations;
 
     const location = useLocation();
     const [activeCategoryId, setActiveCategoryId] = useState(null);
+    const [activeCategory, setActiveCategory] = useState(null);
     const [sellerSubMenuState, setSellerSubMenuState] = useState(false);
     const [disableFocus, setDisableFocus] = useState(false);
 
@@ -32,9 +33,11 @@ export const useSellerMegaMenu = (props = {}) => {
         nextFetchPolicy: 'cache-first'
     });
 
-    const { data } = useQuery(getMegaMenuQuery, {
-        fetchPolicy: 'cache-and-network',
-        nextFetchPolicy: 'cache-first'
+    const { sellerUrl } = props;
+
+    const { data } = useQuery(getSellerMegaMenuQuery, {
+        variables: { sellerUrl: sellerUrl },
+        fetchPolicy: 'cache-and-network'
     });
 
     const categoryUrlSuffix = useMemo(() => {
@@ -66,7 +69,7 @@ export const useSellerMegaMenu = (props = {}) => {
 
             const categoryUrlPath = `/${url_path}${categoryUrlSuffix || ''}`;
 
-            return location.pathname === categoryUrlPath;
+            return location.pathname.includes(categoryUrlPath);
         },
         [location.pathname, categoryUrlSuffix]
     );
@@ -119,6 +122,29 @@ export const useSellerMegaMenu = (props = {}) => {
 
     const history = useHistory();
 
+    const setQueryPath = ({ history, location, pathname, replace }) => {
+        // const { pathname } = location;
+        
+        const destination = { pathname: pathname };
+
+        if (replace) {
+            history.replace(destination);
+        }
+    };
+
+    const setDefaultCategory = useCallback(
+        (pathname) => {
+            // Update the query parameter.
+            setQueryPath({
+                history,
+                location,
+                pathname,
+                replace: true
+            });
+        },
+        [history, location]
+    );
+
     const setQueryParam = ({ history, location, parameter, replace, value }) => {
         const { search } = location;
         const queryParams = new URLSearchParams(search);
@@ -147,25 +173,19 @@ export const useSellerMegaMenu = (props = {}) => {
         [history, location]
     );
 
-    useEffect(() => {
-        const { search } = location;
+    const hasCategoryPath = (pathname) => {
+        // const pathname = new URL(url).pathname;
+        const parts = pathname.split("/").filter(Boolean);
 
-        // if (category && category.default_top_filter) {
-        //     const defaultTopFilter = category.default_top_filter;
+        // cari index "seller"
+        const sellerIndex = parts.indexOf("seller");
 
-        //     const attrCode = defaultTopFilter.attribute_code;
-        //     const label = defaultTopFilter.label;
-        //     const value = defaultTopFilter.value;
+        if (sellerIndex === -1) return false;
 
-        //     if (!search.includes(attrCode)) {
-        //         setDefaultSubcategoryAndTopFilter(
-        //             label + ',' + value, 
-        //             attrCode + '[filter]', 
-        //             true
-        //         );
-        //     }
-        // }
-    }, [category, location, setDefaultSubcategoryAndTopFilter]);
+        // seller/<store-name> → minimal 2 segment
+        // kalau lebih dari itu → ada category path
+        return parts.length > sellerIndex + 2;
+    }
 
     const findActiveCategory = useCallback(
         (pathname, category) => {
@@ -182,6 +202,59 @@ export const useSellerMegaMenu = (props = {}) => {
         [isActive]
     );
 
+    useEffect(() => {
+        const activeCategory = findActiveCategory(
+            location.pathname,
+            megaMenuData
+        );
+
+        if (activeCategory) {
+            setActiveCategoryId(activeCategory.path[0]);
+            setActiveCategory(activeCategory);
+        } else {
+            setActiveCategoryId(null);
+            setActiveCategory(null);
+        }
+    }, [findActiveCategory, location.pathname, megaMenuData]);
+
+    useEffect(() => {
+        const { search, pathname } = location;
+
+        if (!hasCategoryPath(pathname) && category && category.url_path) {
+            const url_path = category.url_path;
+            const categoryUrlPath = `/${url_path}${categoryUrlSuffix || ''}`;
+            const newPathname = pathname.replace(/\/+$/, "");
+
+            if (!newPathname.includes(categoryUrlPath)) {
+                setDefaultCategory(
+                    newPathname + categoryUrlPath
+                );
+            }
+        }
+    }, [category, location, setDefaultCategory]);
+
+    useEffect(() => {
+        const { search } = location;
+
+        if (activeCategory && activeCategory.default_top_filter) {
+            const defaultTopFilter = activeCategory.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
+                );
+            }
+        }
+    }, [activeCategory, location, setDefaultSubcategoryAndTopFilter]);
+
+   
+
     const handleClickOutside = e => {
         if (!props.mainNavRef.current.contains(e.target)) {
             setSellerSubMenuState(false);
@@ -195,18 +268,7 @@ export const useSellerMegaMenu = (props = {}) => {
         setSellerSubMenuState(true);
     }, [setSellerSubMenuState]);
 
-    useEffect(() => {
-        const activeCategory = findActiveCategory(
-            location.pathname,
-            megaMenuData
-        );
-
-        if (activeCategory) {
-            setActiveCategoryId(activeCategory.path[0]);
-        } else {
-            setActiveCategoryId(null);
-        }
-    }, [findActiveCategory, location.pathname, megaMenuData]);
+    
 
     /**
      * Sets next root component to show proper loading effect

package/src/talons/SellerMegaMenu/useSellerMegaMenuItem.js

@@ -4,7 +4,7 @@ export const useSellerMegaMenuItem = props => {
     const { category, activeCategoryId, sellerSubMenuState, disableFocus } = props;
 
     const [isFocused, setIsFocused] = useState(false);
-    const isActive = category.id === activeCategoryId;
+    const isActive = category.uid === activeCategoryId;
 
     const handleMenuItemFocus = useCallback(() => {
         setIsFocused(true);

package/src/talons/SellerProducts/useProductContent.js

@@ -146,17 +146,21 @@ export const useProductContent = props => {
         if (category && category.default_top_filter) {
             const defaultTopFilter = category.default_top_filter;
 
+            // console.log('defaultTopFilter222',defaultTopFilter)
+
             const attrCode = defaultTopFilter.attribute_code;
             const label = defaultTopFilter.label;
             const value = defaultTopFilter.value;
 
-            if (!search.includes(attrCode)) {
-                setDefaultSubcategoryAndTopFilter(
-                    label + ',' + value, 
-                    attrCode + '[filter]', 
-                    true
-                );
-            }
+            // if (!search.includes(attrCode)) {
+            //     console.log('setDefaultSubcategoryAndTopFilter',attrCode)
+
+            //     setDefaultSubcategoryAndTopFilter(
+            //         label + ',' + value, 
+            //         attrCode + '[filter]', 
+            //         true
+            //     );
+            // }
         }
     }, [category, location, setDefaultSubcategoryAndTopFilter]);