@riosst100/pwa-marketplace 2.1.0 → 2.1.2

package/package.json

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

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/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
     };
 };