@weareconceptstudio/account 0.5.8 → 0.5.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/AccountCounter/index.d.ts +2 -1
- package/dist/components/AccountCounter/index.js +3 -3
- package/dist/components/TotalCheckout/index.js +5 -7
- package/dist/components/TotalCheckout/style.js +12 -3
- package/dist/modules/cart/CartItems/Item/index.js +15 -6
- package/dist/modules/cart/CartItems/ItemMobile/index.js +7 -5
- package/dist/modules/cart/CartItems/index.js +11 -18
- package/dist/modules/cart/CartItems/style.js +5 -0
- package/dist/modules/cart/CartTemplate/Skeleton/index.d.ts +1 -3
- package/dist/modules/cart/CartTemplate/Skeleton/index.js +3 -1
- package/dist/modules/cart/CartTemplate/index.js +7 -13
- package/dist/modules/cart/CartTemplate/style.js +23 -0
- package/dist/modules/cart/EmptyCart/index.d.ts +1 -2
- package/dist/modules/cart/EmptyCart/index.js +5 -3
- package/dist/modules/checkout/CheckoutProvider.js +22 -13
- package/dist/modules/checkout/CheckoutTemplate/StepReview/index.d.ts +1 -3
- package/dist/modules/checkout/CheckoutTemplate/StepReview/index.js +2 -2
- package/dist/modules/checkout/CheckoutTemplate/index.js +7 -13
- package/dist/modules/checkout/CheckoutTemplate/style.js +23 -0
- package/dist/modules/order/OrderedItems/Item/index.js +1 -1
- package/dist/modules/order/OrderedItems/ItemMobile/index.js +1 -1
- package/package.json +1 -1
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
export default AccountCounter;
|
|
2
|
-
declare function AccountCounter({ productId, qty, isGift, maxQty }: {
|
|
2
|
+
declare function AccountCounter({ productId, qty, isGift, maxQty, promotionId }: {
|
|
3
3
|
productId: any;
|
|
4
4
|
qty?: number;
|
|
5
5
|
isGift: any;
|
|
6
6
|
maxQty: any;
|
|
7
|
+
promotionId: any;
|
|
7
8
|
}): React.JSX.Element;
|
|
8
9
|
import React from 'react';
|
|
@@ -4,14 +4,14 @@ import { useAccountContext } from '../../AccountProvider';
|
|
|
4
4
|
import { useCheckoutContext } from '../../modules';
|
|
5
5
|
//* Style
|
|
6
6
|
import AccountCounterStyle from './style';
|
|
7
|
-
const AccountCounter = ({ productId, qty = 1, isGift, maxQty }) => {
|
|
7
|
+
const AccountCounter = ({ productId, qty = 1, isGift, maxQty, promotionId }) => {
|
|
8
8
|
const { useCart } = useAccountContext();
|
|
9
9
|
const { toggleCartItem, items } = useCart();
|
|
10
10
|
const { setCheckGift } = useCheckoutContext();
|
|
11
11
|
//! State
|
|
12
12
|
const [count, setCount] = useState(qty);
|
|
13
13
|
useEffect(() => {
|
|
14
|
-
setCount(items.find((item) => item.product.id == productId && !item.is_gift)?.qty || qty);
|
|
14
|
+
setCount(items.find((item) => item.product.id == productId && item.promotionId == promotionId && !item.is_gift)?.qty || qty);
|
|
15
15
|
}, [items]);
|
|
16
16
|
const updateCartServer = useCallback((quantity) => {
|
|
17
17
|
toggleCartItem({
|
|
@@ -24,7 +24,7 @@ const AccountCounter = ({ productId, qty = 1, isGift, maxQty }) => {
|
|
|
24
24
|
e.stopPropagation();
|
|
25
25
|
const newCount = type == 'inc' ? count + 1 : count - 1;
|
|
26
26
|
setCount(newCount);
|
|
27
|
-
isGift ? setCheckGift({
|
|
27
|
+
isGift ? setCheckGift({ promotionId, qty: newCount, productId }) : debouncedUpdateCartServer(newCount);
|
|
28
28
|
};
|
|
29
29
|
return (React.createElement(AccountCounterStyle, { onClick: (e) => e.stopPropagation(), className: `counter-block ${count == 0 ? 'opacity-zero pointer-none' : ''}` },
|
|
30
30
|
React.createElement("div", { className: 'counter' },
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React, { memo } from 'react';
|
|
2
2
|
import { Text, CollapseContainer, handlePriceCheckFunc, numToLocalString } from '@weareconceptstudio/core';
|
|
3
3
|
import { useAccountContext } from '../../AccountProvider';
|
|
4
|
-
import {
|
|
4
|
+
import { useCheckoutContext } from '../../modules';
|
|
5
5
|
import AccountButton from '../AccountButton';
|
|
6
6
|
import FreeShippingComp from './FreeShippingComp';
|
|
7
7
|
import PromoCodeComp from './PromoCodeComp';
|
|
@@ -12,16 +12,14 @@ import GiftComp from './GiftComp';
|
|
|
12
12
|
import TotalCheckoutStyle from './style';
|
|
13
13
|
//* Skeleton
|
|
14
14
|
import SkeletonTotalCheckout from './Skeleton';
|
|
15
|
-
const TotalCheckout = memo(({ isShipping, children, confirmation, buttonProps
|
|
16
|
-
const { useCart
|
|
15
|
+
const TotalCheckout = memo(({ isShipping, children, confirmation, buttonProps }) => {
|
|
16
|
+
const { useCart } = useAccountContext();
|
|
17
17
|
const { checkoutBtnDisabled } = useCheckoutContext();
|
|
18
|
-
const {
|
|
19
|
-
const { user } = useUser();
|
|
20
|
-
const { itemsCount, shippingCost, total, subtotal, useBalance, discount, currency } = useCart();
|
|
18
|
+
const { itemsCount, shippingCost, total, subtotal, useBalance, discount, currency, loading } = useCart();
|
|
21
19
|
return (React.createElement(TotalCheckoutStyle, null,
|
|
22
20
|
React.createElement("div", { className: `cart-main-wrap` },
|
|
23
21
|
React.createElement("div", { className: `left-panel-wrap panel` }, children),
|
|
24
|
-
React.createElement("div", { className: `right-panel-wrap panel ${confirmation ? 'display-none-wrap' : ''}` }, !confirmation && !
|
|
22
|
+
React.createElement("div", { className: `right-panel-wrap panel ${confirmation ? 'display-none-wrap' : ''}` }, !confirmation && !loading ? (React.createElement("div", { className: `max-width-wrapper sticky-wrap` },
|
|
25
23
|
React.createElement("div", { className: 'panel-block' },
|
|
26
24
|
React.createElement(Text, { className: `account-p account-p2 account-font-bold account-primary-color1 sticky-wrap-title`, text: `account.cart_checkout.orderSummary` }),
|
|
27
25
|
React.createElement("div", { className: `od-line` }),
|
|
@@ -200,12 +200,12 @@ const TotalCheckoutStyle = styled.section `
|
|
|
200
200
|
}
|
|
201
201
|
|
|
202
202
|
/* //! Scroll logic */
|
|
203
|
-
--account_rightPanelScrollSize: var(--
|
|
203
|
+
--account_rightPanelScrollSize: var(--sp70x);
|
|
204
204
|
|
|
205
205
|
.scroll-block {
|
|
206
206
|
overflow-x: hidden;
|
|
207
207
|
overflow-y: auto;
|
|
208
|
-
max-height: calc(
|
|
208
|
+
max-height: calc(100dvh - var(--account_rightPanelScrollSize));
|
|
209
209
|
|
|
210
210
|
scrollbar-width: none;
|
|
211
211
|
-ms-overflow-style: none;
|
|
@@ -232,6 +232,9 @@ const TotalCheckoutStyle = styled.section `
|
|
|
232
232
|
/* //! Collapse Sizes */
|
|
233
233
|
--account_collapseLargeDistance: var(--sp4x);
|
|
234
234
|
--account_collapseSmallDistance: var(--sp3x);
|
|
235
|
+
|
|
236
|
+
/* //! Scroll logic */
|
|
237
|
+
--account_rightPanelScrollSize: var(--sp55x);
|
|
235
238
|
}
|
|
236
239
|
|
|
237
240
|
@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeLMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeM}) {
|
|
@@ -251,6 +254,9 @@ const TotalCheckoutStyle = styled.section `
|
|
|
251
254
|
/* //! Collapse Sizes */
|
|
252
255
|
--account_collapseLargeDistance: var(--sp3x);
|
|
253
256
|
--account_collapseSmallDistance: var(--sp3x);
|
|
257
|
+
|
|
258
|
+
/* //! Scroll logic */
|
|
259
|
+
--account_rightPanelScrollSize: var(--sp55x);
|
|
254
260
|
}
|
|
255
261
|
|
|
256
262
|
@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeMMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeS}) {
|
|
@@ -270,6 +276,9 @@ const TotalCheckoutStyle = styled.section `
|
|
|
270
276
|
/* //! Collapse Sizes */
|
|
271
277
|
--account_collapseLargeDistance: var(--sp4x);
|
|
272
278
|
--account_collapseSmallDistance: var(--sp3x);
|
|
279
|
+
|
|
280
|
+
/* //! Scroll logic */
|
|
281
|
+
--account_rightPanelScrollSize: var(--sp50x);
|
|
273
282
|
}
|
|
274
283
|
|
|
275
284
|
@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeSMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXS}) {
|
|
@@ -291,7 +300,7 @@ const TotalCheckoutStyle = styled.section `
|
|
|
291
300
|
--account_collapseSmallDistance: var(--sp3x);
|
|
292
301
|
|
|
293
302
|
/* //! Scroll logic */
|
|
294
|
-
--account_rightPanelScrollSize: var(--
|
|
303
|
+
--account_rightPanelScrollSize: var(--sp50x);
|
|
295
304
|
}
|
|
296
305
|
|
|
297
306
|
@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXSMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_TabletSize}) {
|
|
@@ -27,11 +27,11 @@ const Item = memo(({ data, remove, select, isLast, actions }) => {
|
|
|
27
27
|
"\u00A0",
|
|
28
28
|
React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color1`, text: data.size }))) : data.product.short_info_2 ? (React.createElement("div", { className: `right-second-item-wrap` },
|
|
29
29
|
React.createElement(Text, { className: `account-p account-p3 account-font-bold account-primary-color1`, text: data.product.short_info_2 }))) : null)),
|
|
30
|
-
React.createElement("div", { className: `col-item tl-col-2` }, select && !data.is_gift ? (React.createElement("div", { className: `select-and-out-of-stock-wrap` }, !data.product.out_of_stock ? (React.createElement(AccountCounter, { productId: data.product.id })) : (React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color1`, text: 'account.general_actions.outOfStock' })))) : data.is_gift ? (React.createElement("div", { className: 'wrapper-gift-button' }, checkoutData.checkGift
|
|
31
|
-
React.createElement(AccountCounter, { maxQty: data
|
|
30
|
+
React.createElement("div", { className: `col-item tl-col-2` }, select && !data.is_gift ? (React.createElement("div", { className: `select-and-out-of-stock-wrap` }, !data.product.out_of_stock ? (React.createElement(AccountCounter, { productId: data.product.id })) : (React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color1`, text: 'account.general_actions.outOfStock' })))) : data.is_gift ? (React.createElement("div", { className: 'wrapper-gift-button' }, checkoutData.checkGift.find((item) => item.promotionId == data.appliedPromotion.id && item.id == data.product.id)?.qty !== 0 ? (React.createElement(React.Fragment, null,
|
|
31
|
+
React.createElement(AccountCounter, { maxQty: data?.qty, productId: data.product.id, promotionId: data.appliedPromotion.id, isGift: data.is_gift, qty: checkoutData.checkGift.find((item) => item.promotionId == data.appliedPromotion.id && item.id == data.product.id)?.qty }))) : (React.createElement(React.Fragment, null,
|
|
32
32
|
React.createElement(AccountButton, { className: `button-gift`, text: 'account.general_actions.restore', onClick: () => {
|
|
33
|
-
setCheckGift({ productId: data.product.id
|
|
34
|
-
} }))))) : (React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color1`, text: data
|
|
33
|
+
setCheckGift({ promotionId: data.appliedPromotion.id, productId: data.product.id, qty: data?.qty });
|
|
34
|
+
} }))))) : (React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color1`, text: data?.qty }))),
|
|
35
35
|
React.createElement("div", { className: `col-item tl-col-3 col-item-3 nowrap` }, data.product.sale_price && !data.is_gift ? (React.createElement("div", null,
|
|
36
36
|
React.createElement(Text, { className: `account-p account-p3 account-font-bold account-secondary-color2 align-right cart-sale-price`, text: handlePriceCheckFunc(data.product.sale_price, currency) }),
|
|
37
37
|
React.createElement("div", { className: 'wrapper-discount' },
|
|
@@ -40,7 +40,9 @@ const Item = memo(({ data, remove, select, isLast, actions }) => {
|
|
|
40
40
|
data.product.discount_type === 'percentage' ? '%' : ` ${currency}`,
|
|
41
41
|
"\u00A0",
|
|
42
42
|
React.createElement("span", { className: 'lowercase' }, translate('account.order_balance.discount')))) : null,
|
|
43
|
-
React.createElement(Text, { className: `account-p account-p3 account-font-regular account-primary-color2 line-through value align-right cart-price1`, text: handlePriceCheckFunc(data.product.price, currency) })))) : (React.createElement(Text, { className: `account-p account-p3 account-font-bold account-primary-color1 align-right cart-price2
|
|
43
|
+
React.createElement(Text, { className: `account-p account-p3 account-font-regular account-primary-color2 line-through value align-right cart-price1`, text: handlePriceCheckFunc(data.product.price, currency) })))) : (React.createElement(Text, { className: `account-p account-p3 account-font-bold account-primary-color1 align-right cart-price2` }, data.is_gift ? (React.createElement(React.Fragment, null,
|
|
44
|
+
handlePriceCheckFunc(0, currency),
|
|
45
|
+
React.createElement(Text, { className: 'gift-name-text' }, data.appliedPromotion.name))) : (handlePriceCheckFunc(data.product.price, currency))))),
|
|
44
46
|
React.createElement("div", { className: `col-item tl-col-4 col-item-4 nowrap` },
|
|
45
47
|
React.createElement("div", { className: `col-item-inner-wrap` },
|
|
46
48
|
React.createElement("div", { className: `flex-end-wrap` }, data.sale_total && !data.is_gift ? (React.createElement("div", null,
|
|
@@ -51,7 +53,14 @@ const Item = memo(({ data, remove, select, isLast, actions }) => {
|
|
|
51
53
|
data.product.discount_type === 'percentage' ? '%' : ` ${currency}`,
|
|
52
54
|
"\u00A0",
|
|
53
55
|
React.createElement("span", { className: 'lowercase' }, translate('account.order_balance.discount')))) : null,
|
|
54
|
-
React.createElement(Text, { className: `account-p account-p3 account-font-regular account-primary-color2 line-through value align-right cart-total1`, text: handlePriceCheckFunc(data.total, currency) })))) : (
|
|
56
|
+
React.createElement(Text, { className: `account-p account-p3 account-font-regular account-primary-color2 line-through value align-right cart-total1`, text: handlePriceCheckFunc(data.total, currency) })))) : (
|
|
57
|
+
// <Text
|
|
58
|
+
// className={`account-p account-p3 account-font-bold account-primary-color1 align-right cart-total2`}
|
|
59
|
+
// text={handlePriceCheckFunc(data.is_gift ? 0 : data.total, currency)}
|
|
60
|
+
// />
|
|
61
|
+
React.createElement(Text, { className: `account-p account-p3 account-font-bold account-primary-color1 align-right cart-total2` }, data.is_gift ? (React.createElement(React.Fragment, null,
|
|
62
|
+
handlePriceCheckFunc(0, currency),
|
|
63
|
+
React.createElement(Text, { className: 'gift-name-text' }, data.appliedPromotion.name))) : (handlePriceCheckFunc(data.total, currency))))),
|
|
55
64
|
React.createElement("div", { className: `favorite-and-remove-wrap` }, remove && !data.is_gift && (React.createElement("div", { className: `remove-btn-wrap` },
|
|
56
65
|
React.createElement(AccountButton, { btnType: `green-small-text`, className: 'cart-remove-btn', text: 'account.general_actions.remove', onClick: () => actions.delete({ productId: data.product.id }) }))))))),
|
|
57
66
|
isLast ? React.createElement("div", { className: 'line' }) : null));
|
|
@@ -35,16 +35,18 @@ const ItemMobile = memo(({ data, select }) => {
|
|
|
35
35
|
data.product.discount_type === 'percentage' ? '%' : ` ${currency}`,
|
|
36
36
|
"\u00A0",
|
|
37
37
|
React.createElement("span", { className: 'lowercase' }, translate('account.order_balance.discount')))) : null,
|
|
38
|
-
React.createElement(Text, { className: `account-p account-p3 account-font-regular account-primary-color2 line-through mobile-total-price price-discount`, text: handlePriceCheckFunc(data.total, currency) })))) : (React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color1 mobile-total-price2
|
|
39
|
-
|
|
40
|
-
|
|
38
|
+
React.createElement(Text, { className: `account-p account-p3 account-font-regular account-primary-color2 line-through mobile-total-price price-discount`, text: handlePriceCheckFunc(data.total, currency) })))) : (React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color1 mobile-total-price2` }, data.is_gift ? (React.createElement(React.Fragment, null,
|
|
39
|
+
handlePriceCheckFunc(0, currency),
|
|
40
|
+
React.createElement(Text, { className: 'gift-name-text' }, data.appliedPromotion.name))) : (handlePriceCheckFunc(data.total, currency)))),
|
|
41
|
+
select && !data.is_gift ? (React.createElement("div", { className: `inner-container` }, !data.product.out_of_stock ? (React.createElement(AccountCounter, { productId: data.product.id })) : (React.createElement("div", { className: `in-block` },
|
|
42
|
+
React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color1`, text: 'account.general_actions.outOfStock' }))))) : data.is_gift ? (React.createElement("div", { className: 'wrapper-gift-button' }, checkoutData.checkGift.find((item) => item.promotionId == data.appliedPromotion.id && item.id == data.product.id)?.qty !== 0 ? (React.createElement(AccountCounter, { maxQty: data?.qty, productId: data.product.id, promotionId: data.appliedPromotion.id, isGift: data.is_gift, qty: checkoutData.checkGift.find((item) => item.promotionId == data.appliedPromotion.id && item.id == data.product.id)?.qty })) : (React.createElement(AccountButton, { className: `capitalize button-gift`, text: 'account.general_actions.restore', onClick: () => {
|
|
43
|
+
setCheckGift({ promotionId: data.appliedPromotion.id, productId: data.product.id, qty: data?.qty });
|
|
41
44
|
} })))) : (React.createElement("div", { className: `in-block` },
|
|
42
|
-
React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color1`, text: 'account.general_actions.outOfStock' }))))) : (React.createElement("div", { className: `in-block` },
|
|
43
45
|
React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color1 mobile-quantity-with-symbol2` },
|
|
44
46
|
translate('account.order_balance.quantity'),
|
|
45
47
|
":"),
|
|
46
48
|
"\u00A0",
|
|
47
|
-
React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color1 mobile-quantity2`, text: data
|
|
49
|
+
React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color1 mobile-quantity2`, text: data?.qty }))))))),
|
|
48
50
|
React.createElement("div", { className: 'line' })));
|
|
49
51
|
});
|
|
50
52
|
export default ItemMobile;
|
|
@@ -1,23 +1,16 @@
|
|
|
1
|
-
import React, { memo,
|
|
1
|
+
import React, { memo, useMemo } from 'react';
|
|
2
2
|
import { Text, useUi } from '@weareconceptstudio/core';
|
|
3
3
|
//* Components
|
|
4
4
|
import Item from './Item';
|
|
5
5
|
import ItemMobile from './ItemMobile';
|
|
6
6
|
import { AccountButton } from '../../../components';
|
|
7
|
+
import { useAccountContext } from '../../../AccountProvider';
|
|
7
8
|
//* Style
|
|
8
9
|
import CartItemsStyle from './style';
|
|
9
|
-
const CartItems = memo(({
|
|
10
|
+
const CartItems = memo(({ className, title, smallFontSize, additionalParameters, actions }) => {
|
|
10
11
|
const { winWidth } = useUi();
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
if (existingItem) {
|
|
14
|
-
existingItem.qty += item.qty;
|
|
15
|
-
}
|
|
16
|
-
else {
|
|
17
|
-
acc.push({ ...item });
|
|
18
|
-
}
|
|
19
|
-
return acc;
|
|
20
|
-
}, []);
|
|
12
|
+
const { useCart } = useAccountContext();
|
|
13
|
+
const { items } = useCart();
|
|
21
14
|
//! Store
|
|
22
15
|
const itemsStore = useMemo(() => {
|
|
23
16
|
return winWidth >= 768 ? (React.createElement("div", { className: `cart-items-table-wrap` },
|
|
@@ -30,16 +23,16 @@ const CartItems = memo(({ data, className, title, smallFontSize, additionalParam
|
|
|
30
23
|
React.createElement(Text, { className: `account-p account-p3 account-font-bold account-primary-color1 nowrap align-right`, text: `account.order_balance.price` })),
|
|
31
24
|
React.createElement("div", { className: `title-wrap tl-col-4 title-item` },
|
|
32
25
|
React.createElement(Text, { className: `account-p account-p3 account-font-bold account-primary-color1 nowrap align-right`, text: `account.order_balance.total` }))),
|
|
33
|
-
React.createElement("div", { className: `items-wrap` },
|
|
34
|
-
?
|
|
35
|
-
return (React.createElement(Item, { key: index, data: item, actions: actions, isLast:
|
|
26
|
+
React.createElement("div", { className: `items-wrap` }, items?.length > 0
|
|
27
|
+
? items.map((item, index) => {
|
|
28
|
+
return (React.createElement(Item, { key: index, data: item, actions: actions, isLast: items.length - 1 == index, select: additionalParameters.select, remove: additionalParameters.remove }));
|
|
36
29
|
})
|
|
37
|
-
: null))) : (React.createElement("div", { className: `mobile-cart-items-table-wrap` },
|
|
38
|
-
?
|
|
30
|
+
: null))) : (React.createElement("div", { className: `mobile-cart-items-table-wrap` }, items?.length > 0
|
|
31
|
+
? items.map((item, index) => {
|
|
39
32
|
return (React.createElement(ItemMobile, { key: index, data: item, select: additionalParameters.select }));
|
|
40
33
|
})
|
|
41
34
|
: null));
|
|
42
|
-
}, [winWidth,
|
|
35
|
+
}, [winWidth, items, additionalParameters, actions]);
|
|
43
36
|
return (React.createElement(CartItemsStyle, { className: className || '' },
|
|
44
37
|
additionalParameters.edit.list ? (React.createElement("div", { className: `title-edit-wrapper` },
|
|
45
38
|
React.createElement(Text, { className: `account-p ${smallFontSize ? 'account-p2' : 'account-p1'} account-font-bold account-primary-color1 cart-items-title2-version`, text: title }),
|
|
@@ -1,12 +1,14 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { useUi } from '@weareconceptstudio/core';
|
|
3
3
|
import { useCheckoutContext } from '../../../checkout';
|
|
4
|
+
import { useAccountContext } from '../../../../AccountProvider';
|
|
4
5
|
import { skeletonCategoryName, skeletonMenuTitle, skeletonShopUrl, skeletonCategoryNameAdapting } from './icons';
|
|
5
6
|
import SkeletonItemCart from './SkeletonItem';
|
|
6
7
|
import SkeletonCartTemplateStyle from './style';
|
|
7
|
-
const SkeletonCartTemplate = (
|
|
8
|
+
const SkeletonCartTemplate = () => {
|
|
8
9
|
const { winWidth } = useUi();
|
|
9
10
|
const { isCheckoutPage } = useCheckoutContext();
|
|
11
|
+
const { shopUrl } = useAccountContext();
|
|
10
12
|
return (React.createElement(SkeletonCartTemplateStyle, { className: isCheckoutPage ? 'checkout-style' : '' },
|
|
11
13
|
React.createElement("div", { className: 'left-bar' },
|
|
12
14
|
shopUrl ? React.createElement("div", { className: 'wrapper-url' }, skeletonShopUrl) : React.createElement(React.Fragment, null),
|
|
@@ -15,25 +15,18 @@ import SkeletonCartTemplate from './Skeleton';
|
|
|
15
15
|
const CartTemplate = ({ children, checkoutUrl = '/checkout/', moreMenu, emptyCartIcon }) => {
|
|
16
16
|
const { translate } = useTranslation();
|
|
17
17
|
const { shopUrl, useCart } = useAccountContext();
|
|
18
|
-
const {
|
|
19
|
-
const isFirstRender = useRef(true);
|
|
20
|
-
useEffect(() => {
|
|
21
|
-
if (isFirstRender.current) {
|
|
22
|
-
isFirstRender.current = false;
|
|
23
|
-
return;
|
|
24
|
-
}
|
|
25
|
-
}, [loading]);
|
|
18
|
+
const { itemsCount, loading, toggleCartItem, deleteCartItem } = useCart();
|
|
26
19
|
return (React.createElement(Page, { className: 'cart use-account' },
|
|
27
20
|
React.createElement(AccountContainer, { className: `second-version` },
|
|
28
21
|
React.createElement(CartTemplateStyle, null,
|
|
29
|
-
React.createElement(TotalCheckout, {
|
|
22
|
+
React.createElement(TotalCheckout, { buttonProps: {
|
|
30
23
|
url: checkoutUrl,
|
|
31
24
|
text: 'account.cart_checkout.proceedToCheckout',
|
|
32
|
-
} }, !
|
|
25
|
+
} }, !loading ? (itemsCount > 0 ? (React.createElement(React.Fragment, null,
|
|
33
26
|
shopUrl ? (React.createElement(AccountButton, { url: shopUrl, btnType: `purple-text`, className: `back-to-shop` },
|
|
34
27
|
leftArrow,
|
|
35
28
|
translate('account.general_actions.backToShop'))) : null,
|
|
36
|
-
React.createElement(CartItems, {
|
|
29
|
+
React.createElement(CartItems, { smallFontSize: true, className: `cart-st-wrap`, title: 'account.cart_checkout.myCart', actions: {
|
|
37
30
|
add: toggleCartItem,
|
|
38
31
|
delete: deleteCartItem,
|
|
39
32
|
}, additionalParameters: {
|
|
@@ -43,7 +36,8 @@ const CartTemplate = ({ children, checkoutUrl = '/checkout/', moreMenu, emptyCar
|
|
|
43
36
|
edit: { list: false },
|
|
44
37
|
} }),
|
|
45
38
|
shopUrl ? (React.createElement(AccountButton, { url: shopUrl, btnType: `purple-text`, className: `continue-shop-text`, text: `account.general_actions.continueShopping` })) : null,
|
|
46
|
-
moreMenu || null)) : (React.createElement(EmptyCart, {
|
|
47
|
-
children
|
|
39
|
+
moreMenu || null)) : (React.createElement(EmptyCart, { emptyCartIcon: emptyCartIcon }))) : (React.createElement(SkeletonCartTemplate, null))),
|
|
40
|
+
children,
|
|
41
|
+
React.createElement("div", { className: 'fake-block' })))));
|
|
48
42
|
};
|
|
49
43
|
export default CartTemplate;
|
|
@@ -44,6 +44,29 @@ const CartTemplateStyle = styled.section `
|
|
|
44
44
|
margin-top: var(--account_continueShopTextMT);
|
|
45
45
|
}
|
|
46
46
|
|
|
47
|
+
/* //! Fake Load Animation */
|
|
48
|
+
position: relative;
|
|
49
|
+
|
|
50
|
+
.fake-block {
|
|
51
|
+
position: absolute;
|
|
52
|
+
top: 0;
|
|
53
|
+
display: block;
|
|
54
|
+
width: 100%;
|
|
55
|
+
height: 100%;
|
|
56
|
+
z-index: 99;
|
|
57
|
+
background-color: var(--account_backgroundColor);
|
|
58
|
+
animation: load 0.5s ease-out forwards;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
@keyframes load {
|
|
62
|
+
0% {
|
|
63
|
+
display: block;
|
|
64
|
+
}
|
|
65
|
+
100% {
|
|
66
|
+
display: none;
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
|
|
47
70
|
@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXLMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeL}) {
|
|
48
71
|
--account_backToShopIconSize: var(--sp2-5x);
|
|
49
72
|
--account_continueShopTextMT: var(--sp5x);
|
|
@@ -1,15 +1,17 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { Text } from '@weareconceptstudio/core';
|
|
3
|
+
import { emptyCartIconDefault } from './icons';
|
|
3
4
|
import { AccountButton } from '../../../components';
|
|
5
|
+
import { useAccountContext } from '../../../AccountProvider';
|
|
4
6
|
//* Style
|
|
5
7
|
import EmptyCartStyle from './style';
|
|
6
|
-
|
|
7
|
-
const
|
|
8
|
+
const EmptyCart = ({ emptyCartIcon }) => {
|
|
9
|
+
const { shopUrl } = useAccountContext();
|
|
8
10
|
return (React.createElement(EmptyCartStyle, null,
|
|
9
11
|
React.createElement("div", { className: `empty-cart-wrap` },
|
|
10
12
|
emptyCartIcon || React.createElement("div", { className: 'wrapper-icon' }, emptyCartIconDefault),
|
|
11
13
|
React.createElement(Text, { tag: `h4`, className: `account-h6 account-font-bold account-primary-color1 empty-cart-title`, text: `account.cart_checkout.cartEmpty` }),
|
|
12
14
|
React.createElement(Text, { className: `account-p account-p2 account-font-regular account-primary-color1 empty-cart-description`, text: `account.cart_checkout.cartEmptyDesc` }),
|
|
13
|
-
|
|
15
|
+
shopUrl ? (React.createElement(AccountButton, { url: shopUrl, btnType: 'purple-text', className: 'empty-cart-btn', text: `account.general_actions.shopNow` })) : null)));
|
|
14
16
|
};
|
|
15
17
|
export default EmptyCart;
|
|
@@ -17,26 +17,40 @@ export const CheckoutProvider = ({ children }) => {
|
|
|
17
17
|
useBalance: null,
|
|
18
18
|
note: '',
|
|
19
19
|
paymentType: user?.payment_method || 'cash_on_delivery',
|
|
20
|
-
checkGift:
|
|
20
|
+
checkGift: [],
|
|
21
21
|
});
|
|
22
22
|
const [idramForm, setIdramForm] = useState();
|
|
23
23
|
//! Has gift from data
|
|
24
24
|
useMemo(() => {
|
|
25
25
|
items.length &&
|
|
26
|
+
!checkoutData.checkGift.length &&
|
|
26
27
|
setCheckoutData((prev) => {
|
|
27
|
-
const checkGift =
|
|
28
|
-
items?.forEach((item) => {
|
|
28
|
+
const checkGift = [];
|
|
29
|
+
items?.forEach((item, index) => {
|
|
29
30
|
if (item.is_gift) {
|
|
30
|
-
const productId = item.product.id
|
|
31
|
-
|
|
31
|
+
const productId = item.product.id;
|
|
32
|
+
const promotionId = item.appliedPromotion.id;
|
|
33
|
+
checkGift.push({ id: productId, qty: item.qty, promotionId: promotionId });
|
|
32
34
|
}
|
|
33
35
|
});
|
|
34
36
|
return { ...prev, checkGift };
|
|
35
37
|
});
|
|
36
38
|
}, [items]);
|
|
37
39
|
//! Set gift Select
|
|
38
|
-
const setCheckGift = useCallback(({
|
|
39
|
-
setCheckoutData((prev) => ({
|
|
40
|
+
const setCheckGift = useCallback(({ promotionId, qty, productId } = {}) => {
|
|
41
|
+
setCheckoutData((prev) => ({
|
|
42
|
+
...prev,
|
|
43
|
+
checkGift: [
|
|
44
|
+
...prev.checkGift.map((item) => {
|
|
45
|
+
if (item.promotionId == promotionId && item.id == productId) {
|
|
46
|
+
return { ...item, qty };
|
|
47
|
+
}
|
|
48
|
+
else {
|
|
49
|
+
return { ...item };
|
|
50
|
+
}
|
|
51
|
+
}),
|
|
52
|
+
],
|
|
53
|
+
}));
|
|
40
54
|
}, []);
|
|
41
55
|
const isCheckoutPage = useMemo(() => {
|
|
42
56
|
return window.location.href.includes('checkout');
|
|
@@ -72,12 +86,7 @@ export const CheckoutProvider = ({ children }) => {
|
|
|
72
86
|
let data = { ...checkoutData };
|
|
73
87
|
//! Check gift
|
|
74
88
|
if (data.checkGift) {
|
|
75
|
-
data.checkGift =
|
|
76
|
-
.filter(([key, value]) => value)
|
|
77
|
-
.map(([key, value]) => ({
|
|
78
|
-
id: key,
|
|
79
|
-
qty: value,
|
|
80
|
-
}));
|
|
89
|
+
data.checkGift = data.checkGift.filter((item) => item.qty);
|
|
81
90
|
if (!data.checkGift.length) {
|
|
82
91
|
delete data.checkGift;
|
|
83
92
|
}
|
|
@@ -5,7 +5,7 @@ import { SelectAddress } from '../../../address';
|
|
|
5
5
|
import { CartItems } from '../../../cart';
|
|
6
6
|
import Payment from '../../../payment/Payment';
|
|
7
7
|
import SelectPaymentMethodPopup from '../../../payment/SelectPaymentMethodPopup';
|
|
8
|
-
const StepReview = (
|
|
8
|
+
const StepReview = () => {
|
|
9
9
|
const { openPopup } = useUi();
|
|
10
10
|
const handleSelectPopup = useCallback(() => {
|
|
11
11
|
openPopup(React.createElement(SelectPaymentMethodPopup, null), { accountIcon: true, className: 'popup-payment-block' });
|
|
@@ -13,7 +13,7 @@ const StepReview = ({ items }) => {
|
|
|
13
13
|
return (React.createElement("div", { className: 'step-review' },
|
|
14
14
|
React.createElement(SelectAddress, null),
|
|
15
15
|
React.createElement(Payment, { title: 'account.payment_management.payment', onClick: handleSelectPopup }),
|
|
16
|
-
React.createElement(CartItems, {
|
|
16
|
+
React.createElement(CartItems, { smallFontSize: true, className: `checkout-mt`, title: 'account.order_management.orderItems', additionalParameters: {
|
|
17
17
|
remove: false,
|
|
18
18
|
select: false,
|
|
19
19
|
horizontalLine: false,
|
|
@@ -18,15 +18,8 @@ const CheckoutTemplate = () => {
|
|
|
18
18
|
const { useCart, useUser } = useAccountContext();
|
|
19
19
|
const { hasCheckoutAddress, addressLoading } = useAddressContext();
|
|
20
20
|
const { handleCheckout } = useCheckoutContext();
|
|
21
|
-
const {
|
|
21
|
+
const { itemsCount, loading } = useCart();
|
|
22
22
|
const { user } = useUser();
|
|
23
|
-
const isFirstRender = useRef(true);
|
|
24
|
-
useEffect(() => {
|
|
25
|
-
if (isFirstRender.current) {
|
|
26
|
-
isFirstRender.current = false;
|
|
27
|
-
return;
|
|
28
|
-
}
|
|
29
|
-
}, [loading]);
|
|
30
23
|
const checkStep = {
|
|
31
24
|
isShipping: !hasCheckoutAddress,
|
|
32
25
|
isReview: hasCheckoutAddress,
|
|
@@ -55,18 +48,19 @@ const CheckoutTemplate = () => {
|
|
|
55
48
|
}, [itemsCount, loading]);
|
|
56
49
|
return (React.createElement(Page, { className: 'checkout use-account' },
|
|
57
50
|
React.createElement(AccountContainer, { className: `second-version` },
|
|
58
|
-
React.createElement(CheckoutTemplateStyle, null,
|
|
59
|
-
React.createElement(TotalCheckout, {
|
|
51
|
+
React.createElement(CheckoutTemplateStyle, null, user ? (React.createElement(React.Fragment, null,
|
|
52
|
+
React.createElement(TotalCheckout, { isShipping: checkStep.isShipping, buttonProps: {
|
|
60
53
|
url: false,
|
|
61
54
|
handleClick: handleCheckoutBtn,
|
|
62
55
|
type: checkStep.isShipping ? 'submit' : 'button',
|
|
63
56
|
text: checkStep.isShipping ? 'account.cart_checkout.proceedToCheckout' : 'account.cart_checkout.proceedToPayment',
|
|
64
57
|
loadingButton: loadingProcessToPayment,
|
|
65
|
-
} }, !addressLoading && itemsCount
|
|
58
|
+
} }, !addressLoading && itemsCount ? (React.createElement(React.Fragment, null,
|
|
66
59
|
React.createElement(Sequence, { step: checkStep.isShipping ? 'shipping' : 'review' }),
|
|
67
|
-
checkStep.isShipping ? React.createElement(StepShipping, { firstStepFormRef: firstStepFormRef }) : React.createElement(StepReview,
|
|
60
|
+
checkStep.isShipping ? React.createElement(StepShipping, { firstStepFormRef: firstStepFormRef }) : React.createElement(StepReview, null))) : (React.createElement(React.Fragment, null,
|
|
68
61
|
React.createElement(SequenceSkeleton, { className: 'sequence-checkout-template' }),
|
|
69
62
|
React.createElement(SkeletonAddressSelect, { className: 'address-checkout-template' }),
|
|
70
|
-
React.createElement(SkeletonCartTemplate, null))))
|
|
63
|
+
React.createElement(SkeletonCartTemplate, null)))),
|
|
64
|
+
React.createElement("div", { className: 'fake-block' }))) : null))));
|
|
71
65
|
};
|
|
72
66
|
export default CheckoutTemplate;
|
|
@@ -27,6 +27,29 @@ const CheckoutTemplateStyle = styled.section `
|
|
|
27
27
|
margin-left: calc(-1 * calc(var(--account_itemDistance) / 2));
|
|
28
28
|
}
|
|
29
29
|
|
|
30
|
+
/* //! Fake Load Animation */
|
|
31
|
+
position: relative;
|
|
32
|
+
|
|
33
|
+
.fake-block {
|
|
34
|
+
position: absolute;
|
|
35
|
+
top: 0;
|
|
36
|
+
display: block;
|
|
37
|
+
width: 100%;
|
|
38
|
+
height: 100%;
|
|
39
|
+
z-index: 99;
|
|
40
|
+
background-color: var(--account_backgroundColor);
|
|
41
|
+
animation: load 0.5s ease-out forwards;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
@keyframes load {
|
|
45
|
+
0% {
|
|
46
|
+
display: block;
|
|
47
|
+
}
|
|
48
|
+
100% {
|
|
49
|
+
display: none;
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
|
|
30
53
|
@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXLMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeL}) {
|
|
31
54
|
--account_billingWrapperMTop: var(--sp11x);
|
|
32
55
|
--account_itemDistance: var(--sp4x);
|
|
@@ -25,7 +25,7 @@ const Item = memo(({ data }) => {
|
|
|
25
25
|
React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color1`, text: data.size }))) : data.product?.short_info_2 ? (React.createElement("div", { className: `right-second-item-wrap` },
|
|
26
26
|
React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color1`, text: data.product.short_info_2 }))) : null)),
|
|
27
27
|
React.createElement("div", { className: `col-item tl-col-2` },
|
|
28
|
-
React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color1`, text: data
|
|
28
|
+
React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color1`, text: data?.qty })),
|
|
29
29
|
React.createElement("div", { className: `col-item tl-col-3 col-item-3 nowrap` }, data.sale_price && !data.is_gift ? (React.createElement("div", null,
|
|
30
30
|
React.createElement(Text, { className: `account-p account-p3 account-font-bold account-secondary-color2 align-right order-sale-price`, text: handlePriceCheckFunc(data.sale_price, currency) }),
|
|
31
31
|
React.createElement("div", { className: 'wrapper-discount' },
|
|
@@ -28,7 +28,7 @@ const ItemMobile = memo(({ data }) => {
|
|
|
28
28
|
translate('account.order_balance.quantity'),
|
|
29
29
|
":"),
|
|
30
30
|
"\u00A0",
|
|
31
|
-
React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color1`, text: data
|
|
31
|
+
React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color1`, text: data?.qty })),
|
|
32
32
|
React.createElement("div", { className: `mobile-price-wrap nowrap` },
|
|
33
33
|
React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color1`, text: `account.order_balance.price` }),
|
|
34
34
|
data.sale_price && !data.is_gift ? (React.createElement(React.Fragment, null,
|