@riosst100/pwa-marketplace 2.8.5 → 2.8.6

package/i18n/en_US.json

@@ -9,8 +9,8 @@
     "accountMenu.accountInfoLink": "Account Information",
     "accountMenu.addressBookLink": "Address Book",
     "accountMenu.communicationsLink": "Communications",
-    "accountMenu.favoritesListsLink": "Favorites Lists",
-    "accountMenu.orderHistoryLink": "Order History",
+    "accountMenu.favoritesListsLink": "Wishlist",
+    "accountMenu.orderHistoryLink": "My Orders",
     "accountMenu.savedPaymentsLink": "Saved Payments",
     "accountMenu.signOutButtonText": "Sign Out",
     "accountMenu.storeCreditLink": "Store Credit & Gift Cards",
@@ -310,7 +310,7 @@
     "orderHistoryPage.invalidOrderNumber": "Order \"{number}\" was not found.",
     "orderHistoryPage.loadMore": "Load More",
     "orderHistoryPage.pageInfo": "Showing {current} of {total}",
-    "orderHistoryPage.pageTitleText": "Order History",
+    "orderHistoryPage.pageTitleText": "My Orders",
     "orderHistoryPage.ordersCount": "You have {count} orders in your history",
     "orderHistoryPage.search": "Search by Order Number",
     "orderItems.itemsHeading": "Items",
@@ -368,12 +368,6 @@
     "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

@@ -9,8 +9,8 @@
     "accountMenu.accountInfoLink": "Account Information",
     "accountMenu.addressBookLink": "Address Book",
     "accountMenu.communicationsLink": "Communications",
-    "accountMenu.favoritesListsLink": "Favorites Lists",
-    "accountMenu.orderHistoryLink": "Order History",
+    "accountMenu.favoritesListsLink": "Wishlist",
+    "accountMenu.orderHistoryLink": "My Orders",
     "accountMenu.savedPaymentsLink": "Saved Payments",
     "accountMenu.signOutButtonText": "Sign Out",
     "accountMenu.storeCreditLink": "Store Credit & Gift Cards",
@@ -311,7 +311,7 @@
     "orderHistoryPage.invalidOrderNumber": "Order \"{number}\" was not found.",
     "orderHistoryPage.loadMore": "Load More",
     "orderHistoryPage.pageInfo": "Showing {current} of {total}",
-    "orderHistoryPage.pageTitleText": "Order History",
+    "orderHistoryPage.pageTitleText": "My Orders",
     "orderHistoryPage.ordersCount": "You have {count} orders in your history",
     "orderHistoryPage.search": "Search by Order Number",
     "orderItems.itemsHeading": "Items",
@@ -369,12 +369,6 @@
     "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.5",
+  "version": "2.8.6",
   "main": "src/index.js",
   "pwa-studio": {
     "targets": {

package/src/componentOverrideMapping.js

@@ -63,6 +63,7 @@ module.exports = componentOverrideMapping = {
     [`@magento/pagebuilder/lib/ContentTypes/Slider/index.js`]: '@riosst100/pwa-marketplace/src/overwrites/pagebuilder/lib/ContentTypes/Slider/index.js',
     [`@magento/venia-ui/lib/components/App/app.js`]: '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/App/app.js',
     [`@magento/venia-ui/lib/components/SignIn/index.js`]: '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/SignIn/index.js',
+    [`@magento/venia-ui/lib/components/SignIn/signIn.js`]: '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/SignIn/signIn.js',
     [`@magento/venia-ui/lib/components/SignInPage/index.js`]: '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/SignInPage/index.js',
     [`@magento/venia-ui/lib/components/Password/index.js`]: '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/Password/index.js',
     [`@magento/venia-ui/lib/components/Password/index.js`]: '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/Password/index.js',

package/src/components/AccountLayout/index.js

@@ -60,6 +60,21 @@ const AccountLayout = (props) => {
                             'flex flex-col border border-gray-100 rounded-lg px-2.5 py-5 gap-y-2'
                         )}
                     >
+                        <li className="list-none">
+                            <Link
+                                to="/account-information"
+                                className={cn(
+                                    "text-[14px] font-medium p-2.5 block w-full hover_bg-gray-150 rounded-md",
+                                    activeMenu === '/account-information' ? 'bg-gray-150' : ''
+                                )}
+                            >
+                                <FormattedMessage
+                                    id={'myaccount.accountInformation'}
+                                    defaultMessage={'Account Information'}
+                                />
+
+                            </Link>
+                        </li>
                         <li className="list-none">
                             <Link
                                 to="/order-history"
@@ -70,7 +85,7 @@ const AccountLayout = (props) => {
                             >
                                 <FormattedMessage
                                     id={'myaccount.orderHistory'}
-                                    defaultMessage={'Order History'}
+                                    defaultMessage={'My Orders'}
                                 />
 
                             </Link>
@@ -85,7 +100,7 @@ const AccountLayout = (props) => {
                             >
                                 <FormattedMessage
                                     id={'myaccount.Quotes'}
-                                    defaultMessage={'Quotes'}
+                                    defaultMessage={'My Offers'}
                                 />
 
                             </Link>
@@ -130,7 +145,7 @@ const AccountLayout = (props) => {
                             >
                                 <FormattedMessage
                                     id={'myaccount.favoriteSeller'}
-                                    defaultMessage={'Favorite Seller'}
+                                    defaultMessage={'Followed Stores'}
                                 />
 
                             </Link>
@@ -150,7 +165,7 @@ const AccountLayout = (props) => {
 
                             </Link>
                         </li>
-                        <li className="list-none">
+                        {/* <li className="list-none">
                             <Link
                                 to="/saved-payments"
                                 className={cn(
@@ -164,7 +179,7 @@ const AccountLayout = (props) => {
                                 />
 
                             </Link>
-                        </li>
+                        </li> */}
                         <li className="list-none">
                             <Link
                                 to="/communications"
@@ -180,21 +195,7 @@ const AccountLayout = (props) => {
 
                             </Link>
                         </li>
-                        <li className="list-none">
-                            <Link
-                                to="/account-information"
-                                className={cn(
-                                    "text-[14px] font-medium p-2.5 block w-full hover_bg-gray-150 rounded-md",
-                                    activeMenu === '/account-information' ? 'bg-gray-150' : ''
-                                )}
-                            >
-                                <FormattedMessage
-                                    id={'myaccount.accountInformation'}
-                                    defaultMessage={'Account Information'}
-                                />
-
-                            </Link>
-                        </li>
+                        
 
                     </div>
                 </div>

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

@@ -1,6 +1,7 @@
 import React, { useRef } from 'react';
 import { element, func, shape, string, bool } from 'prop-types';
-import { Heart } from 'react-feather';
+import { Heart,Check } from 'react-feather';
+
 import { useAddToFavoriteListButton } from '@riosst100/pwa-marketplace/src/talons/FavoriteSeller/AddToListButton/useAddToFavoriteListButton';
 import { useButton } from 'react-aria';
 
@@ -9,7 +10,16 @@ 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 Spinner = () => (
+    <svg className="animate-spin mr-0" width="16" height="16" viewBox="0 0 50 50">
+        <circle className="path" cx="25" cy="25" r="20" fill="none" stroke="#f76b1c" strokeWidth="5" strokeLinecap="round" strokeDasharray="31.415, 31.415" transform="rotate(0 25 25)">
+            <animateTransform attributeName="transform" type="rotate" from="0 25 25" to="360 25 25" dur="1s" repeatCount="indefinite" />
+        </circle>
+    </svg>
+);
+
 const HeartIcon = <Heart color='#f76b1c' size={14} variant="Outline" className='stroke-[#f76b1c]' />;
+const CheckIcon = <Check color='#f76b1c' size={14} variant="Outline" className='stroke-[#f76b1c]' />;
 
 
 const AddToFavoriteListButton = props => {
@@ -27,8 +37,9 @@ const AddToFavoriteListButton = props => {
     } = 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;
 
@@ -37,9 +48,15 @@ const AddToFavoriteListButton = props => {
         ? 'text-[#f76b1c] text-[14px] font-medium whitespace-nowrap'
         : `text-[#f76b1c] text-[14px] font-medium whitespace-nowrap ${props.hideTextOnMobile ? 'md_block xs_hidden' : ''}`;
 
+    const icon = isSelected ? CheckIcon : HeartIcon;
+
     return (
         <button ref={buttonRef} className={buttonClass} {...ariaButtonProps} disabled={isLoading}>
-            {!isSelected && props.icon}
+            {isLoading ? (
+                <Spinner />
+            ) : (
+                icon
+            )}
             {buttonText && <span className={textClass}>{buttonText}</span>}
         </button>
     );

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

@@ -13,10 +13,32 @@
     padding: 8px 14px;
     font-weight: 500;
     font-size: 14px;
-    transition: background 0.2s, color 0.2s;
+    cursor: pointer;
 }
-
 .root_selected {
     composes: root;
     composes: no-underline from global;
 }
+
+.root:hover {
+    background: #f76b1c !important;
+    color: #fff !important;
+}
+.root:hover svg {
+    stroke: #fff !important;
+    fill: #fff !important;
+}
+.root:hover span {
+    color: #fff !important;
+}
+.root_selected:hover {
+    background: #f76b1c !important;
+    color: #fff !important;
+}
+.root_selected:hover svg {
+    stroke: #fff !important;
+    fill: #fff !important;
+}
+.root_selected:hover span {
+    color: #fff !important;
+}

package/src/components/FavoriteSeller/favoriteSeller.js

@@ -2,15 +2,23 @@ import React from 'react';
 import { StoreTitle } from '@magento/venia-ui/lib/components/Head';
 import { useIntl } from 'react-intl';
 import Item from './item';
+import defaultClasses from './favoriteSeller.module.css';
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import Pagination from '../../components/Pagination';
 
 const favoriteSeller = () => {
+    const classes = useStyle(defaultClasses, props.classes);
 
     const { formatMessage } = useIntl();
     const PAGE_TITLE = formatMessage({
         id: 'favoriteSellerPage.pageTitleText',
-        defaultMessage: 'Favorite Seller'
+        defaultMessage: 'Followed Stores'
     });
 
+    const pagination = totalPagesFromData ? (
+        <Pagination pageControl={pageControl} />
+    ) : null;
+
     return (
         <div className='relative'>
             <StoreTitle>{PAGE_TITLE}</StoreTitle>
@@ -25,6 +33,7 @@ const favoriteSeller = () => {
                     ))
                 }
             </div>
+            <div className={classes.pagination}>{pagination}</div>
         </div>
     )
 }

package/src/components/FavoriteSeller/favoriteSeller.module.css

@@ -0,0 +1,4 @@
+.pagination {
+    composes: relative from global;
+    composes: bottom-0 from global;
+}

package/src/components/FavoriteSeller/item.js

@@ -93,7 +93,7 @@ const item = () => {
                             >
                                 <FormattedMessage
                                     id={'favoriteSeller.visitStore'}
-                                    defaultMessage={'Visit Store'}
+                                    defaultMessage={'View Store'}
                                 />
                             </Button>
                             <div

package/src/components/FavoriteSellerPage/favoriteSeller.js

@@ -1,40 +1,80 @@
-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';
+// import defaultClasses from './favoriteSeller.module.css';
+import defaultClasses from '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/RootComponents/Category/category.module.css';
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import Pagination from '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/Pagination';
+// import Pagination from 'riosst100/pwa-marketplace/src/components/CustomPagination';
+import React, { Fragment, Suspense, useMemo, useRef } from 'react';
 
-const FavoriteSeller = () => {
+const FavoriteSeller = (props) => {
     const { formatMessage } = useIntl();
     const PAGE_TITLE = formatMessage({
         id: 'favoriteSellerPage.pageTitleText',
-        defaultMessage: 'Favorite Seller'
+        defaultMessage: 'Followed Stores'
     });
-
+    
+    const classes = useStyle(defaultClasses, props.classes);
+    
     // Fetch favorite seller list
-    const { data, loading, error, refetch } = useFavoriteSellerList();
+    const { data, loading, error, refetch, totalPagesFromData, pageControl } = useFavoriteSellerList();
+
+    const pagination = totalPagesFromData ? (
+        <Pagination pageControl={pageControl} />
+    ) : null;
+
+    const content = useMemo(() => {
+        const pagination = totalPagesFromData ? (
+            <Pagination pageControl={pageControl} />
+        ) : null;
+
+        return (
+            <Fragment>
+                <section className={classes.gallery}>
+                    {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}
+                                {data?.items?.length > 0 && <div className={classes.pagination}>{pagination}</div>}
+                            </div>
+                        </>
+                    )}
+                </section>
+            </Fragment>
+        );
+    }, [
+        classes.gallery,
+        classes.pagination,
+        pageControl,
+        loading,
+        data,
+        error,
+        totalPagesFromData
+    ]);
 
     return (
-        <div className='relative'>
-            <StoreTitle>{PAGE_TITLE}</StoreTitle>
-            <div aria-live="polite" className="text-xl font-medium text-left mb-[30px]">
-                {PAGE_TITLE}
-            </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}
+        <Fragment>
+            <div className='relative'>
+                <StoreTitle>{PAGE_TITLE}</StoreTitle>
+                <div aria-live="polite" className="text-xl font-medium text-left mb-[20px]">
+                    {PAGE_TITLE}
                 </div>
-            )}
-        </div>
+                <p>This list shows all the stores you're currently following. Sellers may send you newsletters or updates — you can unfollow a seller anytime to stop following and unsubscribe from their newsletters.</p>
+                <br />
+                {content}
+            </div>
+        </Fragment>
     );
 };
 

package/src/components/FavoriteSellerPage/favoriteSeller.module.css

@@ -0,0 +1,4 @@
+.pagination {
+    composes: relative from global;
+    composes: bottom-0 from global;
+}

package/src/components/FavoriteSellerPage/item.js

@@ -15,6 +15,7 @@ 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';
+import { Link } from "react-router-dom";
 
 const Item = ({ sellerItem, refetchFavoriteSellerList }) => {
     const [open, setOpen] = useState(false);
@@ -22,6 +23,8 @@ const Item = ({ sellerItem, refetchFavoriteSellerList }) => {
     const [, { addToast }] = useToasts();
     const { formatMessage } = useIntl();
 
+    console.log(sellerItem.seller)
+
     const handleRemoveFromFavorite = async () => {
         try {
             await remove([sellerItem.seller.seller_id]);
@@ -29,7 +32,7 @@ const Item = ({ sellerItem, refetchFavoriteSellerList }) => {
                 type: 'success',
                 message: formatMessage({
                     id: 'favoriteSeller.toastUnfollowSuccess',
-                    defaultMessage: 'Successfully unfollowed seller.'
+                    defaultMessage: "You've unfollowed this store. You won't receive any more updates or newsletters from them."
                 }),
                 timeout: 3000
             });
@@ -41,11 +44,10 @@ const Item = ({ sellerItem, refetchFavoriteSellerList }) => {
                 type: 'error',
                 message: formatMessage({
                     id: 'favoriteSeller.toastUnfollowError',
-                    defaultMessage: 'Failed to unfollow seller.'
+                    defaultMessage: 'Failed to unfollow this store. Please try again later.'
                 }),
                 timeout: 3000
             });
-            console.error('Failed to unfollow seller:', e);
         }
     };
 
@@ -85,19 +87,23 @@ const Item = ({ sellerItem, refetchFavoriteSellerList }) => {
                             </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: 'btn-orange-outline py-[0px] h-9 border-orange-500 text-[#f76b1c]'
-                                }}
-                                onClick={handleGoToSellerPage}
-                                variant="outlined"
-                            >
-                                <FormattedMessage
-                                    id={'favoriteSeller.visitStore'}
-                                    defaultMessage={'Visit Store'}
-                                />
-                            </Button>
+                            <Link to={"/seller/"+sellerItem?.seller?.url}>
+                                <Button
+                                    classes={{
+                                        content: 'gap-1.5 grid-flow-col inline-grid items-center justify-center justify-items-center capitalize font-medium text-[14px]',
+                                        rootClass: 'btn-orange-outline py-[0px] h-9 border-orange-500 text-[#f76b1c]'
+                                    }}
+                                    // onClick={handleGoToSellerPage}
+                                    variant="outlined"
+                                >
+                                    
+                                        <FormattedMessage
+                                            id={'favoriteSeller.visitStore'}
+                                            defaultMessage={'View Store'}
+                                        />
+                                    
+                                </Button>
+                            </Link>
                             <Button
                                 classes={{
                                     content: 'gap-1.5 grid-flow-col inline-grid items-center justify-center justify-items-center capitalize font-medium text-[14px]',

package/src/components/RFQPage/quoteList.js

@@ -52,7 +52,7 @@ const QuoteList = props => {
     const { formatMessage } = useIntl();
     const PAGE_TITLE = formatMessage({
         id: 'Quotes.pageTitleText',
-        defaultMessage: 'Quotes'
+        defaultMessage: 'My Offers'
     });
     const SEARCH_PLACE_HOLDER = formatMessage({
         id: 'Quotes.search',

package/src/components/RMAPage/RMAList.js

@@ -50,7 +50,7 @@ const RMAList = props => {
     const { formatMessage } = useIntl();
     const PAGE_TITLE = formatMessage({
         id: 'RMA.pageTitleText',
-        defaultMessage: 'Quotes'
+        defaultMessage: 'My Return Request'
     });
     const SEARCH_PLACE_HOLDER = formatMessage({
         id: 'RMA.search',

package/src/components/SellerDetail/sellerDetail.js

@@ -18,6 +18,9 @@ import {
     Star1,
     Shop,
 } from 'iconsax-react';
+
+import { Share2 } from 'react-feather';
+
 import Image from '@magento/venia-ui/lib/components/Image';
 import Button from '@magento/venia-ui/lib/components/Button';
 import cn from 'classnames';
@@ -123,9 +126,13 @@ const SellerDetail = props => {
                 .share-btn:hover { background: #f76b1c !important; }
                 .share-btn:hover .stroke { stroke: #ffffff !important; }
                 .share-btn:hover span { color: #ffffff !important; }
+                .favorite-btn:focus-visible { outline: none !important; }
                 .favorite-btn:hover { background: #f76b1c !important; color: #ffffff !important; }
                 .favorite-btn:hover span { color: #ffffff !important; }
                 .favorite-btn:hover svg { stroke: #ffffff !important; fill: #ffffff !important; }
+                .favorite-btn.root_selected:hover { background: #f76b1c !important; color: #ffffff !important; }
+                .favorite-btn.root_selected:hover span { color: #ffffff !important; }
+                .favorite-btn.root_selected:hover svg { stroke: #ffffff !important; fill: #ffffff !important; }
             `}</style>
             <Slider seller={seller} rootClassname='mb-[30px]' />
             <div className='flex xs_flex-col lg_flex-row justify-between mb-[30px] p-[20px] rounded-[6px] border border-solid border-gray-100 shadow-[0px_0px_5px_3px_#d9d9d933]'>
@@ -167,7 +174,7 @@ const SellerDetail = props => {
                 
                 {/* Right: action buttons */}
                 <div className='flex xs_flex-wrap items-center xs_justify-center lg_justify-end gap-[10px] xs_mt-4 lg_mt-0 xs_pt-2 lg_pt-0 relative'>
-                      <button className='send-message-btn flex items-center justify-center gap-[8px] px-[14px] py-[8px] bg-white rounded-[30px] border border-solid border-[#f76b1c] min-w-[44px]'>
+                    <button className='send-message-btn flex items-center justify-center gap-[8px] px-[14px] py-[8px] bg-white rounded-[30px] border border-solid border-[#f76b1c] min-w-[44px]'>
                         <Sms color="#f76b1c" size={16} variant='Outline' className='stroke' />
                         <span className='text-[#f76b1c] text-[14px] font-medium whitespace-nowrap md_block xs_hidden'>Send Message</span>
                     </button>
@@ -177,15 +184,12 @@ const SellerDetail = props => {
                                 root: 'favorite-btn flex items-center justify-center gap-[8px] px-[14px] py-[8px] bg-white rounded-[30px] border border-solid border-[#f76b1c] min-w-[44px]'
                             }}
                             {...favoriteSellerButtonProps}
-                            buttonText={'Follow Seller'}
+                            buttonText={'Follow Store'}
                             hideTextOnMobile={true}
-                            afterAdd={isSelected => {
-                                if (!isSelected) history.push('/favorite-seller');
-                            }}
                         />
                     </Suspense>
                     <button className='share-btn flex items-center justify-center gap-[8px] px-[14px] py-[8px] bg-white rounded-[30px] border border-solid border-[#f76b1c] min-w-[44px]'>
-                        <Share color='#f76b1c' size={16} variant='Outline' className='stroke' />
+                        <Share2 color='#f76b1c' size={16} variant='Outline' className='stroke' />
                         <span className='text-[#f76b1c] text-[14px] font-medium whitespace-nowrap md_block xs_hidden'>Share</span>
                     </button>
                 </div>

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

@@ -19,10 +19,20 @@ export const useAccountMenuItems = props => {
 
     let MENU_ITEMS = [
         {
-            name: 'Order History',
+            name: 'Account Information',
+            id: 'accountMenu.accountInfoLink',
+            url: '/account-information'
+        },
+        {
+            name: 'My Orders',
             id: 'accountMenu.orderHistoryLink',
             url: '/order-history'
         },
+        {
+            name: 'My Offers',
+            id: 'accountMenu.offersLink',
+            url: '/quotes'
+        },
         // Hide links until features are completed
         // {
         //     name: 'Store Credit & Gift Cards',
@@ -34,26 +44,32 @@ export const useAccountMenuItems = props => {
             id: 'accountMenu.favoritesListsLink',
             url: '/wishlist'
         },
+        {
+            name: 'Return Request',
+            id: 'accountMenu.returnRequestLink',
+            url: '/return'
+        },
+        {
+            name: 'Followed Stores',
+            id: 'accountMenu.followedStoresLink',
+            url: '/favorite-seller'
+        },
         {
             name: 'Address Book',
             id: 'accountMenu.addressBookLink',
             url: '/address-book'
         },
+        // {
+        //     name: 'Saved Payments',
+        //     id: 'accountMenu.savedPaymentsLink',
+        //     url: '/saved-payments'
+        // },
         {
-            name: 'Saved Payments',
-            id: 'accountMenu.savedPaymentsLink',
-            url: '/saved-payments'
-        },
-        {
-            name: 'Communications',
+            name: 'Newsletter',
             id: 'accountMenu.communicationsLinak',
             url: '/communications'
         },
-        {
-            name: 'Account Information',
-            id: 'accountMenu.accountInfoLink',
-            url: '/account-information'
-        }
+        
     ];
     
     // if (storage && storage.getItem('is_seller')) {

package/src/overwrites/peregrine/lib/talons/SignIn/useSignIn.js

@@ -50,14 +50,17 @@ export const useSignIn = props => {
         fetchPolicy: 'no-cache'
     });
 
-    const {
-        generateReCaptchaData,
-        recaptchaLoading,
-        recaptchaWidgetProps
-    } = useGoogleReCaptcha({
-        currentForm: 'CUSTOMER_LOGIN',
-        formAction: 'signIn'
-    });
+    // const {
+    //     generateReCaptchaData,
+    //     recaptchaLoading,
+    //     recaptchaWidgetProps
+    // } = useGoogleReCaptcha({
+    //     currentForm: 'CUSTOMER_LOGIN',
+    //     formAction: 'signIn'
+    // });
+
+    const recaptchaWidgetProps = null;
+    const generateReCaptchaData = null;
 
     const [fetchCartId] = useMutation(createCartMutation);
     const [mergeCarts] = useMutation(mergeCartsMutation);
@@ -76,7 +79,8 @@ export const useSignIn = props => {
                 const sourceCartId = cartId;
 
                 // Get recaptchaV3 data for login
-                const recaptchaData = await generateReCaptchaData();
+                // const recaptchaData = await generateReCaptchaData();
+                const recaptchaData = null;
 
                 // Sign in and set the token.
                 const signInResponse = await signIn({
@@ -219,7 +223,8 @@ export const useSignIn = props => {
         handleForgotPassword,
         forgotPasswordHandleEnterKeyPress,
         handleSubmit,
-        isBusy: isGettingDetails || isSigningIn || recaptchaLoading,
+        // isBusy: isGettingDetails || isSigningIn || recaptchaLoading,
+        isBusy: isGettingDetails || isSigningIn,
         setFormApi,
         recaptchaWidgetProps
     };

package/src/overwrites/venia-ui/lib/RootComponents/Category/categoryContent.js

@@ -13,7 +13,7 @@ import FilterModalOpenButton, {
 import { FilterSidebarShimmer } from '@magento/venia-ui/lib/components/FilterSidebar';
 import Gallery, { GalleryShimmer } from '@magento/venia-ui/lib/components/Gallery';
 import { StoreTitle } from '@magento/venia-ui/lib/components/Head';
-import Pagination from '../../components/Pagination';
+import Pagination from '@magento/venia-ui/lib/components/Pagination';
 import ProductSort, { ProductSortShimmer } from '../../components/ProductSort';
 import RichContent from '@magento/venia-ui/lib/components/RichContent';
 import Shimmer from '@magento/venia-ui/lib/components/Shimmer';

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

@@ -45,6 +45,7 @@ const AccountTrigger = props => {
         id: 'accountTrigger.ariaLabelSignIn',
         defaultMessage: 'Sign In'
     });
+    
     const ariaLabel = isUserSignedIn ? ariaLabelMyMenu : ariaLabelSignIn;
     return (
         <Fragment>
@@ -67,12 +68,17 @@ const AccountTrigger = props => {
                         shouldIndicateLoading={true}
                     /> */}
                     <User size="20" color={darkBlue} className={cn('stroke-0')} variant="Outline" />
-                    <span className='text-base font-medium'>
+                    {isUserSignedIn ? <span className='text-base font-medium'>
+                        {formatMessage({
+                            id: 'accountTrigger.myAccount',
+                            defaultMessage: 'My Account'
+                        })}
+                    </span> : <span className='text-base font-medium'>
                         {formatMessage({
                             id: 'accountTrigger.buttonFallback',
                             defaultMessage: 'Sign In'
                         })}
-                    </span>
+                    </span>}
                 </button>
             </div>
             <Suspense fallback={null}>

package/src/overwrites/venia-ui/lib/components/OrderHistoryPage/orderHistoryPage.js

@@ -52,7 +52,7 @@ const OrderHistoryPage = props => {
     const { formatMessage } = useIntl();
     const PAGE_TITLE = formatMessage({
         id: 'orderHistoryPage.pageTitleText',
-        defaultMessage: 'Order History'
+        defaultMessage: 'My Orders'
     });
     const SEARCH_PLACE_HOLDER = formatMessage({
         id: 'orderHistoryPage.search',

package/src/overwrites/venia-ui/lib/components/SignIn/signIn.js

@@ -148,10 +148,13 @@ const SignIn = props => {
                             content: 'capitalize font-medium text-[16px]'
                         }}
                     >
-                        <FormattedMessage
+                        {isBusy ? <FormattedMessage
+                            id={'signIn.waitingConfig'}
+                            defaultMessage={'Please wait...'}
+                        /> : <FormattedMessage
                             id={'signIn.signInText'}
                             defaultMessage={'Sign In'}
-                        />
+                        />}
                     </Button>
                     <div className='block text-center'>
                         <span className='text-xs font-normal'>
@@ -171,7 +174,7 @@ const SignIn = props => {
                             />
                         </Link>
                     </div>
-                    {showSocialLogin ? (
+                    {/* {showSocialLogin ? (
                         <>
                             <div className='max-w-[390px] w-full mx-auto'>
                                 <label
@@ -192,8 +195,7 @@ const SignIn = props => {
                             </div>
                             <SocialLogin />
                         </>
-                    ) : null}
-
+                    ) : null} */}
                 </div>
             </Form>
         </div>

package/src/overwrites/venia-ui/lib/components/ToastContainer/toastContainer.module.css

@@ -14,7 +14,7 @@
     left: 50%;
     transform: translateX(-50%);
     /* opacity: 0; */
-    pointer-events: none;
+    /* pointer-events: none; */
     transition: opacity 0.5s, transform 0.5s;
     z-index: 9999;
 }

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

@@ -1,5 +1,5 @@
 
-import { useCallback, useMemo, useState, useRef } from 'react';
+import { useCallback, useMemo, useState, useRef, useEffect } from 'react';
 import { useIntl } from 'react-intl';
 import { useMutation, useQuery } from '@apollo/client';
 import { useUserContext } from '@magento/peregrine/lib/context/user';
@@ -45,6 +45,7 @@ export const useAddToFavoriteListButton = props => {
 
     const [showLoginToast, setShowLoginToast] = useState(0);
     const [showUnfollowToast, setShowUnfollowToast] = useState(0);
+    const [showFollowToast, setShowFollowToast] = useState(false);
 
     const { formatMessage } = useIntl();
     const [{ isSignedIn }] = useUserContext();
@@ -95,9 +96,9 @@ export const useAddToFavoriteListButton = props => {
                 message: formatMessage({
                     id: 'favoriteSeller.galleryButton.loginMessage',
                     defaultMessage:
-                        'Please sign-in to your Account to save seller for later.'
+                        'Please sign in to your account to follow this store.'
                 }),
-                timeout: 5000
+                timeout: 3000
             };
         }
 
@@ -105,15 +106,15 @@ export const useAddToFavoriteListButton = props => {
     }, [formatMessage, showLoginToast]);
 
     const successToastProps = useMemo(() => {
-        if (addSellerData) {
+        if (showFollowToast) {
             return {
                 type: 'success',
                 message: formatMessage({
                     id: 'favoriteSeller.galleryButton.successMessageGeneral',
                     defaultMessage:
-                        'Seller successfully added to your favorites list.'
+                        "You're now following this store."
                 }),
-                timeout: 5000
+                timeout: 3000
             };
         }
         if (showUnfollowToast) {
@@ -121,13 +122,29 @@ export const useAddToFavoriteListButton = props => {
                 type: 'success',
                 message: formatMessage({
                     id: 'favoriteSeller.galleryButton.unfollowSuccessMessage',
-                    defaultMessage: 'Seller removed from your favorites list.'
+                    defaultMessage: "You've unfollowed this store."
                 }),
-                timeout: 5000
+                timeout: 3000
             };
         }
         return null;
-    }, [addSellerData, formatMessage, showUnfollowToast]);
+    }, [formatMessage, showFollowToast, showUnfollowToast]);
+
+    useEffect(() => {
+        let timeout;
+        if (addSellerData && isSelected) {
+            setShowFollowToast(true);
+            timeout = setTimeout(() => {
+                setShowFollowToast(false);
+            }, 3100);
+        }
+        if (showUnfollowToast) {
+            timeout = setTimeout(() => {
+                setShowUnfollowToast(0);
+            }, 3100);
+        }
+        return () => clearTimeout(timeout);
+    }, [addSellerData, showUnfollowToast, isSelected]);
 
     const errorToastProps = useMemo(() => {
         if (errorAddingProduct) {
@@ -136,9 +153,9 @@ export const useAddToFavoriteListButton = props => {
                 message: formatMessage({
                     id: 'favoriteSeller.galleryButton.addError',
                     defaultMessage:
-                        'Something went wrong adding the product to your favorite seller list.'
+                        'Something went wrong. Please try again.'
                 }),
-                timeout: 5000
+                timeout: 3000
             };
         }
 
@@ -150,11 +167,11 @@ export const useAddToFavoriteListButton = props => {
             'aria-label': isSelected
                 ? formatMessage({
                     id: 'favoriteSellerButton.unfollowText',
-                    defaultMessage: 'Unfollow Seller'
+                    defaultMessage: 'Following'
                 })
                 : formatMessage({
                     id: 'favoriteSellerButton.addText',
-                    defaultMessage: 'Follow Seller'
+                    defaultMessage: 'Follow Store'
                 }),
             isDisabled: isAddingToList || isRemoving,
             onPress: handleClick,
@@ -168,7 +185,7 @@ export const useAddToFavoriteListButton = props => {
         buttonText:
             typeof props.buttonText === 'function'
                 ? props.buttonText(isSelected)
-                : (isSelected ? 'Unfollow Seller' : 'Follow Seller'),
+                : (isSelected ? 'Following' : 'Follow Store'),
         errorToastProps,
         handleClick,
         isSelected,

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

@@ -1,12 +1,19 @@
 import { useQuery } from '@apollo/client';
+import { useEffect, useMemo, useRef } from 'react';
 import gqls from './favoriteSellerList.gql';
+import { usePagination } from '@magento/peregrine/lib/hooks/usePagination';
 
 /**
  * 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 { filter = {}, pageSize = 4 } = options;
+
+    const [paginationValues, paginationApi] = usePagination();
+    const { currentPage = 1, totalPages } = paginationValues;
+    const { setCurrentPage, setTotalPages } = paginationApi;
+    
     const { data, loading, error, refetch } = useQuery(
         gqls.getFavoriteSellerListQuery,
         {
@@ -19,11 +26,30 @@ const useFavoriteSellerList = (options = {}) => {
         }
     );
 
+    const totalPagesFromData = data
+        ? data.favoritelist?.page_info?.total_pages
+        : null;
+
+    useEffect(() => {
+        setTotalPages(totalPagesFromData);
+        return () => {
+            setTotalPages(null);
+        };
+    }, [setTotalPages, totalPagesFromData]);
+
+    const pageControl = {
+        currentPage,
+        setPage: setCurrentPage,
+        totalPages
+    };
+
     return {
         data: data?.favoritelist,
         loading,
         error,
-        refetch
+        refetch,
+        totalPagesFromData,
+        pageControl
     };
 };
 

package/src/talons/SellerProducts/useSellerProducts.js

@@ -210,7 +210,7 @@ export const useSellerProducts = props => {
     ]);
 
     const totalPagesFromData = data
-        ? data.productsBySellerId.page_info.total_pages
+        ? data?.productsBySellerId?.page_info.total_pages
         : null;
 
     useEffect(() => {