@riosst100/pwa-marketplace 2.0.8 → 2.0.9

package/src/components/LegoSets/legoSets.shimmer.js

@@ -1,50 +0,0 @@
-import React from 'react';
-import { shape, string } from 'prop-types';
-import { useStyle } from '@magento/venia-ui/lib/classify';
-
-import Shimmer from '@magento/venia-ui/lib/components/Shimmer';
-import defaultClasses from './legoSets.module.css';
-import cn from 'classnames';
-import Divider from '@riosst100/pwa-marketplace/src/components/Divider';
-
-const LegoSets = props => {
-    const classes = useStyle(defaultClasses, props.classes);
-
-    return (
-        <>
-            <h1 className='mx-auto relative block text-xl font-bold text-center pt-10 pb-4'><Shimmer width="25%" height="6vh" /></h1>
-            <div className='border border-gray-100 px-6'>
-                <center>
-                    <section className='single_list-indexing-container relative m-auto pt-5'>
-                        <Shimmer width="95%" height="6vh" />
-                    </section>
-                </center>
-                <Divider className="mb-5 px-4" />
-                <section className='singles-container'>
-                    <div className={cn('singles-wrapper block -mx-4', classes.singlesWrapper)}>
-                        <div className='singles_group-wrapper mb-4 px-2 inline-block w-full'>
-                            <div className='singles_item_group_letter text-xl font-medium border-b border-gray-100 pb-1 mb-2' ><Shimmer width="95%" height="100vh" /></div>
-                        </div>
-                        <div className='singles_group-wrapper mb-4 px-2 inline-block w-full'>
-                            <div className='singles_item_group_letter text-xl font-medium border-b border-gray-100 pb-1 mb-2' ><Shimmer width="95%" height="100vh" /></div>
-                        </div>
-                        <div className='singles_group-wrapper mb-4 px-2 inline-block w-full'>
-                            <div className='singles_item_group_letter text-xl font-medium border-b border-gray-100 pb-1 mb-2' ><Shimmer width="95%" height="100vh" /></div>
-                        </div>
-                        <div className='singles_group-wrapper mb-4 px-2 inline-block w-full'>
-                            <div className='singles_item_group_letter text-xl font-medium border-b border-gray-100 pb-1 mb-2' ><Shimmer width="95%" height="100vh" /></div>
-                        </div>
-                        <div className='singles_group-wrapper mb-4 px-2 inline-block w-full'>
-                            <div className='singles_item_group_letter text-xl font-medium border-b border-gray-100 pb-1 mb-2' ><Shimmer width="95%" height="100vh" /></div>
-                        </div>
-                        <div className='singles_group-wrapper mb-4 px-2 inline-block w-full'>
-                            <div className='singles_item_group_letter text-xl font-medium border-b border-gray-100 pb-1 mb-2' ><Shimmer width="95%" height="100vh" /></div>
-                        </div>
-                    </div>
-                </section>
-            </div>
-        </>
-    );
-};
-
-export default LegoSets;

package/src/components/LiveChat/chatContent.js

@@ -1,39 +0,0 @@
-import React from 'react';
-import cn from 'classnames';
-
-const chatContent = (props) => {
-    const { chatData } = props;
-
-    return (
-        <>
-            <div className='flex flex-col gap-2 w-full'>
-                {chatData.map((chat) => {
-                    return (
-                        <div
-                            className={cn(
-                                'w-fit max-w-[70%] flex flex-col gap-1',
-                                chat.type === 'seller' ? 'self-start ' : 'self-end items-end',
-
-                            )}
-                        >
-                            <div
-                                className={cn(
-                                    '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',
-
-                                )}
-                            >
-                                {chat.message}
-                            </div>
-                            <span className='text-[12px] text-right block'>
-                                {chat.timeStamp}
-                            </span>
-                        </div>
-                    )
-                })}
-            </div>
-        </>
-    )
-}
-
-export default chatContent

package/src/components/LiveChat/index.js

@@ -1,52 +0,0 @@
-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

@@ -1,160 +0,0 @@
-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/MegaMenu/customMenuItems.js

@@ -1,138 +0,0 @@
-import React, { useMemo } from 'react';
-import { ChevronDown as ArrowDown } from 'react-feather';
-import { Link } from 'react-router-dom';
-import PropTypes from 'prop-types';
-
-import resourceUrl from '@magento/peregrine/lib/util/makeUrl';
-import { useCustomMenuItems } from '@magento/peregrine/lib/talons/MegaMenu/useCustomMenuItems';
-
-import { useStyle } from '@magento/venia-ui/lib/classify';
-import defaultClasses from './megaMenuItem.module.css';
-import Submenu from './submenu';
-import { ArrowDown2 } from 'iconsax-react';
-import { textPrimary } from '@riosst100/pwa-marketplace/src/theme/vars';
-import cn from 'classnames';
-
-/**
- * The CustomMenuItems component displays mega menu item
- *
- * @param {MegaMenuCategory} props.category
- * @param {String} props.activeCategoryId - uid of active category
- * @param {int} props.mainNavWidth - width of the main nav. It's used for setting min-width of the submenu
- * @param {function} props.onNavigate - function called when clicking on Link
- */
-const CustomMenuItems = props => {
-    const {
-        activeCategoryId,
-        category,
-        mainNavWidth,
-        categoryUrlSuffix,
-        subMenuState,
-        disableFocus,
-        onNavigate,
-        handleSubMenuFocus,
-        handleClickOutside,
-        megaMenuItemClassname,
-        titleClassName,
-    } = props;
-
-    const classes = useStyle(defaultClasses, props.classes);
-    const categoryUrl = resourceUrl(
-        `/${category.url_path}${categoryUrlSuffix || ''}`
-    );
-
-    const talonProps = useCustomMenuItems({
-        category,
-        activeCategoryId,
-        subMenuState,
-        disableFocus
-    });
-
-    const {
-        isFocused,
-        isActive,
-        handleMenuItemFocus,
-        handleCloseSubMenu,
-        isMenuActive,
-        handleKeyDown
-    } = talonProps;
-
-    const itemClassName = isMenuActive
-        ? classes.megaMenuItem_active
-        : classes.megaMenuItem;
-
-    const children = useMemo(() => {
-        return category.children.length ? (
-            <Submenu
-                isFocused={isFocused}
-                subMenuState={subMenuState}
-                items={category.children}
-                shopByItems={category.shop_by}
-                mainNavWidth={mainNavWidth}
-                handleCloseSubMenu={handleCloseSubMenu}
-                categoryUrlSuffix={categoryUrlSuffix}
-                onNavigate={onNavigate}
-            />
-        ) : null;
-    }, [
-        category,
-        isFocused,
-        mainNavWidth,
-        subMenuState,
-        handleCloseSubMenu,
-        categoryUrlSuffix,
-        onNavigate
-    ]);
-
-    const maybeDownArrowIcon = category.children.length ? (
-        <ArrowDown2 className='ml-2 stroke-current' size="16" color={textPrimary} variant="Outline" />
-    ) : null;
-
-    const linkAttributes = category.children.length
-        ? {
-            'aria-label': `Category: ${category.name}. ${category.children.length
-                } sub-categories`
-        }
-        : {};
-
-    return (
-        <div
-            className={cn(itemClassName, megaMenuItemClassname)}
-            data-cy="MegaMenu-CustomMenuItems-megaMenuItem"
-            onMouseEnter={() => {
-                handleSubMenuFocus();
-                handleMenuItemFocus();
-            }}
-            onFocus={() => {
-                handleSubMenuFocus();
-                handleMenuItemFocus();
-            }}
-            onTouchStart={() => {
-                handleSubMenuFocus();
-                handleMenuItemFocus();
-            }}
-            onMouseLeave={e => {
-                handleClickOutside(e);
-                handleCloseSubMenu();
-            }}
-        >
-            <Link
-                {...linkAttributes}
-                onKeyDown={handleKeyDown}
-                className={cn(
-                    isActive ? classes.megaMenuLinkActive : classes.megaMenuLink,
-                    titleClassName
-                )}
-                data-cy="MegaMenu-CustomMenuItems-link"
-                to={categoryUrl}
-                onClick={onNavigate}
-            >
-                {category.name}
-                {maybeDownArrowIcon}
-            </Link>
-            {children}
-        </div>
-    );
-};
-
-export default CustomMenuItems;

package/src/components/MegaMenu/customMenuItems.module.css

@@ -1,31 +0,0 @@
-.megaMenuItem {
-    /* composes: px-3 from global;
-    composes: py-0 from global; */
-}
-
-.megaMenuLink {
-    composes: items-center from global;
-    composes: inline-flex from global;
-    /* min-height: 5rem; */
-}
-
-.megaMenuLinkActive {
-    composes: megaMenuLink;
-    composes: underline from global;
-}
-
-.megaMenuItem_active {
-    composes: megaMenuItem;
-    composes: flex from global;
-}
-
-.arrowDown {
-    composes: leading-[0] from global;
-    composes: pl-2xs from global;
-}
-
-/* TODO @TW: cannot compose */
-.megaMenuItem:hover .megaMenuLink,
-.megaMenuItem:focus .megaMenuLink {
-    text-decoration: underline;
-}

package/src/components/MiniatureGameSets/index.js

@@ -1,2 +0,0 @@
-export { default } from './miniatureGameSets';
-export { default as MiniatureGameSetsShimmer } from './miniatureGameSets.shimmer';