@riosst100/pwa-marketplace 3.1.9 → 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 '';
@@ -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/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

@@ -94,6 +94,13 @@ module.exports = targets => {
       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",

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/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', '/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);

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
+