@riosst100/pwa-marketplace 3.2.6 → 3.2.7

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@riosst100/pwa-marketplace",
   "author": "riosst100@gmail.com",
-  "version": "3.2.6",
+  "version": "3.2.7",
   "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/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/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,70 @@ export const useSellerMegaMenu = (props = {}) => {
         [isActive]
     );
 
+    useEffect(() => {
+        const activeCategory = findActiveCategory(
+            location.pathname,
+            megaMenuData
+        );
+
+        console.log('megaMenuData',megaMenuData)
+        console.log('activeCategory',activeCategory)
+
+        if (activeCategory) {
+            setActiveCategoryId(activeCategory.path[0]);
+            setActiveCategory(activeCategory);
+        } else {
+            setActiveCategoryId(null);
+            setActiveCategory(null);
+        }
+    }, [findActiveCategory, location.pathname, megaMenuData]);
+
+    useEffect(() => {
+        const { search, pathname } = location;
+
+        console.log('category555',category)
+
+        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;
+
+            console.log('activeCategory',activeCategory)
+            console.log('2defaultTopFilte344444',defaultTopFilter)
+            console.log('search',search)
+
+            const attrCode = defaultTopFilter.attribute_code;
+            const label = defaultTopFilter.label;
+            const value = defaultTopFilter.value;
+
+            if (!search.includes(attrCode)) {
+                console.log('setDefaultSubcategoryAndTopFilter',attrCode)
+
+                setDefaultSubcategoryAndTopFilter(
+                    label + ',' + value, 
+                    attrCode + '[filter]', 
+                    true
+                );
+            }
+        }
+    }, [activeCategory, location, setDefaultSubcategoryAndTopFilter]);
+
+   
+
     const handleClickOutside = e => {
         if (!props.mainNavRef.current.contains(e.target)) {
             setSellerSubMenuState(false);
@@ -195,18 +279,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]);