Skip to content

Commit 5b13fc6

Browse files
yulia-dnistrianpetro97rostyk-kanafotskyyyasamanloghman
authored
MT-4114 multi cart (#69)
* Add CartSelection and SettingsCart modal. * Add checking for displaying my Cart button * update style of carts list * Update styles in CartItemList and CartModal components * Merge branch 'master' of https://github.com/elasticpath/epcc-react-pwa-reference-storefront into MT-4114-create-new-cart # Please enter a commit message to explain why this merge is necessary, # especially if it merges an updated upstream into a topic branch. # # Lines starting with '#' will be ignored, and an empty message aborts # the commit. * Update moltin/sdk version. Add createCart and getCarts requests * Add Id of the selected cart to local storage. Update CartSelection component. * Create carts list component * Fix errors when cart is empty * Update cart modal for empty cart list * Update CartSelection and SettingsCart components * Added multi-card product button * Add cart list selection. Update styles * Add background for selected cart * Add confirmation delete carts * update style of confirmation modal * Fixed mobile styles for product page * Added create cart translation * implement bulk delete * Fix cart delete function * update bulk delete function * Associate guest cart to the customer * Fixed create cart issue * Fix styles and typos * Multi cart UI fixes * Add cart name form for creating cart in login flow * Update "Next" button in addCartName modal * update carts list * update responsive style, add loader * update cart list * update cart list * fix creating a new cart * add notification after the product was added to cart, add placeholder * Fix the problem MT-5082. My cart list is showing 0 when remove the item by updating the state of the multiCart in CartListItem * revert pull from npm * working on ticket MT-973. Follow the V2 design. Add Message to show the number of deleted carts * Issue MT-973 * Small fixes * MT-973 - user can delete cart/carts as per UX V3 - after deleted message is provided - can not delete the last one cart (as Kevin mentioned to disabled the trash button) * Add close BTN for delete message after user delete carts. reduce timer to 4000MS * login prompt on checkout for guest shopper * debug the issue with tab(MT-5173) - change title of cart setting * Update cart settings - add update setting to cartitemlist and edit scss * working on ticket MT-4940 edit cart name and description : add app-state function for editCart and add editCartInfo to services * update @moltin/sdk version * update edit cart function * update the name input for the cart * remove console.log * Back button * MT-4940 update cart name and description + show message update cart + MT-5172 show message after create cart * Minor changes as per Shaun comments * set selected cart when adding product to new cart * disable button for update form when name field is empty * Add name length check + error if exceed more than 250 characters * remove client-side check for name length * MT-5252 desktop and mobile - fix the ling name problem + fix the error in app-state * MT-5161 - Add update cart to useEffect to refresh the number of items of the cart * change item to product in cartlist as per Kevin and Bonnie * remove extra {} * remove product * Add product and products condition * Add product and products condition * add new condition to products * update value of onCartCreate props * MT-5161, Add empty array to useEffect to run just once * add default cart for new registered shopper * fix warnings * update multi cart data in bulk order * MT-5171 , user logged in, by click on cart button will see the latest used cart * Fix warning * add condition for setting icon * assigned created cart to selected cart * show cart list when no selected cart * revert changes * Change the my cart list view as per design , MT-5251 * Pagination for multiCarts - MT-1024 * Error handeling for name length - MT-5253 * fix the size and overflow of the add to cart button * error handling for cart description + fix caret color (Hover + active) * test deploy * update errors states * Done in responsive * Add services for remove all items from list + add empty cart + confirmation UI + change the scroll bar in add to cart btn * update moltin version * Add handleRemoveAllItems to make the cart empty + Payment function in services : added strict types * add loader & modal change state in catch error * change the confirmation message * MT-5430, Create cart interstitial refactor * MT-5350 - redirect user from registration to home when login * Show Create Cart (Force user to create cart) after they logged in if they have some items in the cart, MT-5417 * fix the 'Edge case is when Shopper choose to logout and then log in, the Cart interstitial will show but the session item is no longer there for new cart' * update moltin version * create default cart after user is logging in - check the default cart after login * associate guest cart with a user after registration * Create cart after registration * clean the code * Remove leftover console.log * keep the cart after checkout and empty cart * create orders lit component + style with grid box , add spinning to checkout btn * add ordershistory component + styling * add sortedOrders * fix the issue with car creation after registration * remove unassigned variable * remove unassigned variable * revert re-order changes * fix small issue in createcart after login * update SDk version * Fixed issue with types * Fix merge conflict - use src/LoginDialog/LoginDialog.tsx as a login form * Add FaildLogin to useEffect array Co-authored-by: Petro Dubno <petro.dubno@gmail.com> Co-authored-by: Rostyk <rkanafotskyy@gmail.com> Co-authored-by: Yasaman Loghmani <yasaman.loghmani@elasticpath.com>
1 parent c31d33b commit 5b13fc6

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

53 files changed

+53686
-299
lines changed

‎package-lock.json‎

Lines changed: 50706 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
"version": "2.0.0",
44
"private": true,
55
"dependencies": {
6-
"@moltin/sdk": "^5.0.0",
6+
"@moltin/sdk": "^5.0.1",
77
"@types/node": "^12.0.0",
88
"@types/react": "^16.9.0",
99
"@types/react-dom": "^16.9.0",
@@ -12,7 +12,7 @@
1212
"algolia-places-react": "^1.6.0",
1313
"algoliasearch": "^4.3.0",
1414
"app-localizer": "^1.2.2",
15-
"constate": "^2.0.0",
15+
"constate": "^3.1.0",
1616
"css-reset-and-normalize": "^2.1.0",
1717
"eslint-plugin-jsx-a11y": "^6.3.1",
1818
"formik": "^2.1.4",

‎src/AccountDropdown.tsx‎

Lines changed: 53 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,24 @@
1-
21
import React, { useState } from 'react';
32
import { Link, useHistory } from 'react-router-dom';
43
import useOnclickOutside from 'react-cool-onclickoutside';
5-
import { useCustomerData, useTranslation } from './app-state';
4+
import { useCartData, useCustomerData, useTranslation, useMultiCartData } from './app-state';
65
import { createAccountUrl } from './routes';
76
import { LoginDialog } from './LoginDialog/LoginDialog';
87
import { ReactComponent as AccountIcon } from './images/icons/ic_account.svg';
98

109
import './AccountDropdown.scss';
1110

12-
export const AccountDropdown: React.FC = (props) => {
11+
12+
interface AccountDropdownProps {
13+
openCartModal?: (...args: any[]) => any,
14+
handleShowNewCart?: (arg:boolean) => void,
15+
}
16+
17+
export const AccountDropdown: React.FC<AccountDropdownProps> = (props) => {
18+
const { openCartModal, handleShowNewCart} = props;
1319
const { isLoggedIn, customerEmail, customerName, clearCustomerData } = useCustomerData();
20+
const { count } = useCartData();
21+
const { setIsCartSelected } = useMultiCartData();
1422
const { t } = useTranslation();
1523
const history = useHistory();
1624

@@ -40,47 +48,54 @@ export const AccountDropdown: React.FC = (props) => {
4048
const logout = () => {
4149
localStorage.setItem('mcart', createCartIdentifier());
4250
clearCustomerData();
51+
setIsCartSelected(false);
52+
if(handleShowNewCart)
53+
handleShowNewCart(false);
4354
history.push('/');
4455
};
4556

46-
if (isLoggedIn) {
4757
return (
48-
<div className="accountdropdown">
49-
<div className={`accountdropdown__dropdown ${isOpen ? 'accountdropdown__open' : ''}`} ref={ref}>
50-
<button className="accountdropdown__btn" type="button" aria-label="toggle profile menu" onClick={handleSelectorClicked}>
51-
<AccountIcon className="accountdropdown__btnicon" />
58+
<div>
59+
{isLoggedIn ? (
60+
<div className="accountdropdown">
61+
<div className={`accountdropdown__dropdown ${isOpen ? 'accountdropdown__open' : ''}`} ref={ref}>
62+
<button className="accountdropdown__btn" type="button" aria-label="toggle profile menu"
63+
onClick={handleSelectorClicked}>
64+
<AccountIcon className="accountdropdown__btnicon"/>
65+
</button>
66+
{isOpen && (
67+
<div className="accountdropdown__menu">
68+
<ul className="accountdropdown__list">
69+
<li className="accountdropdown__listitem accountdropdown__itemtitle">
70+
<p className="accountdropdown__iteminfo">{customerName}</p>
71+
<p className="accountdropdown__iteminfo accountdropdown__emailinfo">{customerEmail}</p>
72+
</li>
73+
<li className="accountdropdown__listitem">
74+
<Link to={accountUrl} className="accountdropdown__link" onClick={handleHideDropdown}>
75+
{t('my-account')}
76+
</Link>
77+
</li>
78+
<li className="accountdropdown__listitem accountdropdown__itembtns">
79+
<button className="epbtn --secondary --fullwidth" type="button" onClick={logout}>
80+
{t('logout')}
81+
</button>
82+
</li>
83+
</ul>
84+
</div>
85+
)}
86+
</div>
87+
</div>
88+
) : (
89+
<div className="accountdropdown">
90+
<button className="accountdropdown__loginbtn" type="button" onClick={() => {setIsModalOpen(true)}}>
91+
{t('login')}
5292
</button>
53-
{isOpen && (
54-
<div className="accountdropdown__menu">
55-
<ul className="accountdropdown__list">
56-
<li className="accountdropdown__listitem accountdropdown__itemtitle">
57-
<p className="accountdropdown__iteminfo">{customerName}</p>
58-
<p className="accountdropdown__iteminfo accountdropdown__emailinfo">{customerEmail}</p>
59-
</li>
60-
<li className="accountdropdown__listitem">
61-
<Link to={accountUrl} className="accountdropdown__link" onClick={handleHideDropdown}>
62-
{t('my-account')}
63-
</Link>
64-
</li>
65-
<li className="accountdropdown__listitem accountdropdown__itembtns">
66-
<button className="epbtn --secondary --fullwidth" type="button" onClick={logout}>
67-
{t('logout')}
68-
</button>
69-
</li>
70-
</ul>
71-
</div>
72-
)}
7393
</div>
94+
)}
95+
{count > 0
96+
? <LoginDialog createCart={true} openModal={isModalOpen} handleModalClose={() => {setIsModalOpen(false)}} openCartModal={openCartModal} handleShowNewCart={handleShowNewCart}/>
97+
: <LoginDialog createCart={false} openModal={isModalOpen} handleModalClose={() => {setIsModalOpen(false)}} />
98+
}
7499
</div>
75100
);
76-
}
77-
78-
return (
79-
<div className="accountdropdown">
80-
<button className="accountdropdown__loginbtn" type="button" onClick={() => {setIsModalOpen(true)}}>
81-
{t('login')}
82-
</button>
83-
<LoginDialog openModal={isModalOpen} handleModalClose={() => {setIsModalOpen(false)}} />
84-
</div>
85-
);
86101
};

‎src/AppHeader.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -149,6 +149,10 @@
149149
&__cartbtntxt {
150150
display: none;
151151
}
152+
153+
&__cartpopup {
154+
right: -43px;
155+
}
152156
}
153157

154158
@media all and (display-mode: standalone) {

‎src/AppHeader.tsx‎

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -19,13 +19,19 @@ import './AppHeader.scss';
1919
export const AppHeader: React.FC = () => {
2020
const { t } = useTranslation();
2121
const [isCartModalOpen, setIsCartModalOpen] = useState(false);
22-
const { count, quantity, showCartPopup, updateCartItems } = useCartData();
22+
const { count, cartQuantity, showCartPopup, updateCartItems } = useCartData();
23+
const [newCart, setNewCart] = useState(false);
2324

2425
const handleCloseCartModal = () => {
2526
setIsCartModalOpen(false);
2627
};
2728

29+
const openCartModal = () => {
30+
setIsCartModalOpen(true);
31+
}
32+
2833
const handleCartModal = () => {
34+
2935
updateCartItems();
3036
setIsCartModalOpen(true);
3137
};
@@ -58,7 +64,7 @@ export const AppHeader: React.FC = () => {
5864
</button>
5965
{showCartPopup && (
6066
<div className="appheader__cartpopup">
61-
<p>{quantity === 1 ? t('cart-popup-info-1') : t('cart-popup-info', {quantity: quantity.toString()})}</p>
67+
<p>{cartQuantity === 1 ? t('cart-popup-info-1') : t('cart-popup-info', {quantity: cartQuantity.toString()})}</p>
6268
<button className="epbtn" onClick={handleCartModal}>{t('view-cart')}</button>
6369
</div>
6470
)}
@@ -67,7 +73,7 @@ export const AppHeader: React.FC = () => {
6773
<BulkOrderDropdown />
6874
</div>
6975
<div className="appheader__account">
70-
<AccountDropdown />
76+
<AccountDropdown openCartModal={openCartModal} handleShowNewCart={(bool:boolean) => setNewCart(bool)} />
7177
</div>
7278
</div>
7379
<div className="appheader__navigation">
@@ -80,7 +86,7 @@ export const AppHeader: React.FC = () => {
8086
</strong>
8187
</div>
8288
</Offline>
83-
<CartModal isCartModalOpen={isCartModalOpen} handleCloseModal={handleCloseCartModal} />
89+
<CartModal newCart={newCart} handleNewCart={(bool:boolean) => setNewCart(bool)} isCartModalOpen={isCartModalOpen} handleCloseModal={handleCloseCartModal} />
8490
</div>
8591
);
8692
};

‎src/BulkOrder.tsx‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11

22
import React, { useEffect, useState } from 'react';
33
import { useFormik } from 'formik';
4-
import { useTranslation, useCartData } from './app-state';
4+
import { useTranslation, useCartData, useMultiCartData } from './app-state';
55
import { bulkAdd } from './service';
66

77
import { ReactComponent as ClearIcon } from './images/icons/ic_clear.svg';
@@ -14,7 +14,8 @@ interface FormValues {
1414

1515
export const BulkOrder: React.FC = (props) => {
1616
const { t } = useTranslation();
17-
const { updateCartItems } = useCartData();
17+
const { updateCartItems, setCartQuantity, handleShowCartPopup } = useCartData();
18+
const { updateCartData } = useMultiCartData();
1819
const [bulkOrderItems, setBulkOrderItems] = useState([]);
1920
const [bulkError, setBulkError] = useState('');
2021
const [showLoader, setShowLoader] = useState(false);
@@ -28,10 +29,14 @@ export const BulkOrder: React.FC = (props) => {
2829
onSubmit: (values) => {
2930
setBulkError('');
3031
setShowLoader(true);
32+
const totalQuantity = bulkOrderItems.reduce((sum, { quantity }) => sum + quantity, 0);
3133
const mcart = localStorage.getItem('mcart') || '';
3234
bulkAdd(mcart, bulkOrderItems)
3335
.then(() => {
3436
updateCartItems();
37+
updateCartData();
38+
setCartQuantity(totalQuantity);
39+
handleShowCartPopup();
3540
resetForm();
3641
setShowLoader(false);
3742
})

0 commit comments

Comments
 (0)