@riosst100/pwa-marketplace 1.9.1 → 1.9.3

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@riosst100/pwa-marketplace",
   "author": "riosst100@gmail.com",
-  "version": "1.9.1",
+  "version": "1.9.3",
   "main": "src/index.js",
   "pwa-studio": {
     "targets": {
@@ -13,7 +13,9 @@
     "iconsax-react": "^0.0.8",
     "react-countdown": "^2.3.5",
     "react-phone-number-input": "^3.3.9",
-    "react-slick": "^0.30.2"
+    "react-slick": "^0.30.2",
+    "react-datepicker": "4.10.0",
+    "react-dropzone": "^14.2.3"
   },
   "license": "MIT",
   "private": false

package/src/componentOverrideMapping.js

@@ -63,4 +63,5 @@ module.exports = componentOverrideMapping = {
     [`@magento/venia-ui/lib/components/CheckoutPage/index.js`]: '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/CheckoutPage/index.js',
     [`@magento/venia-ui/lib/components/Dialog/index.js`]: '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/Dialog/index.js',
     [`@magento/venia-ui/lib/components/OrderHistoryPage/index.js`]: '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/OrderHistoryPage/index.js',
+    [`@magento/venia-ui/lib/components/TextArea/index.js`]: '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/TextArea/index.js',
 };

package/src/components/AccountLayout/accountlayout.module.css

@@ -1,3 +1,13 @@
 .menu {
-    flex-basis: 260px;
+    flex-basis: 23%;
+}
+
+.blockContent {
+    width: 100%;
+}
+
+@media only screen and (min-width: 1024px) {
+    .blockContent {
+        width: calc(100% - 260px);
+    }
 }

package/src/components/AccountLayout/index.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { Link } from 'react-router-dom';
 import { FormattedMessage } from 'react-intl';
 import defaultClasses from './accountlayout.module.css';
@@ -6,6 +6,7 @@ import { useStyle } from '@magento/venia-ui/lib/classify';
 import { ArrowDown2 } from 'iconsax-react';
 import { useWindowSize } from '@magento/peregrine';
 import cn from 'classnames';
+import { useLocation } from 'react-router-dom';
 
 const AccountLayout = (props) => {
     const { children } = props;
@@ -15,6 +16,16 @@ const AccountLayout = (props) => {
     const isTablet = windowSize.innerWidth <= 1023;
 
     const classes = useStyle(defaultClasses, props.classes);
+
+    const location = useLocation();
+    const { pathname } = location
+
+    const [activeMenu, setActiveMenu] = useState(pathname);
+
+    const handleActiveMenu = () => {
+        setActiveMenu(pathname)
+    }
+
     return (
         <>
             <div className='flex flex-col lg_flex-row lg_justify-between gap-[30px] mt-8 relative'>
@@ -40,19 +51,22 @@ const AccountLayout = (props) => {
                 <div
                     className={cn(
                         classes.menu,
-                        'hidden lg_block',
+                        'hidden lg_block z-[1]',
                         isTablet && isOpen ? 'absolute !block bg-white w-full top-14' : '',
                     )}
                 >
                     <div
                         className={cn(
-                            'flex flex-col border border-gray-100 rounded-lg px-2.5 py-5'
+                            'flex flex-col border border-gray-100 rounded-lg px-2.5 py-5 gap-y-2'
                         )}
                     >
                         <li className="list-none">
                             <Link
                                 to="/order-history"
-                                className="text-[14px] font-medium p-2.5 block w-full hover_bg-gray-150 rounded-md"
+                                className={cn(
+                                    "text-[14px] font-medium p-2.5 block w-full hover_bg-gray-150 rounded-md",
+                                    activeMenu === '/order-history' ? 'bg-gray-150' : ''
+                                )}
                             >
                                 <FormattedMessage
                                     id={'myaccount.orderHistory'}
@@ -61,10 +75,28 @@ const AccountLayout = (props) => {
 
                             </Link>
                         </li>
+                        <li className="list-none">
+                            <Link
+                                to="/quotes"
+                                className={cn(
+                                    "text-[14px] font-medium p-2.5 block w-full hover_bg-gray-150 rounded-md",
+                                    activeMenu === '/quotes' ? 'bg-gray-150' : ''
+                                )}
+                            >
+                                <FormattedMessage
+                                    id={'myaccount.Quotes'}
+                                    defaultMessage={'Quotes'}
+                                />
+
+                            </Link>
+                        </li>
                         <li className="list-none">
                             <Link
                                 to="/wishlist"
-                                className="text-[14px] font-medium p-2.5 block w-full hover_bg-gray-150 rounded-md"
+                                className={cn(
+                                    "text-[14px] font-medium p-2.5 block w-full hover_bg-gray-150 rounded-md",
+                                    activeMenu === '/wishlist' ? 'bg-gray-150' : ''
+                                )}
                             >
                                 <FormattedMessage
                                     id={'myaccount.wishlist'}
@@ -75,8 +107,11 @@ const AccountLayout = (props) => {
                         </li>
                         <li className="list-none">
                             <Link
-                                to="#"
-                                className="text-[14px] font-medium p-2.5 block w-full hover_bg-gray-150 rounded-md"
+                                to="/favorite-seller"
+                                className={cn(
+                                    "text-[14px] font-medium p-2.5 block w-full hover_bg-gray-150 rounded-md",
+                                    activeMenu === '/favorite-seller' ? 'bg-gray-150' : ''
+                                )}
                             >
                                 <FormattedMessage
                                     id={'myaccount.favoriteSeller'}
@@ -88,7 +123,10 @@ const AccountLayout = (props) => {
                         <li className="list-none">
                             <Link
                                 to="/address-book"
-                                className="text-[14px] font-medium p-2.5 block w-full hover_bg-gray-150 rounded-md"
+                                className={cn(
+                                    "text-[14px] font-medium p-2.5 block w-full hover_bg-gray-150 rounded-md",
+                                    activeMenu === '/address-book' ? 'bg-gray-150' : ''
+                                )}
                             >
                                 <FormattedMessage
                                     id={'myaccount.addressBook'}
@@ -100,7 +138,10 @@ const AccountLayout = (props) => {
                         <li className="list-none">
                             <Link
                                 to="/saved-payments"
-                                className="text-[14px] font-medium p-2.5 block w-full hover_bg-gray-150 rounded-md"
+                                className={cn(
+                                    "text-[14px] font-medium p-2.5 block w-full hover_bg-gray-150 rounded-md",
+                                    activeMenu === '/saved-payments' ? 'bg-gray-150' : ''
+                                )}
                             >
                                 <FormattedMessage
                                     id={'myaccount.payments'}
@@ -111,8 +152,11 @@ const AccountLayout = (props) => {
                         </li>
                         <li className="list-none">
                             <Link
-                                to="/communications#"
-                                className="text-[14px] font-medium p-2.5 block w-full hover_bg-gray-150 rounded-md"
+                                to="/communications"
+                                className={cn(
+                                    "text-[14px] font-medium p-2.5 block w-full hover_bg-gray-150 rounded-md",
+                                    activeMenu === '/communications' ? 'bg-gray-150' : ''
+                                )}
                             >
                                 <FormattedMessage
                                     id={'myaccount.newsletter'}
@@ -124,7 +168,10 @@ const AccountLayout = (props) => {
                         <li className="list-none">
                             <Link
                                 to="/account-information"
-                                className="text-[14px] font-medium p-2.5 block w-full hover_bg-gray-150 rounded-md"
+                                className={cn(
+                                    "text-[14px] font-medium p-2.5 block w-full hover_bg-gray-150 rounded-md",
+                                    activeMenu === '/account-information' ? 'bg-gray-150' : ''
+                                )}
                             >
                                 <FormattedMessage
                                     id={'myaccount.accountInformation'}
@@ -136,7 +183,7 @@ const AccountLayout = (props) => {
 
                     </div>
                 </div>
-                <div className='block w-full'>
+                <div className={cn(classes.blockContent, 'block')}>
                     {children}
                 </div>
             </div >

package/src/components/CrossSeller/starIcon.js

@@ -1,12 +1,9 @@
 import React from 'react'
 
-const starIcon = () => {
+const starIcon = ({ width = 14, height = 14 }) => {
     return (
         <>
-            <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-                <path d="M8.00985 2.04754L9.03651 4.10087C9.17651 4.38671 9.54985 4.66087 9.86485 4.71337L11.7257 5.02254C12.9157 5.22087 13.1957 6.08421 12.3382 6.93587L10.8915 8.38254C10.6465 8.62754 10.5123 9.10004 10.5882 9.43837L11.0023 11.2292C11.329 12.6467 10.5765 13.195 9.32235 12.4542L7.57818 11.4217C7.26318 11.235 6.74401 11.235 6.42318 11.4217L4.67901 12.4542C3.43068 13.195 2.67235 12.6409 2.99901 11.2292L3.41318 9.43837C3.48901 9.10004 3.35485 8.62754 3.10985 8.38254L1.66318 6.93587C0.811513 6.08421 1.08568 5.22087 2.27568 5.02254L4.13651 4.71337C4.44568 4.66087 4.81901 4.38671 4.95901 4.10087L5.98568 2.04754C6.54568 0.933372 7.45568 0.933372 8.00985 2.04754Z" fill="#F7C317" stroke="#F7C317" stroke-linecap="round" stroke-linejoin="round" />
-            </svg>
-
+            <svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} viewBox="0 0 24 24" fill="#F7C317"><path d="m13.73 3.51 1.76 3.52c.24.49.88.96 1.42 1.05l3.19.53c2.04.34 2.52 1.82 1.05 3.28l-2.48 2.48c-.42.42-.65 1.23-.52 1.81l.71 3.07c.56 2.43-.73 3.37-2.88 2.1l-2.99-1.77c-.54-.32-1.43-.32-1.98 0l-2.99 1.77c-2.14 1.27-3.44.32-2.88-2.1l.71-3.07c.13-.58-.1-1.39-.52-1.81l-2.48-2.48c-1.46-1.46-.99-2.94 1.05-3.28l3.19-.53c.53-.09 1.17-.56 1.41-1.05l1.76-3.52c.96-1.91 2.52-1.91 3.47 0Z" stroke="#F7C317" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" /></svg>
         </>
     )
 }

package/src/components/FavoriteSeller/favoriteSeller.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import { StoreTitle } from '@magento/venia-ui/lib/components/Head';
+import { useIntl } from 'react-intl';
+import Item from './item';
+
+const favoriteSeller = () => {
+
+    const { formatMessage } = useIntl();
+    const PAGE_TITLE = formatMessage({
+        id: 'favoriteSellerPage.pageTitleText',
+        defaultMessage: 'Favorite Seller'
+    });
+
+    return (
+        <div className='relative'>
+            <StoreTitle>{PAGE_TITLE}</StoreTitle>
+            <div aria-live="polite" className="text-xl font-medium text-left mb-[30px]">
+                {PAGE_TITLE}
+            </div>
+
+            <div className='flex flex-col gap-5'>
+                {
+                    [...Array(5)].map(() => (
+                        <Item />
+                    ))
+                }
+            </div>
+        </div>
+    )
+}
+
+export default favoriteSeller

package/src/components/FavoriteSeller/index.js

@@ -0,0 +1,14 @@
+import FavoriteSeller from './favoriteSeller'
+import AccountLayout from '@riosst100/pwa-marketplace/src/components/AccountLayout';
+
+import React from 'react'
+
+const index = () => {
+    return (
+        <AccountLayout>
+            <FavoriteSeller />
+        </AccountLayout>
+    )
+}
+
+export default index

package/src/components/FavoriteSeller/item.js

@@ -0,0 +1,140 @@
+import React from 'react';
+import { Form } from 'informed';
+import Button from '@magento/venia-ui/lib/components/Button';
+import Image from '@magento/venia-ui/lib/components/Image';
+import Verify from '@riosst100/pwa-marketplace/src/components/CrossSeller/verifyIcon';
+import Star from '@riosst100/pwa-marketplace/src/components/CrossSeller/starIcon';
+import logoImage from '@riosst100/pwa-marketplace/src/components/CrossSeller/logo_seller.png';
+import { Share, Trash } from 'iconsax-react';
+import SocialShare from '@riosst100/pwa-marketplace/src/components/SocialMediaShare';
+import { X } from 'react-feather';
+import Modal from '@riosst100/pwa-marketplace/src/components/Modal';
+import cn from 'classnames';
+import { primary900 } from '@riosst100/pwa-marketplace/src/theme/vars';
+import { FormattedMessage } from 'react-intl';
+
+const item = () => {
+    const [open, setOpen] = React.useState(false);
+
+    const handleRemoveFromFavorite = () => {
+        alert('remove fav seller')
+    }
+
+    const handleGoToSellerPage = () => {
+        alert('to seller page')
+    }
+
+    return (
+        <>
+            <Modal
+                open={open}
+                setOpen={setOpen}
+                className={cn(
+                    'max-w-max !min-h-auto px-[30px] pt-[30px] pb-10',
+                )}
+            >
+                <div className='social_share-container flex flex-col gap-y-7'>
+                    <div className='flex justify-between'>
+                        <div className='text-lg font-semibold'>
+                            Share to your friends
+                        </div>
+                        <button onClick={() => { setOpen(!open) }} >
+                            <X size={24} color={primary900} />
+                        </button>
+                    </div>
+                    <div className='flex flex-row border border-gray-100 rounded-md px-5 py-2.5 gap-x-2.5 items-center'>
+                        <div className='flex flex-col'>
+                            <div className='text-[14px] font-normal'>
+                                Zen Market.TCG
+                            </div>
+                            <div className='text-[12px] font-normal text-gray-200'>
+                                zenmarket-tcg.link
+                            </div>
+                        </div>
+                    </div>
+                    <SocialShare rootClassName="justify-center" />
+                </div>
+            </Modal>
+            <div className='border border-gray-100 rounded-md p-5 flex flex-col md_flex-row justify-between gap-y-4'>
+                <div className='seller_info-container flex flex-row gap-x-[15px]'>
+                    <div className='logo_wrapper w-[100px] h-[100px]'>
+                        <Image
+                            alt='seller name'
+                            className="relative mt-[-5px]"
+                            src={logoImage}
+                        />
+                    </div>
+                    <div className='flex flex-col gap-y-[15px]'>
+                        <div className='flex flex-col gap-[6px]'>
+                            <div className='seller_summary-wrapper flex flex-row gap-x-2.5 items-center'>
+                                <div className='seller_name text-lg font-semibold leading-6'>
+                                    Zen Market
+                                </div>
+                                <div className='seller_badge flex flex-row gap-x-[5px] items-center leading-6'>
+                                    <Verify />
+                                    <span className='text-xs font-medium text-gray-600-transparent capitalize'>
+                                        Verified
+                                    </span>
+                                </div>
+                            </div>
+                            <div className='flex flex-row gap-x-[5px] items-center'>
+                                <span className='font-normal text-[12px] text-gray-200 '>
+                                    Jurong West
+                                </span>
+                            </div>
+                        </div>
+                        <div className='flex gap-4'>
+                            <Button
+                                classes={{
+                                    content: 'gap-1.5 grid-flow-col inline-grid items-center justify-center justify-items-center capitalize font-medium text-[14px]',
+                                    rootClass: 'py-[0px] h-9 hover_border-blue-700'
+                                }}
+                                onClick={handleGoToSellerPage}
+                            >
+                                <FormattedMessage
+                                    id={'favoriteSeller.visitStore'}
+                                    defaultMessage={'Visit Store'}
+                                />
+                            </Button>
+                            <div
+                                className='flex items-center justify-center gap-[5px] p-[9px] relative rounded-[30px] overflow-hidden border border-solid border-blue-600 hover_border-blue-700 cursor-pointer w-9 h-9'
+                                onClick={() => { setOpen(!open) }}
+                            >
+                                <Share
+                                    size="15"
+                                    className='text-blue-600 group-hover_text-blue-800 left-[-1px]'
+                                />
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div className='flex flex-row justify-between md_justify-center items-center gap-5'>
+                    <div className='flex flex-col gap-y-2'>
+                        <div className='rating_sales flex flex-row gap-x-[5px] items-center'>
+                            <Star width={18} height={18} />
+                            <p className='font-semibold text-[18px] text-gray-600'>
+                                4.7
+                            </p>
+                        </div>
+                        <span className='text-gray-800 text-xs'>
+                            <FormattedMessage
+                                id={'favoriteSeller.RatingAndReviews'}
+                                defaultMessage={'Rating & Reviews'}
+                            />
+                        </span>
+
+                    </div>
+                    <Button
+                        data-cy="Product-Section-removeFavorite"
+                        onClick={handleRemoveFromFavorite}
+                        className="min-w-min border border-gray-200 rounded-full border-solid w-7 h-7 flex items-center justify-center hover_border-gray-600"
+                    >
+                        <Trash size="16" color="#999999" />
+                    </Button>
+                </div>
+            </div>
+        </>
+    )
+}
+
+export default item

package/src/components/FilterTop/CurrentTopFilters/currentTopFilter.js

@@ -31,7 +31,7 @@ const CurrentTopFilter = props => {
         }
     );
 
-    return group != "shopby" ? (
+    return group != "trains" && group != "trains_gauge" && group != "category" && group != "shopby" ? (
         <span className={classes.item} data-cy="CurrentTopFilter-root">
             <Trigger
                 action={handleClick}

package/src/components/FilterTop/FilterBlockList/filterTopItem.js

@@ -27,7 +27,9 @@ const FilterTopItem = props => {
         [group, item, onApply, removeGroup, toggleItem]
     );
 
-    const element = group == "shopby" || group == "shopby_with_all" ? (
+    const element = group == "category" ? (
+        <Link className={classes.item} to={'/'+value}>{title}</Link>
+    ) : group == "shopby" || group == "shopby_with_all" ? (
         <Link className={classes.item} to={search ? search + '&shopby=' + value : '?shopby=' + value}>{title}</Link>
     ) : (
         activeFilters.includes(value) ? (

package/src/components/FilterTop/FilterBlockList/filterTopItemGroup.js

@@ -85,7 +85,7 @@ const FilterTopItemGroup = props => {
         <div className={classes.root}>
             {radioItems}
             {filterElements && filterElements.length > 10 ? <span className={classes.item}><b>More Item</b></span> : ''}
-            {filterElements && filterElements.length ? filterElements : group != "shopby" ? (<span className={classes.item}><b>All</b></span>) : ''}
+            {filterElements && filterElements.length ? filterElements : group != "trains" && group != "trains_gauge" && group != "category" && group != "shopby" ? (<span className={classes.item}><b>All</b></span>) : ''}
         </div>
     );
 };

package/src/components/FilterTop/filterTop.js

@@ -22,8 +22,8 @@ const SCROLL_OFFSET = 150;
  * @param {Object} props.filters - filters to display
  */
 const FilterTop = props => {
-    const { filters, filterCountToOpen, allowedFilters, category } = props;
-    const talonProps = useFilterTop({ filters, category });
+    const { shopby, filters, filterCountToOpen, allowedFilters, category } = props;
+    const talonProps = useFilterTop({ shopby, filters, category });
     const {
         filterApi,
         filterItems,

package/src/components/LiveChat/chatContent.js

@@ -6,19 +6,19 @@ const chatContent = (props) => {
 
     return (
         <>
-            <div className='flex flex-col gap-2'>
+            <div className='flex flex-col gap-2 w-full'>
                 {chatData.map((chat) => {
                     return (
                         <div
                             className={cn(
-                                'w-full max-w-[70%] flex flex-col gap-1',
-                                chat.type === 'seller' ? 'self-start ' : 'self-end ',
+                                'w-fit max-w-[70%] flex flex-col gap-1',
+                                chat.type === 'seller' ? 'self-start ' : 'self-end items-end',
 
                             )}
                         >
                             <div
                                 className={cn(
-                                    'w-full py-2 px-3 rounded-md flex flex-col',
+                                    'w-fit py-2 px-3 rounded-md flex flex-col',
                                     chat.type === 'seller' ? 'bg-gray-150 rounded-tl-none' : ' bg-[#D9D9D9] rounded-tr-none',
 
                                 )}

package/src/components/RFQ/index.js

@@ -0,0 +1,39 @@
+import React, { useState } from 'react';
+import Button from '@magento/venia-ui/lib/components/Button';
+import { useIntl } from 'react-intl';
+import ModalRFQ from './modalRfq';
+
+const AuctionDetail = (props) => {
+
+    const [open, setOpen] = useState(false);
+    const { formatMessage } = useIntl();
+
+    return (
+        <>
+            <ModalRFQ
+                open={open}
+                setOpen={setOpen}
+            />
+
+            <Button
+                data-cy="ProductFullDetail-RFQ"
+                classes={{
+                    content: 'normal-case font-semibold text-[16px]'
+                }}
+                priority="low"
+                type="submit"
+                onClick={() => { setOpen(true) }}
+            >
+                {
+                    formatMessage({
+                        id: 'productFullDetail.RequestQuote',
+                        defaultMessage:
+                            'Request a Quote'
+                    })
+                }
+            </Button>
+        </>
+    )
+}
+
+export default AuctionDetail;