@riosst100/pwa-marketplace 2.0.9 → 2.1.0

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/MegaMenu/customMenuItems.js

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

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

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

package/src/components/MiniatureGameSets/miniatureGameSets.js

@@ -0,0 +1,297 @@
+import React, { Fragment, useEffect, useMemo, useState } from 'react';
+import ErrorView from '@magento/venia-ui/lib/components/ErrorView';
+import { StoreTitle, Meta } from '@magento/venia-ui/lib/components/Head';
+import { useMiniatureGameSets } from '@riosst100/pwa-marketplace/src/talons/MiniatureGameSets/useMiniatureGameSets';
+import { Link } from 'react-router-dom';
+import resourceUrl from '@magento/peregrine/lib/util/makeUrl';
+import defaultClasses from './miniatureGameSets.module.css';
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import cn from 'classnames';
+import Divider from '@riosst100/pwa-marketplace/src/components/Divider';
+import { MiniatureGameSetsShimmer } from '@riosst100/pwa-marketplace/src/components/MiniatureGameSets';
+import CustomSortBy from '@riosst100/pwa-marketplace/src/components/CustomSortBy';
+import ArraySearchInput from '@riosst100/pwa-marketplace/src/components/ArraySearchInput';
+import { useCustomSort } from '@riosst100/pwa-marketplace/src/hooks/useCustomSort';
+import Breadcrumbs from '@magento/venia-ui/lib/components/Breadcrumbs';
+
+const MiniatureGameSets = props => {
+    const { categoryId } = props
+
+    const { location } = globalThis;
+
+    const query = new URLSearchParams(location.search);
+
+    const [active, setActive] = useState('all');
+    const [activeTab, setActiveTab] = useState('all');
+
+    const [searchQuery, setSearchQuery] = useState('');
+    
+    const shopby = query.get('shopby') || null;
+    const setType = query.get('set_type') || null;
+
+    let defaultSort = {
+        sortText: 'All (A-Z)',
+        value: 'all'
+    };
+    
+    if (shopby == "release_year") {
+        defaultSort = {
+            sortText: 'All (By Year)',
+            value: 'date'
+        };
+    }
+
+    // if (productType == "expansion_sets") {
+    //     defaultSort = {
+    //         sortText: 'All (Expansion Sets)',
+    //         value: 'all'
+    //     };
+    // }
+    
+    // Sorting
+    const sortProps = useCustomSort({ sortFromSearch: false, defaultSort: defaultSort});
+    const [currentSort] = sortProps;
+    // const [sortBy, setSortBy] = useState({
+    //     sortText: 'All (A-Z)',
+    //     value: 'all'
+    // });
+
+    // let availableSortBy = [
+    //     {
+    //         'label': 'All (A-Z)',
+    //         'value': 'all'
+    //     },
+    //     {
+    //         'label': 'By Year',
+    //         'value': 'newest'
+    //     }
+    // ];
+
+    const classes = useStyle(defaultClasses);
+
+    const talonProps = useMiniatureGameSets({ searchQuery, setActive, currentSort, shopby, setType, categoryId, activeTab });
+
+    const { error, loading, miniatureGameSets, categoryUrlSuffix, categoryUrlKey, productType, filteredMiniatureGameSets, availableGroups, category } = talonProps;
+
+    if (loading && !miniatureGameSets)
+        return <MiniatureGameSetsShimmer />;
+    if (error && !miniatureGameSets) return <ErrorView />;
+
+    if (!miniatureGameSets && !loading && !error) {
+        return <MiniatureGameSetsShimmer />;
+    }
+
+    const setsLengthArr = [];
+
+    const newMiniatureGameSets = searchQuery ? filteredMiniatureGameSets : miniatureGameSets;
+
+    // useEffect(() => {
+        if (miniatureGameSets && miniatureGameSets.length) {
+            miniatureGameSets.map((setRelease, index) => {
+                const { group, sets } = setRelease;
+
+                setsLengthArr[group] = sets.length
+            })
+        }
+    // }, [miniatureGameSets])
+
+    const splitToNChunks = (array, n) => {
+        let result = [];
+        for (let i = n; i > 0; i--) {
+            result.push(array.splice(0, Math.ceil(array.length / i)));
+        }
+        return result;
+    }
+
+    let allSetsTitle = "Sets";
+    let attributeCode = "lego_set_name";
+    let byYearTitle = "By Year";
+    if (shopby == "singles") {
+        attributeCode = "lego_set_name";
+        allSetsTitle = "Singles";
+        byYearTitle = "By Year";
+    }
+
+    const setRelases = newMiniatureGameSets && newMiniatureGameSets.length && newMiniatureGameSets.map((setRelease, index) => {
+        const { group, sets } = setRelease;
+
+        const setsResult = [];
+
+        if (sets.length) {
+            sets.map((set, index) => {
+                const { set_name, option_id, release_year } = set;
+
+                const categoryUrl = resourceUrl(
+                    `/${category?.url_path}${categoryUrlSuffix || ''}?${attributeCode}[filter]=${set_name},${option_id}`
+                );
+
+                setsResult.push(<li className='list-none'>
+                    <Link to={categoryUrl} className="hover_bg-darkblue-900 hover_text-white w-full block text-[14px] py-[2px] px-2">
+                        {set_name}
+                    </Link>
+                </li>)
+            })
+        }
+
+        let setsResultSplitted = [];
+        if (active == group || newMiniatureGameSets.length == 1) {
+            setsResultSplitted = splitToNChunks(setsResult, 3);
+        }
+        
+        return (
+            <>
+                {active == "all" && newMiniatureGameSets.length > 1 ?
+                <div className={cn('singles_group-wrapper mb-4 px-2 inline-block', classes.singlesGroupWrapper)}>
+                    <div className='singles_item_group_letter text-xl font-medium border-b border-gray-100 pb-1 mb-2' >
+                        {group}
+                    </div>
+                    <div className={cn('singles_item-list flex flex-col')}>{setsResult}</div>
+                </div> : ''}
+                {active == group || newMiniatureGameSets.length == 1 ? setsResultSplitted && setsResultSplitted.length && setsResultSplitted.map((setsResult, index) =>
+                    <div key={index} className={cn('singles_group-wrapper mb-4 px-2 inline-block', classes.singlesGroupWrapper)}>
+                        {index == 0 ? <div className='singles_item_group_letter text-xl font-medium border-b border-gray-100 pb-1 mb-2'>{group}</div> : 
+                        <div className='singles_item_group_letter text-xl font-medium pb-1 mb-2' style={{"marginTop":"35px"}}></div>}
+                        <div className={cn('singles_item-list flex flex-col')}>{setsResult}</div>
+                    </div>
+                )
+                 : ''}
+            </>
+        );
+    });
+
+    const handleActive = (val) => {
+        setActive(val);
+
+        setSearchQuery('')
+    }
+
+    const handleActiveTab = (val) => {
+        setActiveTab(val);
+        setActive('all')
+
+        setSearchQuery('')
+    }
+    const handleSearchQuery = (val) => {
+        setSearchQuery(val)
+        setActive('all')
+    }
+
+    let alpha = ['#', 'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z'];
+
+    let title = "Sets";
+    if (activeTab == "year") {
+        title = "Sets | By Year";
+    }
+
+    if (shopby == "singles") {
+        title = "Singles";
+        if (activeTab == "year") {
+            title = "Singles | By Year";
+        }
+    }
+    
+
+    return (
+        <Fragment>
+            <StoreTitle>{title}</StoreTitle>
+            <Breadcrumbs categoryId={categoryId} customPage={title} />
+            <ul className={classes.nav}>
+                <li className={classes.nav_item}>
+                    <button
+                        onClick={() => {
+                            handleActiveTab('year')
+                        }}
+                    >
+                        {activeTab == 'year' ? <b>{byYearTitle}</b> : byYearTitle}
+                    </button>
+                </li>
+                <li className={classes.nav_item}>
+                    <button
+                        onClick={() => {
+                            handleActiveTab('all')
+                        }}
+                    >
+                        {activeTab == 'all' ? <b>{allSetsTitle}</b> : allSetsTitle}
+                    </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}>
+                {availableGroups.map((group, index) => (
+                <li key={index} className={classes.nav_item}>
+                    <button
+                        onClick={() => {
+                            handleActive(group)
+                        }}
+                    >
+                        {active == group ? <b>{group}</b> : group}
+                    </button>
+                </li>
+            ))}
+            <li className={classes.nav_item}>
+                <button
+                    onClick={() => {
+                        handleActive('all')
+                    }}
+                >
+                    {active == 'all' ? <b>All</b> : 'All'}
+                </button>
+            </li>
+            </ul>}
+            <div className='border border-gray-100 px-6'>
+                {miniatureGameSets ? (
+                    <div
+                        className={classes.toolbar}
+                    >
+                        <div style={{"width":"35%"}}><ArraySearchInput active={active} searchQuery={searchQuery} placeholder="Search sets..." isOpen={true} setSearchQuery={handleSearchQuery} /></div>
+                        {/* <CustomSortBy sortProps={sortProps} availableSortMethods={availableSortBy} /> */}
+                    </div>
+                ) : ''}
+                <section className='single_list-indexing-container relative m-auto pt-5'>
+                    {activeTab != "year" && <ul className='flex gap-2 justify-center flex-wrap'>
+                        <li>
+                            <button
+                                className={cn(
+                                    'rounded-md border border-solid border-gray-100 p-2 min-w-[28px]',
+                                    'leading-4 font-medium text-base hover_bg-gray-50'
+                                )}
+                                onClick={() => {
+                                    handleActive('all')
+                                }}
+                            >
+                                {active == 'all' ? <b>All</b> : 'All'}
+                            </button>
+                        </li>
+                        {alpha.map((letter, index) => (
+                            <li key={index}>
+                                <button
+                                    className={cn(
+                                        'rounded-md border border-solid border-gray-100 p-2 min-w-[28px]',
+                                        'leading-4 font-medium text-base ',
+                                        setsLengthArr[letter] > 0 ? 'hover_bg-gray-50' : 'bg-gray-100 text-gray-400',
+                                    )}
+                                    onClick={() => {
+                                        handleActive(letter)
+                                    }}
+                                    disabled={setsLengthArr[letter] > 0 ? false : true}
+                                >
+                                    {active == letter ? <b>{letter}</b> : letter}
+                                </button>
+                            </li>
+                        ))}
+                    </ul>}
+                </section>
+                <Divider className="mb-5 px-4 mt-5" />
+                <section className='singles-container'>
+                    <div className={cn('singles-wrapper block -mx-4', classes.singlesWrapper)}>
+                        {newMiniatureGameSets && newMiniatureGameSets.length ? setRelases : (searchQuery ? <div className='singles_group-wrapper mb-4 px-2 inline-block w-full'>No sets found for <b>{searchQuery}</b> search query.</div> : <div className='singles_group-wrapper mb-4 px-2 inline-block w-full'>No sets found.</div>)}
+                    </div>
+                </section>
+            </div>
+        </Fragment>
+    );
+}
+
+export default MiniatureGameSets;