@riosst100/pwa-marketplace 3.1.8 → 3.2.0

package/src/components/SellerDetail/sellerDetail.js

@@ -1,5 +1,8 @@
-import React, { Fragment, Suspense, useState } from 'react';
+import React, { Suspense, useState } from 'react';
 import { FormattedMessage } from 'react-intl';
+import { useIntl } from 'react-intl';
+import { useToasts } from '@magento/peregrine/lib/Toasts/useToasts';
+import { useUserContext } from '@magento/peregrine/lib/context/user';
 import { useSeller } from '@riosst100/pwa-marketplace/src/talons/Seller/useSeller';
 import ErrorView from '@magento/venia-ui/lib/components/ErrorView';
 import mapSeller from '@riosst100/pwa-marketplace/src/util/mapSeller';
@@ -9,22 +12,15 @@ import SellerProducts from '../SellerProducts';
 import SellerInformation from '../SellerInformation';
 import Reviews from '../SellerReview';
 import {
-    Verify,
     Sms,
-    Message,
-    Heart,
-    Share,
-    BoxTick,
-    Star1,
     Shop,
 } from 'iconsax-react';
 
 import { Share2 } from 'react-feather';
 
 import Image from '@magento/venia-ui/lib/components/Image';
-import Button from '@magento/venia-ui/lib/components/Button';
-import cn from 'classnames';
 import Rating from '@riosst100/pwa-marketplace/src/components/commons/Rating';
+import MessagesModal from '@riosst100/pwa-marketplace/src/components/LiveChat/MessagesModal';
 
 const FavoriteSellerButton = React.lazy(() => import('@riosst100/pwa-marketplace/src/components/FavoriteSeller/AddToListButton'));
 
@@ -36,8 +32,11 @@ const SellerDetail = props => {
         mapSeller
     });
 
-    const { error, loading, seller, favoriteSellerButtonProps, couponData, couponError, couponLoading } = talonProps;
+    const { error, loading, seller, favoriteSellerButtonProps, couponData, couponError, couponLoading, handleSendMessage, messages, messagesLoading, handleReplyMessage, handleDeleteMessage } = talonProps;
     const history = useHistory();
+    const [{ isSignedIn }] = useUserContext();
+    const [, { addToast }] = useToasts();
+    const { formatMessage } = useIntl();
 
     if (loading && !seller)
         return '';
@@ -76,7 +75,7 @@ const SellerDetail = props => {
         [
             {
                 id: 'product-tab',
-                title: 'All Products',
+                title: 'Products',
                 content: 
                 <SellerProducts 
                     sellerId={seller?.seller_id} 
@@ -98,31 +97,24 @@ const SellerDetail = props => {
             }
         ];
 
-    const [openChat, setOpenChat] = useState(false);
-    const toggleChat = () => {
-        setOpenChat(!openChat);
-    }
-
-    const addToFavourite = () => {
-        
-    }
-
-    const getSellerAddressDisplay = (seller) => {
-        let city = seller?.city;
-        let country = seller?.country;
-
-        let result = '';
-        if (city && country) {
-            result = `${city}, ${country}`;
+    const [isMessagesOpen, setIsMessagesOpen] = useState(false);
+    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;
         }
-        if (city && !country) {
-            result = `${city}`;
-        }
-        if (!city && country) {
-            result = `${country}`;
-        }        
-        return result;
-    }
+        setIsMessagesOpen(true);
+    };
+    const closeMessagesModal = () => setIsMessagesOpen(false);
+
+    // Address helper not used currently; removed to keep file lean
 
     return (
         <div className=' py-8'>
@@ -181,7 +173,7 @@ const SellerDetail = props => {
                 
                 {/* Right: action buttons */}
                 <div className='flex xs_flex-wrap items-center xs_justify-center lg_justify-end gap-[10px] xs_mt-4 lg_mt-0 xs_pt-2 lg_pt-0 relative'>
-                    <button className='send-message-btn flex items-center justify-center gap-[8px] px-[14px] py-[8px] bg-white rounded-[30px] border border-solid border-[#f76b1c] min-w-[44px]'>
+                    <button onClick={openMessagesModal} className='send-message-btn flex items-center justify-center gap-[8px] px-[14px] py-[8px] bg-white rounded-[30px] border border-solid border-[#f76b1c] min-w-[44px]'>
                         <Sms color="#f76b1c" size={16} variant='Outline' className='stroke' />
                         <span className='text-[#f76b1c] text-[14px] font-medium whitespace-nowrap md_block xs_hidden'>Send Message</span>
                     </button>
@@ -201,6 +193,16 @@ const SellerDetail = props => {
                     </button>
                 </div>
             </div>
+            <MessagesModal
+                isOpen={isMessagesOpen}
+                onClose={closeMessagesModal}
+                messages={messages}
+                seller={seller}
+                onReply={handleReplyMessage}
+                onDelete={handleDeleteMessage}
+                onSend={handleSendMessage}
+                loading={messagesLoading}
+            />
             <Tabs
                 data={dataTabs}
                 tabContentWrapperClassName='!p-0'

package/src/components/SellerMegaMenu/sellerMegaMenu.js

@@ -31,11 +31,10 @@ const SellerMegaMenu = (props) => {
         handleClickOutside
     } = useSellerMegaMenu({ mainNavRef });
     
-    const allowedCategoryUids = props.allowedCategoryUids || ['NTI=', 'NTA=', 'NTM=', 'MjY='];
+    // const allowedCategoryUids = props.allowedCategoryUids || ['NTI=', 'NTA=', 'NTM=', 'MjY='];
 
     const filteredChildren = Array.isArray(megaMenuData?.children)
-        ? megaMenuData.children.filter(c => allowedCategoryUids.includes(c.uid))
-        : [];
+        ? megaMenuData.children : [];
 
     const [mainNavWidth, setMainNavWidth] = useState(0);
     const shouldRenderItems = useIsInViewport({

package/src/components/SellerMegaMenu/sellerMegaMenuItem.js

@@ -65,21 +65,7 @@ const SellerMegaMenuItem = props => {
     const arrow = <ArrowDown2 className='ml-2 stroke-current' size="14" color={textPrimary} variant="Outline" />;
 
     const children = useMemo(() => {
-        return category.children.length || category.name == "Lego" ? (
-            <SellerSubmenu
-                isFocused={isFocused}
-                sellerSubMenuState={sellerSubMenuState}
-                items={category.children}
-                seller={seller}
-                parentCategory={category}
-                shopByItems={category.shop_by}
-                mainNavWidth={mainNavWidth}
-                handleCloseSellerSubMenu={handleCloseSellerSubMenu}
-                categoryUrlSuffix={categoryUrlSuffix}
-                onNavigate={onNavigate}
-                arrow={arrow}
-            />
-        ) : null;
+        return null;
     }, [
         category,
         isFocused,
@@ -124,7 +110,6 @@ const SellerMegaMenuItem = props => {
         >
             <Link
                 {...linkAttributes}
-                onKeyDown={handleKeyDown}
                 className={cn(
                     isActive ? classes.sellerMegaMenuLinkActive : classes.sellerMegaMenuLink,
                     titleClassName,
@@ -132,12 +117,9 @@ const SellerMegaMenuItem = props => {
                 )}
                 data-cy="SellerMegaMenu-SellerMegaMenuItem-link"
                 to={'/seller/' + seller?.url_key + categoryUrl}
-                onClick={onNavigate}
             >
                 {category.name}
-                {/* {maybeDownArrowIcon} */}
             </Link>
-            {children}
         </div>
     );
 };

package/src/components/SellerProducts/productContent.js

@@ -85,7 +85,7 @@ const ProductContent = props => {
     const shouldShowFilterShimmer = filters === null;
 
     const sidebar = shouldShowFilterButtons ? (
-        <FilterSidebar children={[]} filters={filters} />
+        <FilterSidebar category={category} children={[]} filters={filters} />
     ) : shouldShowFilterShimmer ? (
         <FilterSidebarShimmer />
     ) : null;
@@ -266,11 +266,6 @@ const ProductContent = props => {
                         </span>
                     </h1>
                 </div>
-                <>
-                    {currentFilter && <AlphaFilter isSingles={isSingles} items={items} handleActiveLetter={handleActiveLetter} activeLetter={activeLetter} />}
-                    {shopby != "gauge" && category?.name != "Collectible Card Games" ? <SubCategory parent={parent} children={children} /> : ''}
-                    
-                </>
                 <FilterTop shopby={shopby} filters={filters} category={category} children={children} />
             </div>
             <div className='w-full flex items-start gap-x-[30px]'>

package/src/components/WebsiteSwitcher/websiteSwitcherItem.js

@@ -10,26 +10,36 @@ const WebsiteSwitcherItem = props => {
     const { active, onClick, option, option2, children } = props;
     const classes = useStyle(defaultClasses, props.classes);
 
-    const handleClick = useCallback(() => {
-        onClick(option, option2);
-    }, [option, option2, onClick]);
+    const { location } = globalThis;
+    const href = location.href;
+
+    let match = location && location.pathname.split("/")[1];
+    
+    const websiteCode = option2 != "base" ? option2 : '';
+    if (option2 == "base") {
+        match = match + "/";
+    }
+    const url = href.replace(match, websiteCode);
+
+    // const handleClick = useCallback(() => {
+    //     onClick(option, option2);
+    // }, [option, option2, onClick]);
 
     const activeIcon = active ? (
         <Icon data-cy="WebsiteSwitcherItem-activeIcon" size={20} src={Check} />
     ) : null;
 
     return (
-        <button
+        <a
             data-cy="WebsiteSwitcherItem-button"
             className={classes.root}
-            disabled={active}
-            onClick={handleClick}
+            href={url}
         >
             <span className={classes.content}>
                 <span className={classes.text}>{children}</span>
                 {activeIcon}
             </span>
-        </button>
+        </a>
     );
 };
 

package/src/intercept.js

@@ -87,6 +87,27 @@ module.exports = targets => {
       authed: true,
       redirectTo: "/sign-in"
     },
+    {
+      exact: true,
+      name: "HelpCenter",
+      pattern: "/help-center",
+      path: require.resolve("./components/HelpCenter/index.js"),
+      authed: false,
+    },
+    {
+      exact: true,
+      name: "AboutUs",
+      pattern: "/about-us",
+      path: require.resolve("./components/AboutUs/index.js"),
+      authed: false,
+    },
+    {
+      exact: true,
+      name: "HelpCenterQuestionDetail",
+      pattern: "/help-center/question/:questionId",
+      path: require.resolve("./components/HelpCenter/questionDetail.js"),
+      authed: false,
+    },
     {
       exact: true,
       name: "VerifyEmailPage",

package/src/overwrites/venia-ui/lib/components/Adapter/adapter.js

@@ -23,9 +23,14 @@ const Adapter = props => {
         reduxProps,
         routerProps,
         isMaintenance,
+        isCheckingMaintenance,
         apiBase
     } = talonProps;
 
+    if (isCheckingMaintenance) {
+        return null;
+    }
+
     // console.log('isMaintenance',isMaintenance)
 
     // useEffect(() => {
@@ -89,10 +94,23 @@ const Adapter = props => {
 
     useEffect(() => {
         if (!websiteCodeInUrl) {
-            // history.replace(location.pathname + location.search)
+            history.replace(location.pathname + location.search)
         } else if (websiteCodeInUrl && websiteCodeInUrl !== currentWebsiteCode) {
             const storeCodeInUrl = websiteStores[websiteCodeInUrl];
 
+
+
+            // const search = location.search;
+            
+            // const query = new URLSearchParams(search);
+            // const isAccessBaseWebsite = query.get('access_base_website') || (
+            //     storage.getItem('access_base_website') || null
+            // );
+
+            // routerProps.basename = websiteCodeInUrl != process.env.WEBSITE_CODE && !isAccessBaseWebsite ? '/'+websiteCodeInUrl : '/';
+
+            // setNewRouterProps(routerProps);
+
             // await removeCart();
 
             // alert(storeCodeInUrl)
@@ -109,6 +127,8 @@ const Adapter = props => {
 
             // await apolloClient.clearCacheData(apolloClient, 'cart');
             // await removeCart();
+
+            // klo enabled jd redirect tros
             storage.removeItem('cartId');
 
             storage.setItem('store_view_code', storeCodeInUrl);
@@ -124,7 +144,7 @@ const Adapter = props => {
 
             // We're required to reload the page as the basename doesn't
             // change entirely without a full page reload.
-            // history.go(0);
+            history.go(0);
         }
 
         if (!websiteCodeInUrl && getWebsiteByUserIp) {
@@ -164,7 +184,7 @@ const Adapter = props => {
                 );
             }
         }
-    }, [websiteCodeInUrl, getWebsiteByUserIp])
+    }, [websiteCodeInUrl, getWebsiteByUserIp]);
 
     // TODO: Replace with app skeleton. See PWA-547.
     if (!initialized) {

package/src/overwrites/venia-ui/lib/components/FilterModal/CurrentFilters/currentFilters.js

@@ -12,7 +12,7 @@ const CurrentFilters = props => {
     const classes = useStyle(defaultClasses, props.classes);
     const { formatMessage } = useIntl();
 
-    const defaultTopFilterAttrCode = category.default_top_filter.attribute_code;
+    const defaultTopFilterAttrCode = category && category.default_top_filter ? category.default_top_filter.attribute_code : null;
 
     // create elements and params at the same time for efficiency
     const filterElements = useMemo(() => {

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

@@ -30,14 +30,25 @@ const Footer = props => {
     const linkGroups = Array.from(links, ([groupKey, linkProps]) => {
         const linkElements = Array.from(linkProps, ([text, pathInfo]) => {
             let path = pathInfo;
+            let url = null;
             let Component = Fragment;
             if (pathInfo && typeof pathInfo === 'object') {
-                path = pathInfo.path;
-                Component = pathInfo.Component;
+                url = pathInfo.url;
+                if (pathInfo.Component) {
+                    Component = pathInfo.Component;
+                }
+
+                if (pathInfo.path) {
+                    path = pathInfo.path;
+                }
             }
 
             const itemKey = `text: ${text} path:${path}`;
-            const child = path ? (
+            const child = url ? (
+                <a data-cy="Footer-link" className={classes.link} href={url}>
+                    <FormattedMessage id={text} defaultMessage={text} />
+                </a>
+            ) : path ? (
                 <Link data-cy="Footer-link" className={classes.link} to={path}>
                     <FormattedMessage id={text} defaultMessage={text} />
                 </Link>
@@ -75,24 +86,19 @@ const Footer = props => {
                 }
             }
         >
-            {!isCheckoutPage && <div className={classes.links}>
+            {!isCheckoutPage && <div className={classes.links} style={{"display":"flex"}}>
                 {linkGroups}
-                <div>
+                {/* <div>
                     <Newsletter />
-                </div>
-                <div className={classes.callout}>
+                </div> */}
+                {/* <div className={classes.callout}>
                     <span
                         data-cy="Footer-calloutHeading"
                         className={classes.calloutHeading}
                     >
-                        Follow Us
+                        Connect with Us
                     </span>
                     <ul className={classes.socialLinks}>
-                        <li>
-                            <Link to="" className="bg-darkblue-900 rounded-full flex justify-center items-center w-[34px] h-[34px]">
-                                <Instagram size={15} color='#FFFFFF' />
-                            </Link>
-                        </li>
                         <li>
                             <Link to="" className="bg-darkblue-900 rounded-full flex justify-center items-center w-[34px] h-[34px]">
                                 <Facebook size={15} color='#FFFFFF' />
@@ -105,18 +111,11 @@ const Footer = props => {
                         </li>
                         <li>
                             <Link to="" className="bg-darkblue-900 rounded-full flex justify-center items-center w-[34px] h-[34px]">
-                                <svg width="14" height="16" viewBox="0 0 14 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-                                    <path d="M12.9311 4.27218C12.8573 4.19836 12.7835 4.19836 12.6358 4.19836C12.4144 4.19836 12.2667 4.19836 12.0453 4.12454C10.7903 3.82925 9.90442 2.86957 9.8306 1.61459V1.31931C9.8306 1.09784 9.68295 0.950195 9.46148 0.950195H7.173C6.95154 0.950195 6.80389 1.09784 6.80389 1.31931V10.5471C6.80389 11.4329 6.06567 12.0973 5.25363 12.0973C4.73688 12.0973 4.29395 11.8758 3.99866 11.5067C3.4819 10.8423 3.62955 9.80883 4.29395 9.29208C4.58923 9.07061 4.88452 9.07061 5.4751 9.07061C5.54892 9.07061 5.69656 9.07061 5.77039 8.99679C5.84421 8.92297 5.91803 8.84915 5.91803 8.7015V6.26538C5.91803 6.11773 5.77039 5.89627 5.62274 5.89627C4.44159 5.74862 3.26044 6.04391 2.37457 6.78213C1.56253 7.52035 0.971956 8.55386 0.824312 9.80883C0.602846 11.2115 1.1196 12.6879 2.07929 13.6476C2.96515 14.6073 4.22012 15.0502 5.40128 15.0502C6.58243 15.0502 7.76358 14.6073 8.64944 13.7214C9.53531 12.8355 10.0521 11.6544 10.0521 10.3994V6.3392C10.9379 6.78213 11.8976 7.07742 12.8573 7.07742C13.0788 7.07742 13.2264 6.92978 13.2264 6.70831V4.49365C13.0788 4.41983 13.0049 4.34601 12.9311 4.27218Z" fill="white" />
-                                </svg>
-                            </Link>
-                        </li>
-                        <li>
-                            <Link to="" className="bg-darkblue-900 rounded-full flex justify-center items-center w-[34px] h-[34px]">
-                                <Linkedin size={15} color='#FFFFFF' />
+                                <Instagram size={15} color='#FFFFFF' />
                             </Link>
                         </li>
                     </ul>
-                </div>
+                </div> */}
             </div>}
             <div className={"flex flex-row justify-between py-4 border-t border-gray-100 w-full py-[15px] mx-[auto] flex justify-between items-center" + (isCheckoutPage ? " max-w-[1000px]" : " max-w-[1300px]")}>
                 <p className="text-colorDefault">{copyrightText || null}</p>

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

@@ -1,46 +1,50 @@
 import { ContactLink } from '@magento/venia-ui/lib/components/ContactPage';
 
+const { location } = globalThis;
+const origin = location.origin;
+
 const accountLinks = new Map()
-    .set('Account', null)
-    .set('Sign In', '/')
-    .set('Register', '/')
-    .set('Tracking Order', '/')
+    .set('Let Us Help You', null)
+    .set('Your Account', '/account-information')
+    .set('Your Orders', '/order-history')
+    .set('Help', '/help-center')
 
-const getToKnowUsLinks = new Map()
-    .set('About TCG Collective', null)
-    .set('Career', '/')
-    .set('Contact Us', '/')
-    .set('Help Center', '/')
-    .set('Intelectual Property Claims', '/');
+const socialMediaLinks = new Map()
+    .set('Connect With Us', null)
+    .set('Facebook', '/')
+    .set('Twitter', '/')
+    .set('Instagram', '/');
 
-const aboutLinks = new Map()
+const brandLinks = new Map()
+    .set('Protect and Build Your Brand', null)
+    .set('Sell on TCG Collective', '/')
+    .set('Partners/Affiliates', '/');
+
+const getToKnowUsLinks = new Map()
+    .set('Get to Know Us', null)
     .set('About Us', '/about-us')
-    .set('Our Story', null)
-    .set('Email Signup', null)
-    .set('Give Back', null);
+    .set('Careers', '/career')
+    .set('Contact Us', '/contact-us');
 
 const sitesLinks = new Map()
-    .set('Sites', null)
-    .set('International', '/')
-    .set('Singapore', '/')
-    .set('Malaysia', '/')
-    .set('Indonesia', '/')
-    .set('Thailand', '/')
-    .set('Philippines', '/')
-    .set('Vietnam', '/')
-
-const helpLinks = new Map()
-    .set('Help', null)
-    .set('Customer Service', '/customer-service')
-    .set('Contact Us', {
-        path: '/contact-us',
-        Component: ContactLink
+    .set('Our Stores (Country/Region)', null)
+    .set('Global', {
+        url: origin + '/'
+    })
+    .set('Singapore', {
+        url: origin + '/sg'
+    })
+    .set('Indonesia', {
+        url: origin + '/id'
+    })
+    .set('Malaysia', {
+        url: origin + '/my'
     })
-    .set('Order Status', null)
-    .set('Returns', null);
 
 export const DEFAULT_LINKS = new Map()
     .set('us', getToKnowUsLinks)
+    .set('social-media', socialMediaLinks)
+    .set('brand', brandLinks)
     .set('account', accountLinks)
     .set('sites', sitesLinks);
 

package/src/overwrites/venia-ui/lib/components/Header/header.js

@@ -46,8 +46,8 @@ const Header = props => {
     const baseUrl = data?.storeConfig?.base_media_url;
     const imageSource = data?.storeConfig?.header_logo_src;
     const LogoImageSource = `${baseUrl}/logo/${imageSource}`;
-    const IMAGE_HEIGHT = data?.storeConfig?.logo_width || 28;
-    const IMAGE_WIDTH = data?.storeConfig?.logo_height || 190;
+    const IMAGE_HEIGHT = data?.storeConfig?.logo_width || 33;
+    const IMAGE_WIDTH = data?.storeConfig?.logo_height || 230;
     const IMAGE_ALT = data?.storeConfig?.logo_alt || 'TCG Collective';
 
     const classes = useStyle(defaultClasses, props.classes);