@riosst100/pwa-marketplace 2.8.0 → 2.8.2

package/i18n/en_US.json

@@ -368,6 +368,12 @@
     "productFullDetail.outOfStockProduct": "This item is currently out of stock",
     "productFullDetail.addToCartSuccess": "Product successfully added to cart!",
     "productFullDetail.addToCartError": "Failed to add product to cart.",
+    "favoriteSeller.toastRemoveSuccess": "Successfully removed favorite seller.",
+    "favoriteSeller.toastRemoveError": "Failed to remove favorite seller.",
+    "favoriteSeller.removing": "Removing...",
+    "favoriteSeller.toastUnfollowSuccess": "Successfully unfollowed seller.",
+    "favoriteSeller.toastUnfollowError": "Failed to unfollow seller.",
+    "favoriteSeller.unfollowing": "Unfollowing...",
     "productImageCarousel.previousButtonAriaLabel": "Previous Image",
     "productImageCarousel.nextButtonAriaLabel": "Next Image",
     "productList.each": " ea.",

package/i18n/id_ID.json

@@ -369,6 +369,12 @@
     "productFullDetail.outOfStockProduct": "This item is currently out of stock",
     "productFullDetail.addToCartSuccess": "Produk berhasil ditambahkan ke keranjang!",
     "productFullDetail.addToCartError": "Gagal menambahkan produk ke keranjang.",
+    "favoriteSeller.toastRemoveSuccess": "Berhasil menghapus penjual favorit.",
+    "favoriteSeller.toastRemoveError": "Gagal menghapus penjual favorit.",
+    "favoriteSeller.removing": "Menghapus...",
+    "favoriteSeller.toastUnfollowSuccess": "Berhasil berhenti mengikuti penjual.",
+    "favoriteSeller.toastUnfollowError": "Gagal berhenti mengikuti penjual.",
+    "favoriteSeller.unfollowing": "Sedang berhenti mengikuti...",
     "productImageCarousel.previousButtonAriaLabel": "Previous Image",
     "productImageCarousel.nextButtonAriaLabel": "Next Image",
     "productList.each": " ea.",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@riosst100/pwa-marketplace",
   "author": "riosst100@gmail.com",
-  "version": "2.8.0",
+  "version": "2.8.2",
   "main": "src/index.js",
   "pwa-studio": {
     "targets": {

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

@@ -11,6 +11,7 @@ import { useCommonToasts } from '@magento/venia-ui/lib/components/Wishlist/AddTo
 
 const HeartIcon = <Heart color='#f76b1c' size={14} variant="Outline" className='stroke-[#f76b1c]' />;
 
+
 const AddToFavoriteListButton = props => {
     const talonProps = useAddToFavoriteListButton(props);
     const buttonRef = useRef();
@@ -21,7 +22,8 @@ const AddToFavoriteListButton = props => {
         errorToastProps,
         isSelected,
         loginToastProps,
-        successToastProps
+        successToastProps,
+        isLoading
     } = talonProps;
 
     useCommonToasts({ errorToastProps, loginToastProps, successToastProps });
@@ -30,10 +32,15 @@ const AddToFavoriteListButton = props => {
     const classes = useStyle(defaultClasses, props.classes);
     const buttonClass = isSelected ? classes.root_selected : classes.root;
 
+    // Only hide text on mobile for follow, always show for unfollow
+    const textClass = isSelected
+        ? 'text-[#f76b1c] text-[14px] font-medium whitespace-nowrap'
+        : `text-[#f76b1c] text-[14px] font-medium whitespace-nowrap ${props.hideTextOnMobile ? 'md_block xs_hidden' : ''}`;
+
     return (
-        <button ref={buttonRef} className={buttonClass} {...ariaButtonProps}>
-            {props.icon}
-            {buttonText && <span className={`text-[#f76b1c] text-[14px] font-medium whitespace-nowrap ${props.hideTextOnMobile ? 'md_block xs_hidden' : ''}`}>{buttonText}</span>}
+        <button ref={buttonRef} className={buttonClass} {...ariaButtonProps} disabled={isLoading}>
+            {!isSelected && props.icon}
+            {buttonText && <span className={textClass}>{buttonText}</span>}
         </button>
     );
 };

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

@@ -1,17 +1,22 @@
+
 .root {
     composes: gap-x-2xs from global;
     composes: inline-flex from global;
     composes: items-center from global;
-    min-height: 3rem;
+    /* min-height: 3rem; */
     composes: min-w-[3rem] from global;
+    border: 1px solid #f76b1c;
+    border-radius: 30px;
+    background: #fff;
+    color: #f76b1c;
+    box-sizing: border-box;
+    padding: 8px 14px;
+    font-weight: 500;
+    font-size: 14px;
+    transition: background 0.2s, color 0.2s;
 }
 
 .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/FavoriteSellerPage/favoriteSeller.js

@@ -2,31 +2,40 @@ import React from 'react';
 import { StoreTitle } from '@magento/venia-ui/lib/components/Head';
 import { useIntl } from 'react-intl';
 import Item from './item';
+import useFavoriteSellerList from '@riosst100/pwa-marketplace/src/talons/FavoriteSeller/FavoriteSellerList/useFavoriteSellerList';
 
-const favoriteSeller = () => {
-
+const FavoriteSeller = () => {
     const { formatMessage } = useIntl();
     const PAGE_TITLE = formatMessage({
         id: 'favoriteSellerPage.pageTitleText',
         defaultMessage: 'Favorite Seller'
     });
 
+    // Fetch favorite seller list
+    const { data, loading, error, refetch } = useFavoriteSellerList();
+
     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>
+            {loading ? (
+                <div>Loading...</div>
+            ) : (
+                <div className='flex flex-col gap-5'>
+                    {error && <div>Error loading favorite sellers.</div>}
+                    {data && data.items && data.items.length > 0 ? (
+                        data.items.map(sellerItem => (
+                            <Item key={sellerItem.id} sellerItem={sellerItem} refetchFavoriteSellerList={refetch} />
+                        ))
+                    ) : !error ? (
+                        <div>No favorite sellers found.</div>
+                    ) : null}
+                </div>
+            )}
         </div>
-    )
-}
+    );
+};
 
-export default favoriteSeller
+export default FavoriteSeller;

package/src/components/FavoriteSellerPage/item.js

@@ -5,81 +5,82 @@ 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 { Share } 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';
+import { FormattedMessage, useIntl } from 'react-intl';
+import useRemoveFavoriteSeller from '@riosst100/pwa-marketplace/src/talons/FavoriteSeller/FavoriteSellerList/useRemoveFavoriteSeller';
+import { useState } from 'react';
+import { useToasts } from '@magento/peregrine';
 
-const item = () => {
-    const [open, setOpen] = React.useState(false);
+const Item = ({ sellerItem, refetchFavoriteSellerList }) => {
+    const [open, setOpen] = useState(false);
+    const { remove, loading: removing } = useRemoveFavoriteSeller();
+    const [, { addToast }] = useToasts();
+    const { formatMessage } = useIntl();
 
-    const handleRemoveFromFavorite = () => {
-        alert('remove fav seller')
-    }
+    const handleRemoveFromFavorite = async () => {
+        try {
+            await remove([sellerItem.seller.seller_id]);
+            addToast({
+                type: 'success',
+                message: formatMessage({
+                    id: 'favoriteSeller.toastUnfollowSuccess',
+                    defaultMessage: 'Successfully unfollowed seller.'
+                }),
+                timeout: 3000
+            });
+            if (typeof refetchFavoriteSellerList === 'function') {
+                await refetchFavoriteSellerList();
+            }
+        } catch (e) {
+            addToast({
+                type: 'error',
+                message: formatMessage({
+                    id: 'favoriteSeller.toastUnfollowError',
+                    defaultMessage: 'Failed to unfollow seller.'
+                }),
+                timeout: 3000
+            });
+            console.error('Failed to unfollow seller:', e);
+        }
+    };
 
     const handleGoToSellerPage = () => {
-        alert('to seller page')
-    }
+        if (sellerItem?.seller?.url) {
+            window.location.href = sellerItem.seller.url;
+        } else {
+            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 className='border border-gray-100 rounded-md p-5 flex flex-col md_flex-row justify-between gap-y-4 relative'>
+                {removing && (
+                    <div className="absolute inset-0 bg-white bg-opacity-60 flex items-center justify-center z-10">
+                        <span className="text-sm text-gray-700">
+                            <FormattedMessage
+                                id="favoriteSeller.unfollowing"
+                                defaultMessage="Unfollowing..."
+                            />
+                        </span>
                     </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>
+                                    {sellerItem?.seller?.name || '-'}
                                 </div>
                             </div>
                             <div className='flex flex-row gap-x-[5px] items-center'>
                                 <span className='font-normal text-[12px] text-gray-200 '>
-                                    Jurong West
+                                    {sellerItem?.seller?.description || '-'}
                                 </span>
                             </div>
                         </div>
@@ -87,54 +88,36 @@ const item = () => {
                             <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'
+                                    rootClass: 'py-[0px] h-9 hover_border-orange-500 border-orange-500 text-[#f76b1c]'
                                 }}
                                 onClick={handleGoToSellerPage}
+                                variant="outlined"
                             >
                                 <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) }}
+                            <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-orange-500 border-orange-500 text-[#f76b1c]'
+                                }}
+                                onClick={handleRemoveFromFavorite}
+                                disabled={removing}
+                                variant="outlined"
                             >
-                                <Share
-                                    size="15"
-                                    className='text-blue-600 group-hover_text-blue-800 left-[-1px]'
+                                <FormattedMessage
+                                    id={'favoriteSeller.unfollow'}
+                                    defaultMessage={'Unfollow'}
                                 />
-                            </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>
+                            </Button>
                         </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
+export default Item;

package/src/components/SellerDetail/sellerDetail.js

@@ -22,17 +22,23 @@ import Image from '@magento/venia-ui/lib/components/Image';
 import Button from '@magento/venia-ui/lib/components/Button';
 import cn from 'classnames';
 import Rating from '@riosst100/pwa-marketplace/src/components/commons/Rating';
+
 const FavoriteSellerButton = React.lazy(() => import('@riosst100/pwa-marketplace/src/components/FavoriteSeller/AddToListButton'));
 
+
+import { useHistory } from 'react-router-dom';
+
 const SellerDetail = props => {
     const talonProps = useSeller({
         mapSeller
     });
 
     const { error, loading, seller, favoriteSellerButtonProps } = talonProps;
+    const history = useHistory();
+
     if (loading && !seller)
         return '';
-    // return <SellerShimmer />;
+    
     if (error && !seller) return <ErrorView />;
     if (!seller) {
         return (
@@ -162,6 +168,9 @@ const SellerDetail = props => {
                             {...favoriteSellerButtonProps}
                             buttonText={'Follow Seller'}
                             hideTextOnMobile={true}
+                            afterAdd={isSelected => {
+                                if (!isSelected) history.push('/favorite-seller');
+                            }}
                         />
                     </Suspense>
                     <button className='flex items-center justify-center gap-[8px] px-[14px] py-[8px] bg-white rounded-[30px] border border-solid border-[#f76b1c] min-w-[44px]'>
@@ -182,3 +191,4 @@ const SellerDetail = props => {
 }
 
 export default SellerDetail;
+

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

@@ -1,17 +1,19 @@
-import { useCallback, useMemo, useState } from 'react';
+
+import { useCallback, useMemo, useState, useRef } 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';
+import favoriteSellerListGqls from '@riosst100/pwa-marketplace/src/talons/FavoriteSeller/FavoriteSellerList/favoriteSellerList.gql';
+
 
 export const useAddToFavoriteListButton = props => {
+    const unfollowedRef = useRef(false);
     const { afterAdd, beforeAdd, item } = props;
-
     const operations = mergeOperations(defaultOperations, props.operations);
 
+    // Mutation for add
     const [
         addToFavoriteSeller,
         {
@@ -21,19 +23,28 @@ export const useAddToFavoriteListButton = props => {
         }
     ] = useMutation(operations.addToFavoriteSellerMutation);
 
-    // const {
-    //     client,
-    //     data: { customerFavoriteSellers }
-    // } = useQuery(operations.getSellerInFavoriteListsQuery);
+    // Mutation for remove
+    const [removeSeller, { loading: isRemoving }] = useMutation(
+        favoriteSellerListGqls.removeSellerFromFavoriteListMutation
+    );
+
+    // Query to get current favorite sellers
+    const { data: favoriteListData, refetch: refetchFavoriteList } = useQuery(
+        favoriteSellerListGqls.getFavoriteSellerListQuery,
+        {
+            variables: { pageSize: 100, currentPage: 1 },
+            fetchPolicy: 'cache-and-network',
+        }
+    );
 
-    // const isSelected = useMemo(() => {
-    //     return (
-    //         customerFavoriteSellers.includes(item.seller_id) || isAddingToList
-    //     );
-    // }, [customerFavoriteSellers, isAddingToList, item.seller_id]);
-    const isSelected = false;
+    // Determine if this seller is already in favorite list
+    const isSelected = useMemo(() => {
+        const items = favoriteListData?.favoritelist?.items || [];
+        return items.some(i => i.seller?.seller_id == item.seller_id);
+    }, [favoriteListData, item.seller_id]);
 
     const [showLoginToast, setShowLoginToast] = useState(0);
+    const [showUnfollowToast, setShowUnfollowToast] = useState(0);
 
     const { formatMessage } = useIntl();
     const [{ isSignedIn }] = useUserContext();
@@ -46,37 +57,35 @@ export const useAddToFavoriteListButton = props => {
                 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();
-                // }
+                const wasSelected = isSelected;
+                unfollowedRef.current = false;
+                if (isSelected) {
+                    // Unfollow
+                    unfollowedRef.current = true;
+                    await removeSeller({ variables: { sellerIds: [item.seller_id] } });
+                } else {
+                    // Follow
+                    await addToFavoriteSeller({ variables: { sellerId: item.seller_id } });
+                }
+                await refetchFavoriteList();
+                if (unfollowedRef.current) {
+                    setShowUnfollowToast(current => current + 1);
+                    unfollowedRef.current = false;
+                }
+                if (afterAdd) afterAdd(wasSelected);
             } catch (error) {
                 console.error(error);
             }
         }
     }, [
         addToFavoriteSeller,
+        removeSeller,
         afterAdd,
         beforeAdd,
-        // client,
-        // customerFavoriteSellers,
         isSignedIn,
         item,
-        // operations.getSellerInFavoriteListsQuery
+        isSelected,
+        refetchFavoriteList
     ]);
 
     const loginToastProps = useMemo(() => {
@@ -107,9 +116,18 @@ export const useAddToFavoriteListButton = props => {
                 timeout: 5000
             };
         }
-
+        if (showUnfollowToast) {
+            return {
+                type: 'success',
+                message: formatMessage({
+                    id: 'favoriteSeller.galleryButton.unfollowSuccessMessage',
+                    defaultMessage: 'Seller removed from your favorites list.'
+                }),
+                timeout: 5000
+            };
+        }
         return null;
-    }, [addSellerData, formatMessage]);
+    }, [addSellerData, formatMessage, showUnfollowToast]);
 
     const errorToastProps = useMemo(() => {
         if (errorAddingProduct) {
@@ -129,15 +147,20 @@ export const useAddToFavoriteListButton = props => {
 
     const buttonProps = useMemo(
         () => ({
-            'aria-label': formatMessage({
-                id: 'favoriteSellerButton.addText',
-                defaultMessage: 'Add to Favorites'
-            }),
-            isDisabled: false,
+            'aria-label': isSelected
+                ? formatMessage({
+                    id: 'favoriteSellerButton.unfollowText',
+                    defaultMessage: 'Unfollow Seller'
+                })
+                : formatMessage({
+                    id: 'favoriteSellerButton.addText',
+                    defaultMessage: 'Follow Seller'
+                }),
+            isDisabled: isAddingToList || isRemoving,
             onPress: handleClick,
             type: 'button'
         }),
-        [formatMessage, handleClick]
+        [formatMessage, handleClick, isSelected, isAddingToList, isRemoving]
     );
 
     return {
@@ -145,12 +168,12 @@ export const useAddToFavoriteListButton = props => {
         buttonText:
             typeof props.buttonText === 'function'
                 ? props.buttonText(isSelected)
-                : props.buttonText,
-        // customerFavoriteSellers,
+                : (isSelected ? 'Unfollow Seller' : 'Follow Seller'),
         errorToastProps,
         handleClick,
         isSelected,
         loginToastProps,
-        successToastProps
+        successToastProps,
+        isLoading: isAddingToList || isRemoving
     };
 };

package/src/talons/FavoriteSeller/FavoriteSellerList/favoriteSellerList.gql.js

@@ -0,0 +1,49 @@
+import { gql } from '@apollo/client';
+
+export const GET_FAVORITE_SELLER_LIST = gql`
+    query GetFavoriteSellerList($filter: FavoriteFilterInput, $pageSize: Int, $currentPage: Int) {
+        favoritelist(filter: $filter, pageSize: $pageSize, currentPage: $currentPage) {
+            items {
+                creation_time
+                customer_id
+                id
+                seller {
+                    description
+                    name
+                    seller_id
+                    url
+                }
+                status
+            }
+            page_info {
+                current_page
+                page_size
+                total_pages
+            }
+            total_count
+        }
+    }
+`;
+
+export const REMOVE_SELLER_FROM_FAVORITE_LIST = gql`
+    mutation RemoveSellerFromFavoriteList($sellerIds: [ID]!) {
+        removeSellerToFavoritelist(sellerIds: $sellerIds) {
+            error
+            favorite {
+                creation_time
+                customer {
+                    customer_id
+                    name
+                }
+                customer_id
+                id
+                status
+            }
+        }
+    }
+`;
+
+export default {
+    getFavoriteSellerListQuery: GET_FAVORITE_SELLER_LIST,
+    removeSellerFromFavoriteListMutation: REMOVE_SELLER_FROM_FAVORITE_LIST
+};

package/src/talons/FavoriteSeller/FavoriteSellerList/useFavoriteSellerList.js

@@ -0,0 +1,30 @@
+import { useQuery } from '@apollo/client';
+import gqls from './favoriteSellerList.gql';
+
+/**
+ * Custom hook untuk mengambil daftar seller yang di-follow user
+ * @param {Object} options - Opsi query Apollo (filter, pageSize, currentPage)
+ */
+const useFavoriteSellerList = (options = {}) => {
+    const { filter = {}, pageSize = 20, currentPage = 1 } = options;
+    const { data, loading, error, refetch } = useQuery(
+        gqls.getFavoriteSellerListQuery,
+        {
+            variables: {
+                filter,
+                pageSize,
+                currentPage
+            },
+            fetchPolicy: 'cache-and-network'
+        }
+    );
+
+    return {
+        data: data?.favoritelist,
+        loading,
+        error,
+        refetch
+    };
+};
+
+export default useFavoriteSellerList;

package/src/talons/FavoriteSeller/FavoriteSellerList/useRemoveFavoriteSeller.js

@@ -0,0 +1,31 @@
+import { useMutation } from '@apollo/client';
+import gqls from './favoriteSellerList.gql';
+
+/**
+ * Custom hook untuk menghapus seller dari favorite list
+ * @returns { removeSeller, loading, error, data }
+ */
+const useRemoveFavoriteSeller = () => {
+    const [removeSeller, { loading, error, data }] = useMutation(
+        gqls.removeSellerFromFavoriteListMutation
+    );
+
+    /**
+     * @param {Array<string|number>} sellerIds - Array of seller_id yang ingin dihapus
+     * @returns {Promise}
+     */
+    const remove = (sellerIds) => {
+        return removeSeller({
+            variables: { sellerIds }
+        });
+    };
+
+    return {
+        remove,
+        loading,
+        error,
+        data
+    };
+};
+
+export default useRemoveFavoriteSeller;

package/src/talons/FilterTop/filterTop.gql.js

@@ -1,7 +1,7 @@
 import { gql } from '@apollo/client';
 
 export const GET_CUSTOM_FILTERS = gql`
-    query GetCustomFilters($search: String, $filterBy: String, $shopby: String, $category: String!, $filters: ProductAttributeFilterInput!) {
+    query GetCustomFilters($search: String, $filterBy: String, $shopby: String, $category: String, $filters: ProductAttributeFilterInput) {
         customSubFilters(search: $search, filterBy: $filterBy, shopby: $shopby, category: $category, filters: $filters) {
             filter_id
             filters {