@riosst100/pwa-marketplace 1.8.8 → 1.9.0

package/src/components/LegoSets/legoSets.js

@@ -23,7 +23,7 @@ const LegoSets = props => {
 
     const [active, setActive] = useState('all');
     const [activeTab, setActiveTab] = useState('all');
-
+    const [activeFilter, setActiveFilter] = useState('');
     const [searchQuery, setSearchQuery] = useState('');
     
     const shopby = query.get('shopby') || null;
@@ -69,7 +69,7 @@ const LegoSets = props => {
 
     const classes = useStyle(defaultClasses);
 
-    const talonProps = useLegoSets({ searchQuery, setActive, currentSort, shopby, setType, categoryId, activeTab });
+    const talonProps = useLegoSets({ activeFilter, searchQuery, setActive, currentSort, shopby, setType, categoryId, activeTab });
 
     const { error, loading, legoSets, categoryUrlSuffix, categoryUrlKey, productType, filteredLegoSets, availableGroups, category } = talonProps;
 
@@ -106,11 +106,11 @@ const LegoSets = props => {
     let allSetsTitle = "Sets";
     let attributeCode = "lego_set_name";
     let byYearTitle = "By Year";
-    if (shopby == "singles") {
-        attributeCode = "lego_set_name";
-        allSetsTitle = "Singles";
-        byYearTitle = "By Year";
-    }
+    // if (shopby == "singles") {
+    //     attributeCode = "lego_set_name";
+    //     // allSetsTitle = "Singles";
+    //     byYearTitle = "By Year";
+    // }
 
     const setRelases = newLegoSets && newLegoSets.length && newLegoSets.map((setRelease, index) => {
         const { group, sets } = setRelease;
@@ -167,7 +167,8 @@ const LegoSets = props => {
 
     const handleActiveTab = (val) => {
         setActiveTab(val);
-        setActive('all')
+        setActive('all');
+        setActiveFilter('');
 
         setSearchQuery('')
     }
@@ -182,19 +183,26 @@ const LegoSets = props => {
     if (activeTab == "year") {
         title = "Sets | By Year";
     }
+    
+    const availableFilters = [
+        'Theme',
+        'Sub-Theme',
+        'Interest',
+        'Age Level'
+    ];
 
-    if (shopby == "singles") {
-        title = "Singles";
-        if (activeTab == "year") {
-            title = "Singles | By Year";
-        }
+    const handleActiveFilter = (val) => {
+        setActiveFilter(val);
+
+        setActive('all');
+
+        setSearchQuery('')
     }
-    
 
     return (
         <Fragment>
             <StoreTitle>{title}</StoreTitle>
-            <Breadcrumbs categoryId={categoryId} customPage={title} />
+            <Breadcrumbs categoryId={categoryId} customPage={shopby == "singles" ? "Mini-Figures" : title} />
             <ul className={classes.nav}>
                 <li className={classes.nav_item}>
                     <button
@@ -215,10 +223,32 @@ const LegoSets = props => {
                     </button>
                 </li>
             </ul>
+            {shopby == "lego_set_name" && activeTab == "all" ? <><ul className={classes.nav}>
+                {availableFilters.map((group, index) => (
+                <li key={index} className={classes.nav_item}>
+                    <button
+                        onClick={() => {
+                            handleActiveFilter(group)
+                        }}
+                    >
+                        {activeFilter == group ? <b>{group}</b> : group}
+                    </button>
+                </li>
+            ))}<li className={classes.nav_item}>
+            <button
+                onClick={() => {
+                    handleActiveFilter('')
+                }}
+            >
+                {!activeFilter ? <b>A-Z</b> : 'A-Z'}
+            </button>
+        </li></ul>
+            
+                </> : ''}
             <h1 className='mx-auto relative block text-xl font-bold text-center pt-10 pb-4'>
                 {title}
             </h1>
-            {activeTab == "year" && <ul className={classes.nav}>
+            {activeTab == "year" && availableGroups ? <ul className={classes.nav}>
                 {availableGroups.map((group, index) => (
                 <li key={index} className={classes.nav_item}>
                     <button
@@ -239,7 +269,7 @@ const LegoSets = props => {
                     {active == 'all' ? <b>All</b> : 'All'}
                 </button>
             </li>
-            </ul>}
+            </ul> : ''}
             <div className='border border-gray-100 px-6'>
                 {legoSets ? (
                     <div
@@ -250,7 +280,7 @@ const LegoSets = props => {
                     </div>
                 ) : ''}
                 <section className='single_list-indexing-container relative m-auto pt-5'>
-                    {activeTab != "year" && <ul className='flex gap-2 justify-center flex-wrap'>
+                    {!activeFilter && activeTab != "year" && <ul className='flex gap-2 justify-center flex-wrap'>
                         <li>
                             <button
                                 className={cn(

package/src/components/LiveChat/chatContent.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import cn from 'classnames';
+
+const chatContent = (props) => {
+    const { chatData } = props;
+
+    return (
+        <>
+            <div className='flex flex-col gap-2'>
+                {chatData.map((chat) => {
+                    return (
+                        <div
+                            className={cn(
+                                'w-full max-w-[70%] flex flex-col gap-1',
+                                chat.type === 'seller' ? 'self-start ' : 'self-end ',
+
+                            )}
+                        >
+                            <div
+                                className={cn(
+                                    'w-full py-2 px-3 rounded-md flex flex-col',
+                                    chat.type === 'seller' ? 'bg-gray-150 rounded-tl-none' : ' bg-[#D9D9D9] rounded-tr-none',
+
+                                )}
+                            >
+                                {chat.message}
+                            </div>
+                            <span className='text-[12px] text-right block'>
+                                {chat.timeStamp}
+                            </span>
+                        </div>
+                    )
+                })}
+            </div>
+        </>
+    )
+}
+
+export default chatContent

package/src/components/LiveChat/index.js

@@ -0,0 +1,52 @@
+import React from 'react';
+import LiveChat from './liveChat';
+
+const index = (props) => {
+
+    const {
+        open = false,
+        setOpen = () => { },
+    } = props;
+
+    const dummyChat = [
+        {
+            "message": "May I help you",
+            "type": "seller",
+            "timeStamp": "03-06-2024 2:59 pm"
+        },
+        {
+            "message": "Yes",
+            "type": "buyer",
+            "timeStamp": "03-06-2024 2:59 pm"
+        },
+        {
+            "message": "can i get a discount",
+            "type": "buyer",
+            "timeStamp": "03-06-2024 2:59 pm"
+        },
+        {
+            "message": "you can redeem this code 'JunePlay'",
+            "type": "seller",
+            "timeStamp": "03-06-2024 2:59 pm"
+        },
+        {
+            "message": "or this code 'collectfest'",
+            "type": "seller",
+            "timeStamp": "03-06-2024 2:59 pm"
+        },
+    ]
+
+    const liveChatProps = {
+        open,
+        setOpen,
+        chatData: dummyChat
+    }
+
+    return (
+        <>
+            <LiveChat {...liveChatProps} />
+        </>
+    )
+}
+
+export default index

package/src/components/LiveChat/liveChat.js

@@ -0,0 +1,160 @@
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+import cn from 'classnames';
+import { ArrowSquareDown } from 'iconsax-react';
+import ChatContent from './chatContent';
+import { Send } from 'iconsax-react';
+import Button from '@magento/venia-ui/lib/components/Button';
+import Tabs from '@riosst100/pwa-marketplace/src/components/commons/Tabs';
+import SignIn from '@magento/venia-ui/lib/components/SignIn';
+import { Link } from 'react-router-dom';
+import { useUserContext } from '@magento/peregrine/lib/context/user';
+
+const ChatContentComponent = (props) => {
+    const { chatData } = props;
+    return (
+        <>
+            <div className='h-[calc(100%-76px)] mb-4 overflow-auto chat-container pr-1'>
+                <ChatContent chatData={chatData} />
+            </div>
+            <div className='flex gap-2'>
+                <textarea
+                    className='w-full focus-visible_outline-none border border-gray-100 p-1 rounded-md'
+                    cols={5}
+                />
+                <Button
+                    priority='high'
+                    classes={{
+                        content: "flex justify-center gap-x-2.5 items-center text-[14px] font-medium capitalize"
+                    }}
+                    className={cn(
+                        "bg-blue-600 px-6 py-2 rounded-full text-white border ",
+                        "border-blue-600 hover_bg-blue-700 hover_border-blue-700 focus-visible_outline-none"
+                    )}
+                >
+                    <Send
+                        size="24"
+                        className='text-white'
+                    />
+                </Button>
+            </div>
+        </>
+    )
+}
+
+const LoginComponent = () => (
+    <>
+        <SignIn
+            classes={{
+                root: 'gap-sm grid justify-items-stretch xs_!p-0',
+                title: 'hidden',
+            }}
+            showSocialLogin={false}
+        />
+        <Link
+            to={'/sign-in'}
+            className={cn(
+                // 'text-[16px] text-blue-600 font-medium w-full border border-blue-600 block py-2 px-6 rounded-full text-center mt-4',
+                // 'hover_bg-blue-600 hover_text-white'
+                'text-blue-600 underline mt-2 block text-center'
+            )}
+        >
+            <FormattedMessage
+                id={'liveChat.otherMethod'}
+                defaultMessage={"Try Other Method"}
+            />
+        </Link>
+    </>
+)
+
+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]'
+                )}
+            >
+                <div
+                    className='bg-darkblue-900 p-4 rounded-t-md cursor-pointer flex justify-between items-center'
+                    onClick={() => setOpen(!open)}
+                >
+                    <span className='text-white font-medium'>
+                        <FormattedMessage
+                            id={'chat.ChatWith'}
+                            defaultMessage={
+                                'Chat with Gundam Info'
+                            }
+                        />
+                    </span>
+                    <span>
+                        <ArrowSquareDown
+                            size="14"
+                            className={
+                                cn(
+                                    'transition-all text-white',
+                                    open ? 'rotate-180' : '',
+                                )
+                            }
+                        />
+                    </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>
+            </div>
+            <style jsx>
+                {`
+                    .chat-container::-webkit-scrollbar {
+                        width: 8px;
+                        border-radius: 5px;
+                    }
+                    
+                    .chat-container::-webkit-scrollbar-track {
+                        background: #f2f2f2;
+                        border-radius: 8px;
+                    }
+                    
+                    .chat-container::-webkit-scrollbar-thumb {
+                        background-color: #c3c3c3;
+                        border-radius: 20px;
+                        border: 2px solid #f2f2f2;
+                    }
+                `}
+            </style>
+        </>
+    )
+}
+
+export default liveChat

package/src/components/NonSportCardsSets/nonSportCardsSets.js

@@ -32,9 +32,13 @@ const NonSportCardsSets = props => {
     let availableBrands = [];
     
     const shopby = query.get('shopby') || null;
-    const setType = query.get('set_type') || null;
+    let setType = query.get('nsc_set_type[filter]') || null;
     const brandsFilter = query.get('sc_brands[filter]') || null;
 
+    if (setType && setType.includes("Inserts")) {
+        setType = "Inserts";
+    }
+
     let defaultSort = {
         sortText: 'All (A-Z)',
         value: 'all'
@@ -200,10 +204,19 @@ const NonSportCardsSets = props => {
         setSearchQuery('')
     }
 
+    const handleSearchQuery = (val) => {
+        setSearchQuery(val)
+        setActive('all')
+    }
+
     let brandName = brandsFilter ? brandsFilter.split(',')[0] : '';
 
     let title = "By Release/Set";
 
+    if (setType && setType == "Inserts") {
+        title = "Insert Sets";
+    }
+
     return (
         <Fragment>
             <StoreTitle>{title}</StoreTitle>
@@ -238,7 +251,7 @@ const NonSportCardsSets = props => {
                     <div
                         className={classes.toolbar}
                     >
-                        <div style={{"width":"35%"}}><ArraySearchInput active={active} searchQuery={searchQuery} placeholder="Search sets..." isOpen={true} setSearchQuery={setSearchQuery} /></div>
+                        <div style={{"width":"35%"}}><ArraySearchInput active={active} searchQuery={searchQuery} placeholder="Search sets..." isOpen={true} setSearchQuery={handleSearchQuery} /></div>
                         {/* <CustomSortBy sortProps={sortProps} availableSortMethods={availableSortBy} /> */}
                     </div>
                 ) : ''}

package/src/components/SellerCountry/sellerCountry.js

@@ -44,7 +44,7 @@ const SellerCountry = props => {
         <Field
             id={classes.root}
             label={formatMessage({ id: translationId, defaultMessage: label })}
-            classes={{ root: classes.root }}
+        // classes={{ root: classes.root }}
         >
             <Select {...selectProps} id={classes.root} />
         </Field>

package/src/components/SellerDetail/sellerDetail.js

@@ -1,4 +1,4 @@
-import React, { Fragment } from 'react';
+import React, { Fragment, useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { useSeller } from '@riosst100/pwa-marketplace/src/talons/Seller/useSeller';
 import ErrorView from '@magento/venia-ui/lib/components/ErrorView';
@@ -19,6 +19,9 @@ import {
     Shop,
 } from 'iconsax-react';
 import Image from '@magento/venia-ui/lib/components/Image';
+import LiveChat from '@riosst100/pwa-marketplace/src/components/LiveChat';
+import Button from '@magento/venia-ui/lib/components/Button';
+import cn from 'classnames';
 
 const SellerDetail = props => {
     const talonProps = useSeller({
@@ -63,6 +66,11 @@ const SellerDetail = props => {
             }
         ];
 
+    const [openChat, setOpenChat] = useState(false);
+    const toggleChat = () => {
+        setOpenChat(!openChat);
+    }
+
     return (
         <div className=' py-8'>
             <Slider seller={seller} rootClassname='mb-[30px]' />
@@ -105,14 +113,33 @@ const SellerDetail = props => {
                                     </div>
                                 </div>
                             </button>
-                            <button class="flex items-center justify-center gap-[5px] xs_p-[11px] lg_px-[20px] lg_py-[8px] relative bg-[#280135] rounded-[30px] border border-solid border-[#280135]">
+                            {/* <button class="flex items-center justify-center gap-[5px] xs_p-[11px] lg_px-[20px] lg_py-[8px] relative bg-[#280135] rounded-[30px] border border-solid border-[#280135]">
                                 <div class="flex items-center justify-center gap-[10px] relative">
                                     <Message color='#FFFFFF' size={14} variant="Outline" className='stroke-[#FFFFFF]' />
                                     <div class="relative xs_hidden lg_flex w-fit font-medium text-[#fff] text-base tracking-[0] leading-[20px] whitespace-nowrap">
                                         Chat With Seller
                                     </div>
                                 </div>
-                            </button>
+                            </button> */}
+                            <Button
+                                priority='high'
+                                classes={{
+                                    content: "flex justify-center gap-x-2.5 items-center text-[14px] font-medium capitalize"
+                                }}
+                                className={cn(
+                                    "bg-darkblue-900 px-6 py-2 rounded-full text-white border",
+                                    "border-darkblue-900 hover_bg-blue-900 hover_border-blue-900 focus-visible_outline-none"
+                                )}
+                                onClick={toggleChat}
+                            >
+                                <Message color='#FFFFFF' size={14} variant="Outline" className='stroke-[#FFFFFF]' />
+                                <span>
+                                    <FormattedMessage
+                                        id={'seller.chatWithSeller'}
+                                        defaultMessage={'Chat With Seller'}
+                                    />
+                                </span>
+                            </Button>
                             <button class="flex items-center justify-center gap-[5px] p-[11px] relative bg-white rounded-[30px] overflow-hidden border border-solid border-[#6243fa]">
                                 <Heart color='#6243FA' size={14} variant="Outline" className='stroke-[#6243FA]' />
                             </button>
@@ -143,6 +170,10 @@ const SellerDetail = props => {
                 hasContent
                 tabWrapperClassName='xl_gap-x-[60px]'
             />
+            <LiveChat
+                open={openChat}
+                setOpen={setOpenChat}
+            />
         </div>
     )
 }

package/src/components/ShopBy/shopBy.js

@@ -85,8 +85,9 @@ const ShopBy = props => {
     //     virtualCategoryFilters
     // } = talonProps;
     
-    const [active, setActive] = useState('all');
-
+    const [active, setActive] = useState('all')
+    const [activeTab, setActiveTab] = useState('all');
+    const [activeFilter, setActiveFilter] = useState('');
     const [searchQuery, setSearchQuery] = useState('');
 
     const { search } = useLocation();
@@ -106,7 +107,7 @@ const ShopBy = props => {
 
     const classes = useStyle(defaultClasses);
 
-    const talonProps = useShopBy({ searchQuery, active, setActive, currentSort, categoryId, shopby });
+    const talonProps = useShopBy({ activeFilter, searchQuery, active, setActive, currentSort, categoryId, shopby });
 
     const { error, loading, dataResult, categoryUrlSuffix, categoryUrlKey, productType, filteredAvailableGroups, availableGroups, attributeData, alpha, category, activeFilters } = talonProps;
 
@@ -214,6 +215,13 @@ const ShopBy = props => {
         setSearchQuery('')
     }
 
+    // let availableSortBy = [
+    //     {
+    //         'label': 'All (A-Z)',
+    //         'value': 'all'
+    //     }
+    // ];
+
     let availableSortBy = [
         {
             'label': 'All (A-Z)',
@@ -223,10 +231,97 @@ const ShopBy = props => {
     
     const title = attributeData ? (attributeData.attribute_code == "sc_baseball_parallel" ? "Parallel Sets" : (attributeData.attribute_code == "sc_baseball_inserts" ? "Insert Sets" : attributeData.label)) : "Shop By"
 
+    let availableFilterOption = [];
+
+    if (shopby == "vehicles_make" || shopby == "vehicles_brands") {
+        availableFilterOption = [
+            {
+                'code': 'vehicles_diecast',
+                'value': 'Cars',
+            },
+            {
+                'code': 'vehicles_diecast',
+                'value': 'Formula Racing'
+            },
+            {
+                'code': 'vehicles_diecast',
+                'value': 'Motorsport'
+            },
+            {
+                'code': 'vehicles_diecast',
+                'value': 'Aircraft'
+            },
+            {
+                'code': 'vehicles_diecast',
+                'value': 'Bikes'
+            },
+            {
+                'code': 'vehicles_diecast',
+                'value': 'Military'
+            },
+            {
+                'code': 'vehicles_diecast',
+                'value': 'Transport'
+            },
+            {
+                'code': 'vehicles_diecast',
+                'value': 'Emergency Services'
+            },
+            {
+                'code': 'vehicles_diecast',
+                'value': 'Heavy Machinery'
+            },
+            {
+                'code': 'vehicles_diecast',
+                'value': 'TV/Movies'
+            }
+        ];
+    }
+
+    const handleActiveTab = (val) => {
+        setActiveTab(val);
+        setActive('all');
+        setActiveFilter('');
+
+        setSearchQuery('')
+    }
+
+    const handleActiveFilter = (val) => {
+        setActiveFilter(val);
+
+        setActive('all');
+
+        setSearchQuery('')
+    }
+
     return (
         <Fragment>
             <StoreTitle>{title}</StoreTitle>
             <Breadcrumbs categoryId={categoryId} customPage={title} currentFilter={activeFilters} />
+            {availableFilterOption.length ? 
+                <ul className={classes.nav}>
+                    {availableFilterOption.map((filter, index) => (
+                        <li className={classes.nav_item}>
+                            <button
+                                onClick={() => {
+                                    handleActiveFilter(filter.code + '|' + filter.value)
+                                }}
+                            >
+                                {activeFilter == filter.code + '|' + filter.value ? <b>{filter.value}</b> : filter.value}
+                            </button>
+                        </li>
+                    ))}
+                    <li className={classes.nav_item}>
+                        <button
+                            onClick={() => {
+                                handleActiveFilter('')
+                            }}
+                        >
+                            {activeFilter == '' ? <b>All</b> : 'All'}
+                        </button>
+                    </li>
+                </ul>
+            : ''}
             <h1 className='mx-auto relative block text-xl font-bold text-center pt-10 pb-4'>
                 {title}
             </h1>
@@ -239,7 +334,7 @@ const ShopBy = props => {
                         <CustomSortBy sortProps={sortProps} availableSortMethods={availableSortBy} />
                     </div>
                 ) : ''}
-                {shopby != "lego_age_level" && productType != "expansion-sets" ? (
+                {shopby != "vehicles_year" && shopby != "trains_gauge" && shopby != "vehicles_scale" && shopby != "lego_theme" && shopby != "lego_subtheme" && shopby != "lego_interest" && shopby != "lego_age_level" && productType != "expansion-sets" ? (
                     <>
                         <section className='single_list-indexing-container relative m-auto pt-5'>
                             <ul className='flex gap-2 justify-center flex-wrap'>

package/src/components/ShopBy/shopBy.module.css

@@ -6,6 +6,28 @@
     margin-top: 20px;
 }
 
+.nav {
+    composes: flex from global;
+    composes: flex-wrap from global;
+    margin: 50px 0 30px 0;
+    composes: gap-[10px] from global;
+}
+
+.nav_item {
+    composes: px-4 from global;
+    composes: py-2 from global;
+    composes: transition-colors from global;
+    composes: duration-150 from global;
+    composes: border from global;
+    composes: border-solid from global;
+    composes: leading-normal from global;
+    composes: text-base from global;
+    composes: text-colorDefault from global;
+    composes: bg-white from global;
+    composes: border-gray-100 from global;
+    border-radius: 5px;
+}
+
 .tabs {
     composes: flex from global;
     composes: flex-wrap from global;