Multi-Cart improvement (#104)

* Add pagination to multicart list + create service method to get the list + Add the method to app state

* Update SDK version

* Add multi cart list to  Update cart and create cart + add pagination to cart modal + cart pagination

* Add merge cart fetching all carts

* Update cart pagination after update or edit cart and create cart

* Add merge carts style

* Add merge cart : Anon cart can merge to users carts

* Add merge cart message + fix checkbox check issue

* Fix x-scroll issue

* Scroll up in modal box to top when change components

* default cart name

* Update SDK version , update Locals

* Update en.json

* Update fr.json

Co-authored-by: yasiloghmani <yasaman.loghmani@EP-ML-10062.local>

Author: yasiloghmani

package.json

@@ -3,7 +3,7 @@
   "version": "3.0.0",
   "private": true,
   "dependencies": {
-    "@moltin/sdk": "^5.5.0",
+    "@moltin/sdk": "6.1.2",
     "@types/node": "^12.0.0",
     "@types/react": "^16.9.0",
     "@types/react-dom": "^16.9.0",

src/CartItemList.tsx

@@ -29,7 +29,7 @@ export const CartItemList: React.FC<CartItemListParams> = (props) => {
   const { t } = useTranslation();
   const { isLoggedIn } = useCustomerData();
   const { count, totalPrice, updateCartItems, partialAddMessage, setPartialAddMessage, addedtItem, setAddedItem} = useCartData();
-  const { selectedCart, updateCartData } = useMultiCartData();
+  const { selectedCart, updateCartData, setMergedMessaged, mergedMessage } = useMultiCartData();
   const { addError } = useContext(APIErrorContext);
   const quantityItems = count.toString();
 
@@ -112,6 +112,21 @@ export const CartItemList: React.FC<CartItemListParams> = (props) => {
         setShowUpdateCartAlert(false);
       }, 4000);
   }, [showUpdateCartAlert])
+  
+  useEffect(() => {
+    window.scrollTo(0,0);
+  })
+
+  useEffect(() => {
+    const el = document.querySelector('.cartmodal__content');
+    if(el && !newCart)
+    {
+      el.scrollTo({
+        top: 0,
+        left: 0,
+      });
+    }
+  })
 
   return (
     <div className={`cartitemlist ${isLoading ? '--loading' : ''}`}>
@@ -120,29 +135,35 @@ export const CartItemList: React.FC<CartItemListParams> = (props) => {
           {t('my-carts')}
         </button>
       )}
+
       {showUpdateCartAlert &&  (
         <div className="cartslist__alertMessage">
           <p>{t('update-cart-message')}</p>
           <CloseIcon onClick={() => setShowUpdateCartAlert(false)}/>
         </div>
       )}
+
+      {mergedMessage &&  (
+        <div className="cartslist__alertMessage">
+          <p>{mergedMessage}</p>
+          <CloseIcon onClick={() => setMergedMessaged("")}/>
+        </div>
+      )}
 
-        <div className="partialadd">
-          {addedtItem &&  ( <div className="partialadd__confirmationmessage">
-            <p>{addedtItem}  items have been added to the cart</p>
-            <CloseIcon onClick={() => setAddedItem("")}/>
-          </div>
-          )}
-          {partialAddMessage &&  (
-            <div className="partialadd__alertMessage">
-              <p>{partialAddMessage}</p>
-              <CloseIcon onClick={() => setPartialAddMessage("")}/>
-            </div>
-          )}
+      <div className="partialadd">
+        {addedtItem &&  ( <div className="partialadd__confirmationmessage">
+      <p>{addedtItem} {t("items-added-to-the-cart")}</p>
+          <CloseIcon onClick={() => setAddedItem("")}/>
         </div>
+        )}
+        {partialAddMessage &&  (
+          <div className="partialadd__alertMessage">
+            <p>{partialAddMessage}</p>
+            <CloseIcon onClick={() => setPartialAddMessage("")}/>
+          </div>
+        )}
+      </div>
 
-      
-
       <div className="cartitemlist__header">
         <h2 className="cartitemlist__title">
           {isLoggedIn && selectedCart ? (

src/CartModal.scss

@@ -22,6 +22,7 @@
     bottom: 0px;
     right: 0px;
     overflow-y: scroll;
+    overflow-x: hidden;
     height: 100%;
     min-height: 100%;
     width: 100%;

src/CartModal.tsx

@@ -13,6 +13,7 @@ import { CartsList } from "./CartsList";
 import { ReactComponent as CloseIcon } from './images/icons/ic_close.svg';
 import { ReactComponent as BackArrowIcon } from './images/icons/arrow_back-black-24dp.svg';
 import { APIErrorContext } from "./APIErrorProvider";
+import { CartsPagination }  from './CartsPagination';
 
 import './CartModal.scss';
 import {OrderDetailsTable} from './OrderDetailsTable';
@@ -55,7 +56,7 @@ export const CartModal: React.FC<CartModalParams> = (props) => {
   const { cartData, promotionItems, updateCartItems } = useCartData();
   const { isLoggedIn } = useCustomerData();
   const { updatePurchaseHistory } = useOrdersData();
-  const { isCartSelected, isCreateNewCart, updateCartData } = useMultiCartData();
+  const { isCartSelected, isCreateNewCart, updateCartData,  total, currentPage } = useMultiCartData();
   const { t } = useTranslation();
   const { addError } = useContext(APIErrorContext);
 
@@ -185,10 +186,15 @@ export const CartModal: React.FC<CartModalParams> = (props) => {
             />
           )}
           {isLoggedIn && route === 'cartsList' && (
-            <CartsList
-              onHandlePage={(page: string) => handlePage(page)}
-              handleHideBackButton={(value:boolean) => {setHideBackButton(value)}}
-            />
+            <>
+              <CartsList
+                onHandlePage={(page: string) => handlePage(page)}
+                handleHideBackButton={(value:boolean) => {setHideBackButton(value)}}
+              />
+              <CartsPagination   totalPages={total}
+                currentPage={currentPage} />
+            </>
+
           )}
           {route === 'shipping' && (
             <div>

src/CartsList.scss

@@ -3,6 +3,7 @@
 .cartslist {
   $block: &;
   text-align: center;
+  margin-bottom: 25px;
 
   &__editview {
     display: block;

src/CartsList.tsx

@@ -8,6 +8,7 @@ import { ReactComponent as ArrowRightIcon } from "./images/icons/keyboard_arrow_
 import { ReactComponent as DeleteIcon } from "./images/icons/delete-black-24dp.svg";
 import { ReactComponent as CloseIcon } from "./images/icons/ic_close.svg";
 
+
 import './CartsList.scss';
 
 interface CartsListParams {
@@ -17,7 +18,7 @@ interface CartsListParams {
 
 export  const CartsList: React.FC<CartsListParams> = (props) => {
   const { onHandlePage } = props;
-  const { multiCartData, updateSelectedCart, setIsCartSelected, updateCartData } = useMultiCartData();
+  const { multiCartData, updateSelectedCart, setIsCartSelected, updateCartData, multiCartDataList } = useMultiCartData();
   const { updateCartItems } = useCartData();
   const [selectedCarts, setSelectedCarts] = useState<string[]>([]);
   const [deletedCartNumber , setDeletedCartNumber] = useState(Number);
@@ -39,7 +40,7 @@ export  const CartsList: React.FC<CartsListParams> = (props) => {
   };
 
   const handleSelectAll = () => {
-    const allCarts = multiCartData.map((cart: moltin.Cart) => cart.id);
+    const allCarts = multiCartDataList.map((cart: moltin.Cart) => cart.id);
     if(selectedCarts.length < allCarts.length) {
       setSelectedCarts(allCarts);
     } else {
@@ -93,6 +94,18 @@ export  const CartsList: React.FC<CartsListParams> = (props) => {
         setShowCreateCartAlert(false)
       }, 4000);
   }, [showCreateCartAlert]);
+  
+
+  useEffect(() => {
+    const el = document.querySelector('.cartmodal__content');
+    if(el && showSettings)
+    {
+      el.scrollTo({
+        top: 0,
+        left: 0, 
+      });
+    }
+  })
 
   return (
     <div className="cartslist">
@@ -109,34 +122,34 @@ export  const CartsList: React.FC<CartsListParams> = (props) => {
         </div>
       )}
       <div className="cartslist__content">
-        {multiCartData.length && (
+        {multiCartDataList.length && (
           <button className="cartslist__editbutton" onClick={handleCartEdit}>
             {t(isEdit ? 'done' : 'edit')}
           </button>
         )}
         <h2 className="cartslist__title">
           {t('my-carts')}
         </h2>
-        {multiCartData && multiCartData.length ? (
+        {multiCartDataList && multiCartDataList.length ? (
           <div>
             <div className="cartslist__editview">
               <div className="cartslist__selectedtitle">
                 <div className={`${isEdit ? 'isshow' : ''}`}>
                   <span>
-                    <input type="checkbox" name="cartCheck" id="select-all" className="cartslist__checkall epcheckbox" checked={selectedCarts.length === multiCartData.length} onChange={() => {handleSelectAll()}} />
+                    <input type="checkbox" name="cartCheck" id="select-all" className="cartslist__checkall epcheckbox" checked={selectedCarts.length === multiCartDataList.length} onChange={() => {handleSelectAll()}} />
                     <label htmlFor="select-all" className="">
                       {selectedCarts.length === 1 ?  `${selectedCarts.length} ${t('cart')}
                       ${t('selected')}` : `${selectedCarts.length} ${t('carts')}
                       ${t('selected')}` }
                     </label>
                   </span>
-                  <button className="cartslist__deletebutton" disabled={selectedCarts.length === 0 || multiCartData.length === 1} onClick={() => setIsShowModal(true)}>
+                  <button className="cartslist__deletebutton" disabled={selectedCarts.length === 0 || multiCartDataList.length === 1} onClick={() => setIsShowModal(true)}>
                     {!isShowModal ? <DeleteIcon /> : <span className="circularLoader" aria-label={t('loading')} />}
                   </button>
                 </div>
               </div>
               <div className={`cartslist__cartlist${isEdit ? ' --editmode' : ''}`}>
-                {multiCartData.map((cart: any) => (
+                {multiCartDataList.map((cart: any) => (
                   <div role="presentation" className='cartslist__cartelement' key={cart.id} onClick={() => handleCart(cart)} tabIndex={-1}>
                     {isEdit && (
                       <input type="checkbox" name="cartCheck" id={`cart_${cart.id}`} className="cartslist__check epcheckbox" checked={selectedCarts.includes(cart.id)} onChange={() => {handleSelectCart(cart.id)}} />
@@ -187,8 +200,8 @@ export  const CartsList: React.FC<CartsListParams> = (props) => {
                 </div>
               </div>
               <div className={`cartslist__cartlist${isEdit ? ' --editmode' : ''}`}>
-                {multiCartData.map((cart: any) => (
-                  <div className='cartslist__cartelement'>
+                {multiCartDataList.map((cart: any) => (
+                  <div className='cartslist__cartelement' key={cart.id}>
                     <input type="checkbox" name="cartCheck" id={`cart_${cart.id}`} className="cartslist__check epcheckbox" checked={selectedCarts.includes(cart.id)} onChange={() => {handleSelectCart(cart.id)}} />
                     <label htmlFor={`cart_${cart.id}`} className="cartslist__description">
                       <div role="presentation"  key={cart.id} onClick={() => handleCart(cart)} tabIndex={-1}>
@@ -248,6 +261,7 @@ export  const CartsList: React.FC<CartsListParams> = (props) => {
           <div className="cartslist__confirmationoverlay" />
         </React.Fragment>
       )}
+
       <SettingsCart showSettings={showSettings} handleHideSettings={() => setShowSettings(false)} setShowCartAlert={() => setShowCreateCartAlert(true)}/>
     </div>
   )

src/CartsPagination.scss

@@ -1,32 +1,40 @@
 @import './theme/common.scss';
 
 .CartsPagination {
-    position: relative;
-    bottom: 0;
+    position: absolute;
+    bottom: 25px;
     font-style: normal;
     font-weight: normal;
     font-size: 13px;
     line-height: 15px;
     text-align: center;
+    left: 50%;
+    transform: translate(-50%, 0);
 
     &__pagenumber {
         font-style: normal;
         font-weight: normal;
         font-size: 13px;
         line-height: 15px;
         text-align: center;
+        padding: 0 10px;
     }
 
     &__prevpageicon {
         transform: rotate(90deg);
+        
     }
 
     &__nextpageicon {
         transform: rotate(-90deg);
+        
     }
 
     svg {
-        fill: #3C4858;
+        path{
+            fill: #3C4858;
+        }
+       
         cursor: pointer;
 
         &:hover{

src/CartsPagination.tsx

@@ -1,29 +1,33 @@
 import React from 'react';
+import { useMultiCartData } from './app-state';
 import { ReactComponent as PaginationIcon } from "./images/icons/ic_caret.svg";
 
 import './CartsPagination.scss';
 
 export interface Props {
-  page: number;
+  currentPage: number;
   totalPages: number;
-//   handlePagination: (page: number) => void;
 }
 export const CartsPagination: React.FC<Props> = ({
-  page,
+  currentPage,
   totalPages,
-//   handlePagination,
 }) => {
+
+  const { setPageNum} = useMultiCartData();
   return (
     <div className="CartsPagination">
-        {page !== 1 && (
-            <PaginationIcon className="CartsPagination__prevpageicon" />
+        {currentPage !== 1 && (
+         <button onClick={() => setPageNum(currentPage-1)}> <PaginationIcon className="CartsPagination__prevpageicon"/></button>
         )}
+        
         <span className="CartsPagination__pagenumber">
-            Page {page} of {totalPages}
+            Page {currentPage} of {totalPages}
         </span>
-        {page !== totalPages && (
-            <PaginationIcon className="CartsPagination__nextpageicon" />
+
+        {currentPage !== totalPages && (
+           <button onClick={() => setPageNum(currentPage+1)}> <PaginationIcon className="CartsPagination__nextpageicon" /></button>
         )}
+
     </div>
   );
 };