@riosst100/pwa-marketplace 2.1.1 → 2.1.3

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@riosst100/pwa-marketplace",
   "author": "riosst100@gmail.com",
-  "version": "2.1.1",
+  "version": "2.1.3",
   "main": "src/index.js",
   "pwa-studio": {
     "targets": {
@@ -10,13 +10,13 @@
   },
   "dependencies": {
     "axios": "^1.6.5",
+    "formik": "^2.4.6",
     "iconsax-react": "^0.0.8",
     "react-countdown": "^2.3.5",
-    "react-phone-number-input": "^3.3.9",
-    "react-slick": "^0.30.2",
     "react-datepicker": "4.10.0",
     "react-dropzone": "^14.2.3",
-    "formik": "^2.4.6",
+    "react-phone-number-input": "^3.3.9",
+    "react-slick": "^0.30.2",
     "yup": "^1.4.0"
   },
   "license": "MIT",

package/src/components/FavoriteSeller/AddToListButton/addToListButton.js

@@ -0,0 +1,54 @@
+import React, { useRef } from 'react';
+import { element, func, shape, string } from 'prop-types';
+import { Heart } from 'react-feather';
+import { useAddToFavoriteListButton } from '@riosst100/pwa-marketplace/src/talons/FavoriteSeller/AddToListButton/useAddToFavoriteListButton';
+import { useButton } from 'react-aria';
+
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import Icon from '@magento/venia-ui/lib/components/Icon';
+import defaultClasses from './addToListButton.module.css';
+import { useCommonToasts } from '@magento/venia-ui/lib/components/Wishlist/AddToListButton/useCommonToasts';
+
+const HeartIcon = <Heart color='#f76b1c' size={14} variant="Outline" className='stroke-[#f76b1c]' />;
+
+const AddToFavoriteListButton = props => {
+    const talonProps = useAddToFavoriteListButton(props);
+    const buttonRef = useRef();
+
+    const {
+        buttonProps,
+        buttonText,
+        errorToastProps,
+        isSelected,
+        loginToastProps,
+        successToastProps
+    } = talonProps;
+
+    useCommonToasts({ errorToastProps, loginToastProps, successToastProps });
+    const { buttonProps: ariaButtonProps } = useButton(buttonProps, buttonRef);
+
+    const classes = useStyle(defaultClasses, props.classes);
+    const buttonClass = isSelected ? classes.root_selected : classes.root;
+
+    return (
+        <button ref={buttonRef} className={buttonClass} {...ariaButtonProps}>
+            {props.icon}
+        </button>
+    );
+};
+
+export default AddToFavoriteListButton;
+
+AddToFavoriteListButton.defaultProps = {
+    icon: HeartIcon
+};
+
+AddToFavoriteListButton.propTypes = {
+    afterAdd: func,
+    beforeAdd: func,
+    classes: shape({
+        root: string,
+        root_selected: string
+    }),
+    icon: element
+};

package/src/components/FavoriteSeller/AddToListButton/addToListButton.module.css

@@ -0,0 +1,17 @@
+.root {
+    composes: gap-x-2xs from global;
+    composes: inline-flex from global;
+    composes: items-center from global;
+    min-height: 3rem;
+    composes: min-w-[3rem] from global;
+}
+
+.root_selected {
+    composes: root;
+
+    --selectedColor: rgb(var(--venia-global-color-red-400));
+    --fill: var(--selectedColor);
+    --stroke: var(--selectedColor);
+
+    composes: no-underline from global;
+}

package/src/components/FavoriteSeller/AddToListButton/index.js

@@ -0,0 +1 @@
+export { default } from './addToListButton';

package/src/components/FavoriteSeller/AddToListButton/useCommonToasts.js

@@ -0,0 +1,33 @@
+import React, { useEffect } from 'react';
+import { AlertCircle, Check, Info } from 'react-feather';
+import { useToasts } from '@magento/peregrine';
+
+import Icon from '@magento/venia-ui/lib/components/Icon';
+
+const CheckIcon = <Icon size={20} src={Check} />;
+const ErrorIcon = <Icon size={20} src={AlertCircle} />;
+const InfoIcon = <Icon size={20} src={Info} />;
+
+export const useCommonToasts = props => {
+    const { errorToastProps, loginToastProps, successToastProps } = props;
+
+    const [, { addToast }] = useToasts();
+
+    useEffect(() => {
+        if (loginToastProps) {
+            addToast({ ...loginToastProps, icon: InfoIcon });
+        }
+    }, [addToast, loginToastProps]);
+
+    useEffect(() => {
+        if (successToastProps) {
+            addToast({ ...successToastProps, icon: CheckIcon });
+        }
+    }, [addToast, successToastProps]);
+
+    useEffect(() => {
+        if (errorToastProps) {
+            addToast({ ...errorToastProps, icon: ErrorIcon });
+        }
+    }, [addToast, errorToastProps]);
+};

package/src/components/FavoriteSellerPage/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/FavoriteSellerPage/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/FavoriteSellerPage/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-medium'>
+                            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-medium 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-medium 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/SellerDetail/sellerDetail.js

@@ -1,4 +1,4 @@
-import React, { Fragment, useState } from 'react';
+import React, { Fragment, Suspense, 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';
@@ -22,13 +22,14 @@ 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 FavoriteSellerButton = React.lazy(() => import('@riosst100/pwa-marketplace/src/components/FavoriteSeller/AddToListButton'));
 
 const SellerDetail = props => {
     const talonProps = useSeller({
         mapSeller
     });
 
-    const { error, loading, seller } = talonProps;
+    const { error, loading, seller, favoriteSellerButtonProps } = talonProps;
 
     if (loading && !seller)
         return '';
@@ -71,6 +72,10 @@ const SellerDetail = props => {
         setOpenChat(!openChat);
     }
 
+    const addToFavourite = () => {
+        
+    }
+
     return (
         <div className=' py-8'>
             <Slider seller={seller} rootClassname='mb-[30px]' />
@@ -113,36 +118,31 @@ 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]">
-                                <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
                                 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"
-                                )}
+                                className='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]'
                                 onClick={toggleChat}
                             >
                                 <Message color='#FFFFFF' size={14} variant="Outline" className='stroke-[#FFFFFF]' />
-                                <span>
+                                <div class="relative xs_hidden lg_flex w-fit font-medium text-[#fff] text-base tracking-[0] leading-[20px] whitespace-nowrap">
                                     <FormattedMessage
                                         id={'seller.chatWithSeller'}
                                         defaultMessage={'Chat With Seller'}
                                     />
-                                </span>
+                                </div>
                             </Button>
-                            <button class="flex items-center justify-center gap-[5px] p-[11px] relative bg-white rounded-[30px] overflow-hidden border border-solid border-[#f76b1c]">
-                                <Heart color='#f76b1c' size={14} variant="Outline" className='stroke-[#f76b1c]' />
-                            </button>
+                            <Suspense fallback={null}>
+                                <FavoriteSellerButton
+                                    classes={{
+                                        root: 'flex items-center justify-center gap-[5px] p-[11px] relative bg-white rounded-[30px] overflow-hidden border border-solid border-[#f76b1c]'
+                                    }}
+                                    {...favoriteSellerButtonProps}
+                                    buttonText={''}
+                                />
+                            </Suspense>
                             <button class="flex items-center justify-center gap-[5px] p-[11px] relative bg-white rounded-[30px] overflow-hidden border border-solid border-[#f76b1c]">
                                 <Share color='#f76b1c' size={14} variant="Outline" className='stroke-[#f76b1c]' />
                             </button>

package/src/intercept.js

@@ -133,7 +133,7 @@ module.exports = targets => {
       exact: true,
       name: "FavoriteSeller",
       pattern: "/favorite-seller",
-      path: require.resolve("./components/FavoriteSeller/index.js"),
+      path: require.resolve("./components/FavoriteSellerPage/index.js"),
       authed: true,
     },
     {

package/src/overwrites/peregrine/lib/talons/AccountMenu/useAccountMenuItems.js

@@ -30,7 +30,7 @@ export const useAccountMenuItems = props => {
         //     url: ''
         // },
         {
-            name: 'Favorites Lists',
+            name: 'Wishlist',
             id: 'accountMenu.favoritesListsLink',
             url: '/wishlist'
         },

package/src/overwrites/venia-ui/lib/components/Header/header.js

@@ -125,11 +125,6 @@ const Header = props => {
                             <div className='flex w-full justify-end lg_hidden'>
                                 <SearchNormal size="25" color="#280135" variant="Outline" className='mr-4' />
                             </div>
-                            <Suspense fallback={searchBarFallback}>
-                                <Route>
-                                    <SearchBar isOpen={true} ref={searchRef} />
-                                </Route>
-                            </Suspense>
                         </div>
                         <div className={cn(classes.secondaryActions, 'lg_gap-x-5 pl-5 border-l-[1px] border-gray-100')}>
                             {/* <SearchTrigger

package/src/overwrites/venia-ui/lib/components/ProductFullDetail/productFullDetail.js

@@ -691,12 +691,6 @@ const ProductFullDetail = props => {
                 <div className='block lg_hidden'>
                     <ProductDetailsCollapsible data={dataTabs} />
                 </div>
-                <Tabs
-                    data={dataTabs}
-                    tabContentWrapperClassName='!p-0'
-                    hasContent
-                    tabWrapperClassName='xl_gap-x-[60px] justify-center'
-                />
             </section>
 
             <section className='pt-8 lg_pt-10'>

package/src/talons/FavoriteSeller/AddToListButton/addToListButton.gql.js

@@ -0,0 +1,30 @@
+import { gql } from '@apollo/client';
+
+export const ADD_TO_FAVORITE_SELLER_LIST = gql`
+    mutation AddSellerToFavoriteList(
+        $sellerId: ID!
+    ) {
+        addSellerToFavoritelist(
+            sellerId: $sellerId
+        ) {
+            favorite {
+                id
+                customer_id
+                creation_time
+                status
+            }
+            error
+        }
+    }
+`;
+
+export const GET_SELLER_IN_FAVORITE_LISTS = gql`
+    query GetProductsInWishlistsForGallery {
+        customerWishlistProducts @client
+    }
+`;
+
+export default {
+    addToFavoriteSellerMutation: ADD_TO_FAVORITE_SELLER_LIST,
+    getSellerInFavoriteListsQuery: GET_SELLER_IN_FAVORITE_LISTS
+};

package/src/talons/FavoriteSeller/AddToListButton/useAddToFavoriteListButton.js

@@ -0,0 +1,154 @@
+import { useCallback, useMemo, useState } from 'react';
+import { useIntl } from 'react-intl';
+import { useMutation, useQuery } from '@apollo/client';
+
+import { useUserContext } from '@magento/peregrine/lib/context/user';
+import mergeOperations from '@magento/peregrine/lib/util/shallowMerge';
+
+import defaultOperations from './addToListButton.gql';
+
+export const useAddToFavoriteListButton = props => {
+    const { afterAdd, beforeAdd, item } = props;
+
+    const operations = mergeOperations(defaultOperations, props.operations);
+
+    const [
+        addToFavoriteSeller,
+        {
+            data: addSellerData,
+            error: errorAddingProduct,
+            loading: isAddingToList
+        }
+    ] = useMutation(operations.addToFavoriteSellerMutation);
+
+    // const {
+    //     client,
+    //     data: { customerFavoriteSellers }
+    // } = useQuery(operations.getSellerInFavoriteListsQuery);
+
+    // const isSelected = useMemo(() => {
+    //     return (
+    //         customerFavoriteSellers.includes(item.seller_id) || isAddingToList
+    //     );
+    // }, [customerFavoriteSellers, isAddingToList, item.seller_id]);
+    const isSelected = false;
+
+    const [showLoginToast, setShowLoginToast] = useState(0);
+
+    const { formatMessage } = useIntl();
+    const [{ isSignedIn }] = useUserContext();
+
+    const handleClick = useCallback(async () => {
+        console.log(item)
+        if (!isSignedIn) {
+            setShowLoginToast(current => ++current);
+        } else {
+            try {
+                if (beforeAdd) {
+                    await beforeAdd();
+                }
+
+                await addToFavoriteSeller({
+                    variables: { sellerId: item.seller_id }
+                });
+
+                // client.writeQuery({
+                //     query: operations.getSellerInFavoriteListsQuery,
+                //     data: {
+                //         customerFavoriteSellers: [
+                //             ...customerFavoriteSellers,
+                //             item.seller_id
+                //         ]
+                //     }
+                // });
+
+                // if (afterAdd) {
+                //     afterAdd();
+                // }
+            } catch (error) {
+                console.error(error);
+            }
+        }
+    }, [
+        addToFavoriteSeller,
+        afterAdd,
+        beforeAdd,
+        // client,
+        // customerFavoriteSellers,
+        isSignedIn,
+        item,
+        // operations.getSellerInFavoriteListsQuery
+    ]);
+
+    const loginToastProps = useMemo(() => {
+        if (showLoginToast) {
+            return {
+                type: 'info',
+                message: formatMessage({
+                    id: 'favoriteSeller.galleryButton.loginMessage',
+                    defaultMessage:
+                        'Please sign-in to your Account to save seller for later.'
+                }),
+                timeout: 5000
+            };
+        }
+
+        return null;
+    }, [formatMessage, showLoginToast]);
+
+    const successToastProps = useMemo(() => {
+        if (addSellerData) {
+            return {
+                type: 'success',
+                message: formatMessage({
+                    id: 'favoriteSeller.galleryButton.successMessageGeneral',
+                    defaultMessage:
+                        'Seller successfully added to your favorites list.'
+                }),
+                timeout: 5000
+            };
+        }
+
+        return null;
+    }, [addSellerData, formatMessage]);
+
+    const errorToastProps = useMemo(() => {
+        if (errorAddingProduct) {
+            return {
+                type: 'error',
+                message: formatMessage({
+                    id: 'favoriteSeller.galleryButton.addError',
+                    defaultMessage:
+                        'Something went wrong adding the product to your favorite seller list.'
+                }),
+                timeout: 5000
+            };
+        }
+
+        return null;
+    }, [errorAddingProduct, formatMessage]);
+
+    const buttonProps = useMemo(
+        () => ({
+            'aria-label': formatMessage({
+                id: 'favoriteSellerButton.addText',
+                defaultMessage: 'Add to Favorites'
+            }),
+            isDisabled: false,
+            onPress: handleClick,
+            type: 'button'
+        }),
+        [formatMessage, handleClick]
+    );
+
+    return {
+        buttonProps,
+        buttonText: props.buttonText && props.buttonText(isSelected),
+        // customerFavoriteSellers,
+        errorToastProps,
+        handleClick,
+        isSelected,
+        loginToastProps,
+        successToastProps
+    };
+};

package/src/talons/Seller/useSeller.js

@@ -2,6 +2,7 @@ import { useQuery } from '@apollo/client';
 import { useEffect, useMemo } from 'react';
 import { useLocation } from 'react-router-dom';
 import { useAppContext } from '@magento/peregrine/lib/context/app';
+import { useIntl } from 'react-intl';
 
 import mergeOperations from '@magento/peregrine/lib/util/shallowMerge';
 import DEFAULT_OPERATIONS from './seller.gql';
@@ -9,6 +10,8 @@ import DEFAULT_OPERATIONS from './seller.gql';
 export const useSeller = props => {
     const { mapSeller } = props;
 
+    const { formatMessage } = useIntl();
+
     const operations = mergeOperations(DEFAULT_OPERATIONS, props.operations);
     const { getStoreConfigData, getSellerDetailQuery } = operations;
     const { pathname } = useLocation();
@@ -63,9 +66,24 @@ export const useSeller = props => {
         setPageLoading(isBackgroundLoading);
     }, [isBackgroundLoading, setPageLoading]);
 
+    const favoriteSellerOptions = useMemo(() => {
+        const options = {
+            seller_id: seller.seller_id
+        };
+
+        return options;
+    }, [seller]);
+
+    const favoriteSellerButtonProps = {
+        buttonText: '',
+        item: favoriteSellerOptions,
+        storeConfig: storeConfigData ? storeConfigData.storeConfig : {}
+    };
+
     return {
         error,
         loading,
-        seller
+        seller,
+        favoriteSellerButtonProps
     };
 };