@weareconceptstudio/account 0.6.0 → 0.6.2
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.js +2 -2
- package/dist/modules/cart/CartItems/Item/index.js +5 -5
- package/dist/modules/cart/CartItems/ItemMobile/index.js +3 -5
- package/dist/modules/cart/CartProvider.d.ts +6 -6
- package/dist/modules/cart/CartProvider.js +16 -19
- package/dist/modules/checkout/ThankYouTemplate/index.js +1 -0
- package/package.json +1 -1
|
@@ -4,7 +4,7 @@ import { useCart } from '../../modules';
|
|
|
4
4
|
//* Style
|
|
5
5
|
import AccountCounterStyle from './style';
|
|
6
6
|
const AccountCounter = ({ productId, qty = 1, isGift, maxQty, promotionId }) => {
|
|
7
|
-
const { toggleCartItem, items,
|
|
7
|
+
const { toggleCartItem, items, setGifts } = useCart();
|
|
8
8
|
//! State
|
|
9
9
|
const [count, setCount] = useState(qty);
|
|
10
10
|
useEffect(() => {
|
|
@@ -21,7 +21,7 @@ const AccountCounter = ({ productId, qty = 1, isGift, maxQty, promotionId }) =>
|
|
|
21
21
|
e.stopPropagation();
|
|
22
22
|
const newCount = type == 'inc' ? count + 1 : count - 1;
|
|
23
23
|
setCount(newCount);
|
|
24
|
-
isGift ?
|
|
24
|
+
isGift ? setGifts({ promotionId, qty: newCount, productId }) : debouncedUpdateCartServer(newCount);
|
|
25
25
|
};
|
|
26
26
|
return (React.createElement(AccountCounterStyle, { onClick: (e) => e.stopPropagation(), className: `counter-block ${count == 0 ? 'opacity-zero pointer-none' : ''}` },
|
|
27
27
|
React.createElement("div", { className: 'counter' },
|
|
@@ -5,10 +5,10 @@ import { useAccountContext } from '../../../../AccountProvider';
|
|
|
5
5
|
import { useCart } from '../../CartProvider';
|
|
6
6
|
import { defaultIconGift } from '../util';
|
|
7
7
|
const Item = memo(({ data, remove, select, isLast, actions, isCheckout }) => {
|
|
8
|
-
const { checkoutData,
|
|
8
|
+
const { checkoutData, setGifts } = useCart();
|
|
9
9
|
const { currency, handleProductClick } = useAccountContext();
|
|
10
10
|
const { translate } = useTranslation();
|
|
11
|
-
return !isCheckout || checkoutData.
|
|
11
|
+
return !isCheckout || checkoutData.gifts.find((item) => item.promotionId == data.appliedPromotion?.id && item.productId == data.product.id)?.qty !== 0 ? (React.createElement("div", { className: `item-wrap user-select-none` },
|
|
12
12
|
React.createElement("div", { className: 'line' }),
|
|
13
13
|
React.createElement("div", { className: `item-inner-wrapper` },
|
|
14
14
|
React.createElement("div", { className: `col-item tl-col-1 col-item-1` },
|
|
@@ -27,10 +27,10 @@ const Item = memo(({ data, remove, select, isLast, actions, isCheckout }) => {
|
|
|
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 && !isCheckout ? (React.createElement("div", { className: 'wrapper-gift-button' }, checkoutData.
|
|
31
|
-
React.createElement(AccountCounter, { maxQty: data?.qty, productId: data.product.id, promotionId: data.appliedPromotion.id, isGift: data.is_gift, qty: checkoutData.
|
|
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 && !isCheckout ? (React.createElement("div", { className: 'wrapper-gift-button' }, checkoutData.gifts.find((item) => item.promotionId == data.appliedPromotion.id && item.productId == 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.gifts.find((item) => item.promotionId == data.appliedPromotion.id && item.productId == data.product.id)?.qty }))) : (React.createElement(React.Fragment, null,
|
|
32
32
|
React.createElement(AccountButton, { className: `button-gift`, text: 'account.general_actions.restore', onClick: () => {
|
|
33
|
-
|
|
33
|
+
setGifts({ promotionId: data.appliedPromotion.id, productId: data.product.id, qty: data?.qty });
|
|
34
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.product.discount) && !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) }),
|
|
@@ -7,8 +7,8 @@ import { defaultIconGift } from '../util';
|
|
|
7
7
|
const ItemMobile = memo(({ data, select, isCheckout }) => {
|
|
8
8
|
const { handleProductClick, currency } = useAccountContext();
|
|
9
9
|
const { translate } = useTranslation();
|
|
10
|
-
const { checkoutData,
|
|
11
|
-
return !isCheckout || checkoutData.
|
|
10
|
+
const { checkoutData, setGifts } = useCart();
|
|
11
|
+
return !isCheckout || checkoutData.gifts.find((item) => item.promotionId == data.appliedPromotion?.id && item.productId == data.product.id)?.qty !== 0 ? (React.createElement(React.Fragment, null,
|
|
12
12
|
React.createElement("div", { className: `mobile-cart-item-wrap user-select-none` },
|
|
13
13
|
React.createElement("div", { className: `mobile-cart-item-inner-wrap` },
|
|
14
14
|
React.createElement("div", { className: `mobile-image-wrap` },
|
|
@@ -39,9 +39,7 @@ const ItemMobile = memo(({ data, select, isCheckout }) => {
|
|
|
39
39
|
handlePriceCheckFunc(0, currency),
|
|
40
40
|
React.createElement("span", { className: 'gift-name-text' }, data.appliedPromotion.name))) : (handlePriceCheckFunc(data.total, currency)))),
|
|
41
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 && !isCheckout ? (React.createElement("div", { className: 'wrapper-gift-button' }, checkoutData.
|
|
43
|
-
setCheckGift({ promotionId: data.appliedPromotion.id, productId: data.product.id, qty: data?.qty });
|
|
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' }))))) : data.is_gift && !isCheckout ? (React.createElement("div", { className: 'wrapper-gift-button' }, checkoutData.gifts.find((item) => item.promotionId == data.appliedPromotion.id && item.productId == 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.gifts.find((item) => item.promotionId == data.appliedPromotion.id && item.productId == data.product.id)?.qty })) : (React.createElement(AccountButton, { className: `capitalize button-gift`, text: 'account.general_actions.restore', onClick: () => setGifts({ promotionId: data.appliedPromotion.id, productId: data.product.id, qty: data?.qty }) })))) : (React.createElement("div", { className: `in-block` },
|
|
45
43
|
React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color1 mobile-quantity-with-symbol2` },
|
|
46
44
|
translate('account.order_balance.quantity'),
|
|
47
45
|
":"),
|
|
@@ -5,13 +5,13 @@ interface CartItem {
|
|
|
5
5
|
}
|
|
6
6
|
interface CheckoutData {
|
|
7
7
|
addressId: number | null;
|
|
8
|
-
useBalance:
|
|
8
|
+
useBalance: number | string | null;
|
|
9
9
|
note: string;
|
|
10
10
|
paymentType: string;
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
qty: number;
|
|
11
|
+
gifts: {
|
|
12
|
+
productId: number;
|
|
14
13
|
promotionId: number;
|
|
14
|
+
qty: number;
|
|
15
15
|
}[];
|
|
16
16
|
card_id: number | null;
|
|
17
17
|
}
|
|
@@ -27,7 +27,7 @@ interface CartState {
|
|
|
27
27
|
shippingCostValue: number | null;
|
|
28
28
|
hasFreeGift: boolean | null;
|
|
29
29
|
giftThresholdRemaining: number | null;
|
|
30
|
-
useBalance:
|
|
30
|
+
useBalance: number | string | null;
|
|
31
31
|
discount: number | null;
|
|
32
32
|
usePromotion?: string | null;
|
|
33
33
|
appliedPromotions: any[];
|
|
@@ -47,7 +47,7 @@ interface CartContextType extends CartState {
|
|
|
47
47
|
fillCheckoutData: (key: string, value: any) => void;
|
|
48
48
|
handleCheckout: () => Promise<void>;
|
|
49
49
|
fillCart: (key: string, value: any) => void;
|
|
50
|
-
|
|
50
|
+
setGifts: ({ promotionId, qty, productId }: {
|
|
51
51
|
promotionId: number;
|
|
52
52
|
qty: number;
|
|
53
53
|
productId: number;
|
|
@@ -24,12 +24,12 @@ export const CartProvider = ({ useUser, children }) => {
|
|
|
24
24
|
discount: null,
|
|
25
25
|
appliedPromotions: [],
|
|
26
26
|
});
|
|
27
|
-
const initialCheckoutData = JSON.parse(sessionStorage.getItem('checkoutData')
|
|
27
|
+
const initialCheckoutData = JSON.parse(sessionStorage.getItem('checkoutData')) || {
|
|
28
28
|
addressId: null,
|
|
29
29
|
useBalance: null,
|
|
30
30
|
note: '',
|
|
31
31
|
paymentType: user?.payment_method || 'cash_on_delivery',
|
|
32
|
-
|
|
32
|
+
gifts: [],
|
|
33
33
|
card_id: null,
|
|
34
34
|
};
|
|
35
35
|
const [checkoutData, setCheckoutData] = useState(initialCheckoutData);
|
|
@@ -110,6 +110,7 @@ export const CartProvider = ({ useUser, children }) => {
|
|
|
110
110
|
}
|
|
111
111
|
};
|
|
112
112
|
const clearCart = async () => {
|
|
113
|
+
sessionStorage.clear();
|
|
113
114
|
if (isLoggedIn) {
|
|
114
115
|
const { data } = await api.post('clear-cart');
|
|
115
116
|
setResourceDecorator(data);
|
|
@@ -119,34 +120,33 @@ export const CartProvider = ({ useUser, children }) => {
|
|
|
119
120
|
await getCart();
|
|
120
121
|
}
|
|
121
122
|
};
|
|
122
|
-
// TODO: make router push func
|
|
123
123
|
const reorder = async (orderId) => {
|
|
124
124
|
const { data } = await api.post('reorder', { orderId });
|
|
125
125
|
setResourceDecorator(data);
|
|
126
|
-
|
|
126
|
+
window.location.href = `/${selectedLang}/cart`;
|
|
127
127
|
};
|
|
128
128
|
//! Has gift from data
|
|
129
129
|
useEffect(() => {
|
|
130
|
-
if (cartState.items.length && !checkoutData.
|
|
130
|
+
if (cartState.items.length && !checkoutData.gifts?.length) {
|
|
131
131
|
setCheckoutData((prev) => {
|
|
132
|
-
const
|
|
132
|
+
const gifts = cartState.items
|
|
133
133
|
.filter((item) => item.is_gift)
|
|
134
134
|
.map((item) => ({
|
|
135
|
-
|
|
136
|
-
qty: item.qty,
|
|
135
|
+
productId: item.product.id,
|
|
137
136
|
promotionId: item.appliedPromotion.id,
|
|
137
|
+
qty: item.qty,
|
|
138
138
|
}));
|
|
139
|
-
return { ...prev,
|
|
139
|
+
return { ...prev, gifts };
|
|
140
140
|
});
|
|
141
141
|
}
|
|
142
142
|
}, [cartState.items]);
|
|
143
143
|
//! Set gift Select
|
|
144
|
-
const
|
|
144
|
+
const setGifts = useCallback(({ promotionId, qty, productId }) => {
|
|
145
145
|
setCheckoutData((prev) => ({
|
|
146
146
|
...prev,
|
|
147
|
-
|
|
148
|
-
...prev.
|
|
149
|
-
if (item.promotionId == promotionId && item.
|
|
147
|
+
gifts: [
|
|
148
|
+
...prev.gifts.map((item) => {
|
|
149
|
+
if (item.promotionId == promotionId && item.productId == productId) {
|
|
150
150
|
return { ...item, qty };
|
|
151
151
|
}
|
|
152
152
|
else {
|
|
@@ -188,11 +188,8 @@ export const CartProvider = ({ useUser, children }) => {
|
|
|
188
188
|
const handleCheckout = async () => {
|
|
189
189
|
let data = cleanObject({ ...checkoutData });
|
|
190
190
|
//! Check gift
|
|
191
|
-
if (data.
|
|
192
|
-
|
|
193
|
-
if (!data.checkGift.length)
|
|
194
|
-
delete data.checkGift;
|
|
195
|
-
}
|
|
191
|
+
if (!data.gifts.length)
|
|
192
|
+
delete data.gifts;
|
|
196
193
|
if (isNumeric(checkoutData.paymentType)) {
|
|
197
194
|
data.paymentType = 'credit_card';
|
|
198
195
|
data.card_id = Number(checkoutData.paymentType);
|
|
@@ -234,7 +231,7 @@ export const CartProvider = ({ useUser, children }) => {
|
|
|
234
231
|
fillCheckoutData,
|
|
235
232
|
handleCheckout,
|
|
236
233
|
fillCart,
|
|
237
|
-
|
|
234
|
+
setGifts,
|
|
238
235
|
checkoutBtnDisabled,
|
|
239
236
|
isCheckoutPage,
|
|
240
237
|
} },
|
|
@@ -7,6 +7,7 @@ import { useAccountContext } from '../../../AccountProvider';
|
|
|
7
7
|
import { confirmImage } from './icons';
|
|
8
8
|
import AccountContainer from '../../../components/AccountContainer';
|
|
9
9
|
import { useCart } from '../../cart';
|
|
10
|
+
// TODO: maybe need change order number translate
|
|
10
11
|
const ThankYouTemplate = ({ orderNumber, thankIcon }) => {
|
|
11
12
|
const { shopUrl } = useAccountContext();
|
|
12
13
|
const { translate } = useTranslation();
|