@weareconceptstudio/account 0.6.2 → 0.6.3
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/TotalCheckout/BalanceComp/utils.d.ts +0 -1
- package/dist/components/TotalCheckout/BalanceComp/utils.js +1 -2
- package/dist/components/TotalCheckout/PromoCodeComp/AppliedPromotion/index.d.ts +3 -1
- package/dist/components/TotalCheckout/PromoCodeComp/AppliedPromotion/index.js +2 -5
- package/dist/components/TotalCheckout/PromoCodeComp/index.js +6 -9
- package/dist/modules/address/AddressProvider.js +9 -1
- package/dist/modules/cart/CartItems/Item/index.js +0 -5
- package/dist/modules/cart/CartProvider.d.ts +6 -1
- package/dist/modules/cart/CartProvider.js +30 -3
- package/dist/modules/order/OrderedItems/Item/index.js +7 -14
- package/dist/modules/order/OrderedItems/ItemMobile/index.js +6 -11
- package/package.json +2 -1
|
@@ -1,13 +1,12 @@
|
|
|
1
1
|
export const balanceFields = [
|
|
2
2
|
{
|
|
3
|
-
fieldType: '
|
|
3
|
+
fieldType: 'number',
|
|
4
4
|
labelProps: {
|
|
5
5
|
name: 'balance',
|
|
6
6
|
errorKey: 'account.balance_promotions.balance',
|
|
7
7
|
},
|
|
8
8
|
fieldProps: {
|
|
9
9
|
placeholder: 'account.balance_promotions.balancePlaceholder',
|
|
10
|
-
type: 'number',
|
|
11
10
|
},
|
|
12
11
|
},
|
|
13
12
|
];
|
|
@@ -1,11 +1,8 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { Text } from '@weareconceptstudio/core';
|
|
3
|
-
const AppliedPromotion = ({ name }) => {
|
|
3
|
+
const AppliedPromotion = ({ name, onClick, isExcluded = false }) => {
|
|
4
4
|
return (React.createElement("div", { className: `promo-code-success-block` },
|
|
5
5
|
React.createElement(Text, { className: 'account-p account-p4 account-primary-color2 account-font-medium promo-code-success-text' }, name),
|
|
6
|
-
React.createElement(Text, { text: 'account.general_actions.remove', className: 'account-p account-p4 account-primary-color2 account-font-medium promo-code-remove-text', onClick:
|
|
7
|
-
// promotionHandler(null);
|
|
8
|
-
// setDisable(false);
|
|
9
|
-
} })));
|
|
6
|
+
React.createElement(Text, { text: isExcluded ? 'account.general_actions.restore' : 'account.general_actions.remove', className: 'account-p account-p4 account-primary-color2 account-font-medium promo-code-remove-text', onClick: onClick })));
|
|
10
7
|
};
|
|
11
8
|
export default AppliedPromotion;
|
|
@@ -8,16 +8,13 @@ import { promoCodeFields } from './utils';
|
|
|
8
8
|
//* Style
|
|
9
9
|
import PromoCodeCompStyle from './style';
|
|
10
10
|
const PromoCodeComp = () => {
|
|
11
|
-
const { itemsCount,
|
|
12
|
-
const handlePromotion = (promotion) => {
|
|
13
|
-
fillCart('usePromotion', promotion);
|
|
14
|
-
};
|
|
11
|
+
const { itemsCount, appliedPromotions, fillCart, togglePromotion, checkoutData } = useCart();
|
|
15
12
|
const onFinish = (values) => {
|
|
16
|
-
|
|
13
|
+
fillCart('promotion_code', values?.promo_code || null);
|
|
17
14
|
};
|
|
18
15
|
const promotions = useMemo(() => {
|
|
19
|
-
return appliedPromotions?.map((promotion
|
|
20
|
-
}, [appliedPromotions]);
|
|
16
|
+
return appliedPromotions?.map((promotion) => (React.createElement(AppliedPromotion, { key: promotion.id, ...promotion, isExcluded: checkoutData?.excludedPromotions?.includes(promotion.id), onClick: () => (promotion.is_manual ? onFinish(null) : togglePromotion({ promotionId: promotion.id })) })));
|
|
17
|
+
}, [appliedPromotions, checkoutData.excludedPromotions]);
|
|
21
18
|
return (React.createElement(PromoCodeCompStyle, { className: `collapse-distance ${itemsCount ? '' : 'disable'}` },
|
|
22
19
|
React.createElement(CollapseItem, { status: appliedPromotions?.length ? 'open' : 'close', title: React.createElement(React.Fragment, null,
|
|
23
20
|
React.createElement("div", { className: 'inner-wrapper-icon' },
|
|
@@ -26,9 +23,9 @@ const PromoCodeComp = () => {
|
|
|
26
23
|
React.createElement("path", { d: 'M6 12L6 0', stroke: 'black', strokeWidth: '2' }))),
|
|
27
24
|
React.createElement(Text, { className: 'account-p account-p4 account-primary-color1 account-font-medium promo-code-text', text: 'account.balance_promotions.gotPromotionCode' })), description: React.createElement(React.Fragment, null,
|
|
28
25
|
promotions,
|
|
29
|
-
|
|
26
|
+
!checkoutData.promotion_code ? (React.createElement(FormBuilder, { onSubmit: onFinish, fields: promoCodeFields, className: `promo-code-block`, formOptions: {
|
|
30
27
|
className: 'promo-code-container',
|
|
31
28
|
} },
|
|
32
|
-
React.createElement(AccountButton, { type: 'submit', btnType: `promo-code-version`, text: `account.general_actions.add` })))) })));
|
|
29
|
+
React.createElement(AccountButton, { type: 'submit', btnType: `promo-code-version`, text: `account.general_actions.add` }))) : null) })));
|
|
33
30
|
};
|
|
34
31
|
export default PromoCodeComp;
|
|
@@ -8,7 +8,7 @@ export const useAddressContext = () => {
|
|
|
8
8
|
};
|
|
9
9
|
export const AddressProvider = ({ addressType, addressFormFields = [], useUser, children }) => {
|
|
10
10
|
const { isLoggedIn } = useUser();
|
|
11
|
-
const { fillCheckoutData, fillCart, isCheckoutPage } = useCart();
|
|
11
|
+
const { fillCheckoutData, fillCart, isCheckoutPage, checkoutData } = useCart();
|
|
12
12
|
const [addressLoading, setAddressLoading] = useState(false);
|
|
13
13
|
const [addresses, setAddresses] = useState(addressType ? { billing: [], shipping: [] } : []);
|
|
14
14
|
const [selectedAddresses, setSelectedAddresses] = useState(addressType ? { billing: {}, shipping: {} } : {});
|
|
@@ -35,6 +35,14 @@ export const AddressProvider = ({ addressType, addressFormFields = [], useUser,
|
|
|
35
35
|
});
|
|
36
36
|
}
|
|
37
37
|
}, [isLoggedIn]);
|
|
38
|
+
useEffect(() => {
|
|
39
|
+
if (checkoutData?.addressId) {
|
|
40
|
+
let storageSelectedAddress = addresses.find((item) => item.id == checkoutData.addressId);
|
|
41
|
+
if (storageSelectedAddress) {
|
|
42
|
+
setSelectedAddresses(storageSelectedAddress);
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
}, [checkoutData?.addressId, addresses]);
|
|
38
46
|
const createAddress = async ({ data, type }) => {
|
|
39
47
|
return await api.post('addresses', data).then((res) => {
|
|
40
48
|
if (addressType) {
|
|
@@ -48,11 +48,6 @@ const Item = memo(({ data, remove, select, isLast, actions, isCheckout }) => {
|
|
|
48
48
|
React.createElement("div", { className: `flex-end-wrap` }, (data.sale_total || data.product.discount) && !data.is_gift ? (React.createElement("div", null,
|
|
49
49
|
React.createElement(Text, { className: `account-p account-p3 account-font-bold account-secondary-color2 align-right cart-sale-total`, text: handlePriceCheckFunc(data.sale_total, currency) }),
|
|
50
50
|
React.createElement("div", { className: 'wrapper-discount' },
|
|
51
|
-
data.product.discount ? (React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color2 discount-text` },
|
|
52
|
-
data.product.discount.value,
|
|
53
|
-
data.product.discount.type === 'percentage' ? '%' : ` ${currency}`,
|
|
54
|
-
"\u00A0",
|
|
55
|
-
React.createElement("span", { className: 'lowercase' }, translate('account.order_balance.discount')))) : null,
|
|
56
51
|
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) })))) : (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,
|
|
57
52
|
handlePriceCheckFunc(0, currency),
|
|
58
53
|
React.createElement("span", { className: 'gift-name-text' }, data.appliedPromotion.name))) : (handlePriceCheckFunc(data.total, currency))))),
|
|
@@ -14,6 +14,8 @@ interface CheckoutData {
|
|
|
14
14
|
qty: number;
|
|
15
15
|
}[];
|
|
16
16
|
card_id: number | null;
|
|
17
|
+
excludedPromotions: any[];
|
|
18
|
+
promotion_code: string | null;
|
|
17
19
|
}
|
|
18
20
|
interface CartState {
|
|
19
21
|
itemsCount: number;
|
|
@@ -29,8 +31,8 @@ interface CartState {
|
|
|
29
31
|
giftThresholdRemaining: number | null;
|
|
30
32
|
useBalance: number | string | null;
|
|
31
33
|
discount: number | null;
|
|
32
|
-
usePromotion?: string | null;
|
|
33
34
|
appliedPromotions: any[];
|
|
35
|
+
promotion_code: string | null;
|
|
34
36
|
}
|
|
35
37
|
interface CartContextType extends CartState {
|
|
36
38
|
getCart: (params?: Record<string, any>) => Promise<void>;
|
|
@@ -52,6 +54,9 @@ interface CartContextType extends CartState {
|
|
|
52
54
|
qty: number;
|
|
53
55
|
productId: number;
|
|
54
56
|
}) => void;
|
|
57
|
+
togglePromotion: ({ promotionId }: {
|
|
58
|
+
promotionId: any;
|
|
59
|
+
}) => void;
|
|
55
60
|
checkoutBtnDisabled: boolean;
|
|
56
61
|
isCheckoutPage: boolean;
|
|
57
62
|
}
|
|
@@ -21,6 +21,7 @@ export const CartProvider = ({ useUser, children }) => {
|
|
|
21
21
|
hasFreeGift: null,
|
|
22
22
|
giftThresholdRemaining: null,
|
|
23
23
|
useBalance: null,
|
|
24
|
+
promotion_code: null,
|
|
24
25
|
discount: null,
|
|
25
26
|
appliedPromotions: [],
|
|
26
27
|
});
|
|
@@ -31,6 +32,8 @@ export const CartProvider = ({ useUser, children }) => {
|
|
|
31
32
|
paymentType: user?.payment_method || 'cash_on_delivery',
|
|
32
33
|
gifts: [],
|
|
33
34
|
card_id: null,
|
|
35
|
+
excludedPromotions: [],
|
|
36
|
+
promotion_code: null
|
|
34
37
|
};
|
|
35
38
|
const [checkoutData, setCheckoutData] = useState(initialCheckoutData);
|
|
36
39
|
const checkoutDataRef = useRef(checkoutData);
|
|
@@ -45,8 +48,16 @@ export const CartProvider = ({ useUser, children }) => {
|
|
|
45
48
|
return cookieCart ? JSON.parse(cookieCart) : [];
|
|
46
49
|
};
|
|
47
50
|
const setResourceDecorator = (data) => {
|
|
48
|
-
setCartState((prev) => ({
|
|
49
|
-
|
|
51
|
+
setCartState((prev) => ({
|
|
52
|
+
...prev,
|
|
53
|
+
...data,
|
|
54
|
+
loading: false
|
|
55
|
+
}));
|
|
56
|
+
setCheckoutData((prev) => ({
|
|
57
|
+
...prev,
|
|
58
|
+
useBalance: data.useBalance,
|
|
59
|
+
promotion_code: data.promotion_code
|
|
60
|
+
}));
|
|
50
61
|
};
|
|
51
62
|
const isCheckoutPage = useMemo(() => {
|
|
52
63
|
return window.location.href.includes('checkout');
|
|
@@ -58,7 +69,7 @@ export const CartProvider = ({ useUser, children }) => {
|
|
|
58
69
|
return isCheckoutPage || isCartPage ? 'cart' : 'cart-summary';
|
|
59
70
|
}, [isCheckoutPage, isCartPage]);
|
|
60
71
|
const getCart = async (params = {}) => {
|
|
61
|
-
let newParams = { ...cleanObject(
|
|
72
|
+
let newParams = { ...cleanObject(checkoutDataRef.current), ...params, cartResourceType };
|
|
62
73
|
if (isLoggedIn) {
|
|
63
74
|
const { data } = await api.get({ url: 'cart', lang: selectedLang, params: newParams });
|
|
64
75
|
setResourceDecorator(data);
|
|
@@ -156,6 +167,21 @@ export const CartProvider = ({ useUser, children }) => {
|
|
|
156
167
|
],
|
|
157
168
|
}));
|
|
158
169
|
}, []);
|
|
170
|
+
const togglePromotion = ({ promotionId }) => {
|
|
171
|
+
setCheckoutData((prev) => {
|
|
172
|
+
const excludedPromotions = prev.excludedPromotions;
|
|
173
|
+
const index = excludedPromotions.indexOf(promotionId);
|
|
174
|
+
if (index > -1) {
|
|
175
|
+
excludedPromotions.splice(index, 1);
|
|
176
|
+
}
|
|
177
|
+
else {
|
|
178
|
+
excludedPromotions.push(promotionId);
|
|
179
|
+
}
|
|
180
|
+
const updatedData = { ...prev, excludedPromotions };
|
|
181
|
+
getCart(updatedData);
|
|
182
|
+
return updatedData;
|
|
183
|
+
});
|
|
184
|
+
};
|
|
159
185
|
const checkoutBtnDisabled = useMemo(() => {
|
|
160
186
|
let isDisabled = false;
|
|
161
187
|
if (isCheckoutPage && isNumeric(checkoutData.paymentType)) {
|
|
@@ -232,6 +258,7 @@ export const CartProvider = ({ useUser, children }) => {
|
|
|
232
258
|
handleCheckout,
|
|
233
259
|
fillCart,
|
|
234
260
|
setGifts,
|
|
261
|
+
togglePromotion,
|
|
235
262
|
checkoutBtnDisabled,
|
|
236
263
|
isCheckoutPage,
|
|
237
264
|
} },
|
|
@@ -26,29 +26,22 @@ const Item = memo(({ data }) => {
|
|
|
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
28
|
React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color1`, text: data?.qty })),
|
|
29
|
-
React.createElement("div", { className: `col-item tl-col-3 col-item-3 nowrap` },
|
|
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' },
|
|
32
|
-
data.
|
|
33
|
-
data.
|
|
34
|
-
data.
|
|
32
|
+
data.appliedPromotion ? (React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color2 discount-text` },
|
|
33
|
+
data.appliedPromotion.value,
|
|
34
|
+
data.appliedPromotion.type === 'percentage' ? '%' : ` ${currency}`,
|
|
35
35
|
"\u00A0",
|
|
36
36
|
React.createElement("span", { className: 'lowercase' }, translate('account.order_balance.discount')))) : null,
|
|
37
37
|
React.createElement(Text, { className: `account-p account-p3 account-font-regular account-primary-color2 line-through value align-right order-price1`, text: handlePriceCheckFunc(data.price, currency) })))) : (React.createElement(Text, { className: `account-p account-p3 account-font-bold account-primary-color1 align-right order-sale-price` }, data.is_gift ? (React.createElement(React.Fragment, null,
|
|
38
38
|
handlePriceCheckFunc(0, currency),
|
|
39
|
-
React.createElement("span", { className: 'gift-name-text' }, data?.appliedPromotion?.name
|
|
39
|
+
React.createElement("span", { className: 'gift-name-text' }, data?.appliedPromotion?.name))) : (handlePriceCheckFunc(data.price, currency))))),
|
|
40
40
|
React.createElement("div", { className: `col-item tl-col-4 col-item-4 nowrap price-block` },
|
|
41
41
|
React.createElement("div", { className: `col-item-inner-wrap` },
|
|
42
|
-
React.createElement("div", { className: `flex-end-wrap` },
|
|
42
|
+
React.createElement("div", { className: `flex-end-wrap` }, data.sale_total && !data.is_gift ? (React.createElement("div", null,
|
|
43
43
|
React.createElement(Text, { className: `account-p account-p3 account-font-bold account-secondary-color2 align-right order-sale-price`, text: handlePriceCheckFunc(data.sale_total, currency) }),
|
|
44
44
|
React.createElement("div", { className: 'wrapper-discount' },
|
|
45
|
-
data.
|
|
46
|
-
data.product.discount,
|
|
47
|
-
data.product?.discount_type === 'percentage' ? '%' : ` ${currency}`,
|
|
48
|
-
"\u00A0",
|
|
49
|
-
React.createElement("span", { className: 'lowercase' }, translate('account.order_balance.discount')))) : null,
|
|
50
|
-
React.createElement(Text, { className: `account-p account-p3 account-font-regular account-primary-color2 line-through value align-right order-price1`, text: handlePriceCheckFunc(data.total, currency) })))) : (React.createElement(Text, { className: `account-p account-p3 account-font-bold account-primary-color1 align-right order-sale-price` }, data.is_gift ? (React.createElement(React.Fragment, null,
|
|
51
|
-
handlePriceCheckFunc(0, currency),
|
|
52
|
-
React.createElement("span", { className: 'gift-name-text' }, data?.appliedPromotion?.name || 'Karlen'))) : (handlePriceCheckFunc(data.total, currency))))))))));
|
|
45
|
+
React.createElement(Text, { className: `account-p account-p3 account-font-regular account-primary-color2 line-through value align-right order-price1`, text: handlePriceCheckFunc(data.total, currency) })))) : (React.createElement(Text, { className: `account-p account-p3 account-font-bold account-primary-color1 align-right order-sale-price` }, handlePriceCheckFunc(data.total, currency)))))))));
|
|
53
46
|
});
|
|
54
47
|
export default Item;
|
|
@@ -31,27 +31,22 @@ const ItemMobile = memo(({ data }) => {
|
|
|
31
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,
|
|
35
35
|
React.createElement(Text, { className: `account-p account-p3 account-font-medium account-secondary-color2 sale-price`, text: handlePriceCheckFunc(data.sale_price, currency) }),
|
|
36
36
|
React.createElement("div", { className: 'wrapper-discount' },
|
|
37
|
-
data.
|
|
38
|
-
data.
|
|
39
|
-
data.
|
|
37
|
+
data.appliedPromotion ? (React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color2 discount-text-mobile` },
|
|
38
|
+
data.appliedPromotion.value,
|
|
39
|
+
data.appliedPromotion.type === 'percentage' ? '%' : ` ${currency}`,
|
|
40
40
|
"\u00A0",
|
|
41
41
|
React.createElement("span", { className: 'lowercase' }, translate('account.order_balance.discount')))) : null,
|
|
42
42
|
React.createElement(Text, { className: `account-p account-p3 account-font-regular account-primary-color2 line-through price1`, text: handlePriceCheckFunc(data.price, currency) })))) : (React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color1 price2` }, data.is_gift ? (React.createElement(React.Fragment, null,
|
|
43
43
|
handlePriceCheckFunc(0, currency),
|
|
44
|
-
React.createElement("span", { className: 'gift-name-text' }, data?.appliedPromotion?.name
|
|
44
|
+
React.createElement("span", { className: 'gift-name-text' }, data?.appliedPromotion?.name))) : (handlePriceCheckFunc(data.price, currency))))),
|
|
45
45
|
React.createElement("div", { className: `mobile-total-price-wrap nowrap` },
|
|
46
46
|
React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color1`, text: `account.order_balance.total` }),
|
|
47
|
-
|
|
47
|
+
data.sale_total && !data.is_gift ? (React.createElement(React.Fragment, null,
|
|
48
48
|
React.createElement(Text, { className: `account-p account-p3 account-font-medium account-secondary-color2 sale-total`, text: handlePriceCheckFunc(data.sale_total, currency) }),
|
|
49
49
|
React.createElement("div", { className: 'wrapper-discount' },
|
|
50
|
-
data.product?.discount ? (React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color2 discount-text-mobile` },
|
|
51
|
-
data.product.discount,
|
|
52
|
-
data.product?.discount_type === 'percentage' ? '%' : ` ${currency}`,
|
|
53
|
-
"\u00A0",
|
|
54
|
-
React.createElement("span", { className: 'lowercase' }, translate('account.order_balance.discount')))) : null,
|
|
55
50
|
React.createElement(Text, { className: `account-p account-p3 account-font-regular account-primary-color2 line-through total1`, text: handlePriceCheckFunc(data.total, currency) })))) : (React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color1 total2`, text: handlePriceCheckFunc(data.is_gift ? 0 : data.total, currency) }, data.is_gift ? (React.createElement(React.Fragment, null,
|
|
56
51
|
handlePriceCheckFunc(0, currency),
|
|
57
52
|
React.createElement("span", { className: 'gift-name-text' }, data?.appliedPromotion?.name || 'Karlen'))) : (handlePriceCheckFunc(data.total, currency)))))))));
|
package/package.json
CHANGED
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@weareconceptstudio/account",
|
|
3
|
-
"version": "0.6.
|
|
3
|
+
"version": "0.6.3",
|
|
4
4
|
"description": "Concept Studio Account",
|
|
5
5
|
"author": "Concept Studio",
|
|
6
6
|
"license": "ISC",
|
|
7
7
|
"main": "dist/index.js",
|
|
8
|
+
"sideEffects": false,
|
|
8
9
|
"files": [
|
|
9
10
|
"dist"
|
|
10
11
|
],
|