@weareconceptstudio/account 0.5.6 → 0.5.7

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.
Files changed (12) hide show
  1. package/dist/components/AccountCounter/index.js +1 -1
  2. package/dist/components/Pagination/index.js +15 -4
  3. package/dist/components/TotalCheckout/BalanceComp/index.js +4 -3
  4. package/dist/components/TotalCheckout/index.js +4 -4
  5. package/dist/modules/cart/CartItems/Item/index.js +6 -4
  6. package/dist/modules/cart/CartItems/ItemMobile/index.js +2 -2
  7. package/dist/modules/cart/CartItems/index.js +11 -1
  8. package/dist/modules/cart/CartItems/style.js +1 -0
  9. package/dist/modules/checkout/CheckoutProvider.js +26 -7
  10. package/dist/modules/order/OrderStatus/index.js +1 -1
  11. package/dist/translations/en.js +5 -5
  12. package/package.json +1 -1
package/dist/components/AccountCounter/index.js CHANGED
@@ -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 ? (newCount == 0 ? setCheckGift() : null) : debouncedUpdateCartServer(newCount);
27
+ isGift ? setCheckGift({ productId, qty: newCount }) : 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' },
package/dist/components/Pagination/index.js CHANGED
@@ -1,4 +1,4 @@
1
- import React, { memo, useEffect, useMemo, useRef } from 'react';
1
+ import React, { memo, useCallback, useMemo, useRef } from 'react';
2
2
  //* Icons
3
3
  const left_arrow = (React.createElement("svg", { xmlns: 'http://www.w3.org/2000/svg', version: '1.1', viewBox: '0 0 32 32' },
4
4
  React.createElement("path", { d: 'M24.015 31.254c0.261 0.001 0.519-0.057 0.756-0.167s0.446-0.272 0.613-0.473c0.15-0.18 0.262-0.387 0.332-0.61s0.094-0.458 0.073-0.691c-0.021-0.233-0.089-0.459-0.198-0.666s-0.258-0.39-0.438-0.539l-14.382-11.876 14.222-12.284c0.185-0.15 0.337-0.336 0.448-0.547s0.179-0.441 0.2-0.678c0.021-0.237-0.007-0.476-0.080-0.703s-0.192-0.436-0.348-0.616c-0.156-0.18-0.346-0.327-0.56-0.431s-0.446-0.166-0.684-0.179-0.476 0.022-0.7 0.102c-0.224 0.081-0.43 0.205-0.605 0.367l-15.84 13.653c-0.197 0.169-0.355 0.379-0.463 0.615s-0.162 0.494-0.159 0.753c0.004 0.26 0.065 0.515 0.179 0.748s0.277 0.439 0.479 0.603l16 13.209c0.32 0.278 0.733 0.424 1.156 0.409z' })));
@@ -10,7 +10,18 @@ import { getParamsByKey } from '@weareconceptstudio/core';
10
10
  const Pagination = memo(({ total, pageSize, onChange, activePageState, left_icon = false, right_icon = false, parentElement }) => {
11
11
  //! Ref
12
12
  const paginationRef = useRef();
13
- useEffect(() => {
13
+ //! Click page
14
+ const clickPagination = useCallback(({ paramClick }) => {
15
+ switch (paramClick) {
16
+ case 'left':
17
+ activePage > 1 && onChange(activePage - 1 >= 1 ? activePage - 1 : activePage);
18
+ break;
19
+ case 'right':
20
+ activePage < maxPage && onChange(activePage + 1);
21
+ break;
22
+ default:
23
+ break;
24
+ }
14
25
  if ((parentElement || paginationRef.current) && activePageState) {
15
26
  const parentElements = parentElement || paginationRef.current.parentElement;
16
27
  const getHeader = document.querySelector('header');
@@ -26,8 +37,8 @@ const Pagination = memo(({ total, pageSize, onChange, activePageState, left_icon
26
37
  const maxPage = useMemo(() => Math.ceil(total / pageSize), [total, pageSize]);
27
38
  const activePage = useMemo(() => Number(getParamsByKey(new URLSearchParams(window.location.search), 'page')) || activePageState || 1, [window.location.search, activePageState]);
28
39
  return (total > pageSize && (React.createElement(PaginationStyle, { ref: paginationRef, className: `pg-container account-primary-color1` },
29
- React.createElement("div", { className: `pg-icon ${activePage === 1 ? 'disabled-icon' : ''}`, onClick: () => activePage > 1 && onChange(activePage - 1 >= 1 ? activePage - 1 : activePage) }, left_icon || left_arrow),
40
+ React.createElement("div", { className: `pg-icon ${activePage === 1 ? 'disabled-icon' : ''}`, onClick: () => clickPagination({ paramClick: 'left' }) }, left_icon || left_arrow),
30
41
  React.createElement("span", { className: `pg-numbers account-p account-p4 account-font-bold` }, `${activePage} / ${maxPage}`),
31
- React.createElement("div", { onClick: () => activePage < maxPage && onChange(activePage + 1), className: `pg-icon ${activePage === maxPage ? 'disabled-icon' : ''}` }, right_icon || right_arrow))));
42
+ React.createElement("div", { onClick: () => clickPagination({ paramClick: 'right' }), className: `pg-icon ${activePage === maxPage ? 'disabled-icon' : ''}` }, right_icon || right_arrow))));
32
43
  });
33
44
  export default Pagination;
package/dist/components/TotalCheckout/BalanceComp/index.js CHANGED
@@ -13,6 +13,7 @@ const BalanceComp = () => {
13
13
  const { currency, itemsCount, useBalance } = useCart();
14
14
  const { fillCart } = useCheckoutContext();
15
15
  const { user } = useUser();
16
+ const balance = user?.balance || 0;
16
17
  const handleBalance = (amount) => {
17
18
  fillCart('useBalance', amount);
18
19
  };
@@ -21,17 +22,17 @@ const BalanceComp = () => {
21
22
  return;
22
23
  handleBalance(values.balance);
23
24
  };
24
- return (React.createElement(BalanceCompStyle, { className: `collapse-distance ${itemsCount && user.balance ? '' : 'disable'}` },
25
+ return (React.createElement(BalanceCompStyle, { className: `collapse-distance ${itemsCount && balance ? '' : 'disable'}` },
25
26
  React.createElement(CollapseItem, { title: React.createElement(React.Fragment, null,
26
27
  React.createElement("div", { className: 'inner-wrapper-icon' },
27
28
  React.createElement("svg", { width: '12', height: '12', fill: 'none', viewBox: '0 0 12 12', xmlns: 'http://www.w3.org/2000/svg' },
28
29
  React.createElement("path", { d: 'M0 6H12', stroke: 'black', strokeWidth: '2' }),
29
30
  React.createElement("path", { d: 'M6 12L6 0', stroke: 'black', strokeWidth: '2' }))),
30
- React.createElement(Text, { className: 'account-p account-p4 account-primary-color1 account-font-medium balance-text' }, `${translate('account.balance_promotions.useYourMoney')} (${handlePriceCheckFunc(user.balance, currency)} ${translate('account.balance_promotions.balance')})`)), description: React.createElement(React.Fragment, null, useBalance ? (React.createElement("div", { className: `balance-success-block` },
31
+ React.createElement(Text, { className: 'account-p account-p4 account-primary-color1 account-font-medium balance-text' }, `${translate('account.balance_promotions.useYourMoney')} (${handlePriceCheckFunc(balance, currency)} ${translate('account.balance_promotions.balance')})`)), description: React.createElement(React.Fragment, null, useBalance ? (React.createElement("div", { className: `balance-success-block` },
31
32
  React.createElement(Text, { className: 'account-p account-p4 account-primary-color2 account-font-medium balance-success-text' }, handlePriceCheckFunc(useBalance, currency)),
32
33
  React.createElement(Text, { text: 'account.general_actions.remove', className: 'account-p account-p4 account-primary-color2 account-font-medium balance-remove-text', onClick: () => handleBalance(null) }))) : (React.createElement(FormBuilder, { onSubmit: onFinish, fields: balanceFields, className: `balance-block`, formOptions: {
33
34
  className: 'balance-container',
34
35
  } },
35
- React.createElement(AccountButton, { type: 'submit', disabled: !user.balance, btnType: `balance-version`, text: `account.general_actions.add` })))) })));
36
+ React.createElement(AccountButton, { type: 'submit', disabled: !balance, btnType: `balance-version`, text: `account.general_actions.add` })))) })));
36
37
  };
37
38
  export default BalanceComp;
package/dist/components/TotalCheckout/index.js CHANGED
@@ -30,10 +30,10 @@ const TotalCheckout = memo(({ isShipping, children, confirmation, buttonProps, l
30
30
  React.createElement("div", { className: `od-item-wrap` },
31
31
  React.createElement(Text, { className: `account-p account-p2 account-font-regular account-primary-color1 sticky-wrap-subtotal`, text: `account.cart_checkout.subtotal` }),
32
32
  React.createElement(Text, { className: `account-p account-p2 account-font-regular account-primary-color1 sticky-wrap-currency`, text: itemsCount ? handlePriceCheckFunc(subtotal, currency) : `0 ${currency}` })),
33
- user && discount ? (React.createElement("div", { className: `od-item-wrap` },
33
+ discount ? (React.createElement("div", { className: `od-item-wrap` },
34
34
  React.createElement(Text, { className: `account-p account-p2 account-font-regular account-primary-color1`, text: `account.order_balance.discount` }),
35
35
  React.createElement(Text, { className: `account-p account-p2 account-font-regular account-primary-color1 balance-text-block`, text: `-${handlePriceCheckFunc(discount, currency)}` }))) : null,
36
- user && useBalance ? (React.createElement("div", { className: `od-item-wrap` },
36
+ useBalance ? (React.createElement("div", { className: `od-item-wrap` },
37
37
  React.createElement(Text, { className: `account-p account-p2 account-font-regular account-primary-color1`, text: `account.balance_promotions.muramoney` }),
38
38
  React.createElement(Text, { className: `account-p account-p2 account-font-regular account-primary-color1 balance-text-block`, text: `-${handlePriceCheckFunc(useBalance, currency)}` }))) : null,
39
39
  React.createElement("div", { className: `od-item-wrap` },
@@ -44,9 +44,9 @@ const TotalCheckout = memo(({ isShipping, children, confirmation, buttonProps, l
44
44
  React.createElement(Text, { className: `account-p account-p2 account-font-bold account-primary-color1 sticky-wrap-currency2`, text: itemsCount ? handlePriceCheckFunc(total, currency) : `0 ${currency}` })),
45
45
  React.createElement(GiftComp, null),
46
46
  React.createElement(FreeShippingComp, null),
47
- user ? (React.createElement(CollapseContainer, { className: 'collapse-container-wrapper' },
47
+ React.createElement(CollapseContainer, { className: 'collapse-container-wrapper' },
48
48
  React.createElement(PromoCodeComp, null),
49
- React.createElement(BalanceComp, null))) : null,
49
+ React.createElement(BalanceComp, null)),
50
50
  React.createElement(CommentComp, { isShipping: isShipping }))),
51
51
  React.createElement(AccountButton, { url: buttonProps.url, btnType: `full-width`, text: buttonProps.text, type: buttonProps.type, disabled: checkoutBtnDisabled, loading: buttonProps.loadingButton, className: `sticky-wrap-btn text-center`, onClick: () => buttonProps.handleClick && buttonProps.handleClick() })))) : (React.createElement(SkeletonTotalCheckout, null))))));
52
52
  });
package/dist/modules/cart/CartItems/Item/index.js CHANGED
@@ -1,4 +1,4 @@
1
- import React, { memo } from 'react';
1
+ import React, { memo, useCallback, useEffect } from 'react';
2
2
  import { handlePriceCheckFunc, Image, Text, useTranslation } from '@weareconceptstudio/core';
3
3
  import { AccountButton, AccountCounter } from '../../../../components';
4
4
  import { useAccountContext } from '../../../../AccountProvider';
@@ -27,9 +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 ? (React.createElement(AccountCounter, { maxQty: 1, productId: -1, isGift: data.is_gift })) : (React.createElement(AccountButton, { className: `button-gift`, text: 'account.general_actions.restore', onClick: () => {
31
- setCheckGift();
32
- } })))) : (React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color1`, text: data.qty }))),
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[data.product.id * -1] !== 0 ? (React.createElement(React.Fragment, null,
31
+ React.createElement(AccountCounter, { maxQty: data.qty, productId: data.product.id * -1, isGift: data.is_gift, qty: checkoutData.checkGift[data.product.id * -1] || data.qty }))) : (React.createElement(React.Fragment, null,
32
+ React.createElement(AccountButton, { className: `button-gift`, text: 'account.general_actions.restore', onClick: () => {
33
+ setCheckGift({ productId: data.product.id * -1, qty: data.qty });
34
+ } }))))) : (React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color1`, text: data.qty }))),
33
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,
34
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) }),
35
37
  React.createElement("div", { className: 'wrapper-discount' },
package/dist/modules/cart/CartItems/ItemMobile/index.js CHANGED
@@ -32,8 +32,8 @@ const ItemMobile = memo(({ data, select }) => {
32
32
  React.createElement("div", { className: 'wrapper-discount' },
33
33
  data.discount ? React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color2 discount-text` }, translate('account.order_balance.discountWithSymbol', { discount: data.discount })) : null,
34
34
  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`, text: handlePriceCheckFunc(data.is_gift ? 0 : data.total, currency) })),
35
- select ? (React.createElement("div", { className: `inner-container` }, !data.product.out_of_stock && !data.is_gift ? (React.createElement(AccountCounter, { productId: data.product.id })) : data.is_gift ? (React.createElement("div", { className: 'wrapper-gift-button' }, checkoutData.checkGift ? (React.createElement(AccountCounter, { maxQty: 1, productId: -1, isGift: data.is_gift })) : (React.createElement(AccountButton, { className: `capitalize button-gift`, text: 'account.general_actions.restore', onClick: () => {
36
- setCheckGift();
35
+ select ? (React.createElement("div", { className: `inner-container` }, !data.product.out_of_stock && !data.is_gift ? (React.createElement(AccountCounter, { productId: data.product.id })) : data.is_gift ? (React.createElement("div", { className: 'wrapper-gift-button' }, checkoutData.checkGift[data.product.id * -1] !== 0 ? (React.createElement(AccountCounter, { maxQty: data.qty, productId: data.product.id * -1, isGift: data.is_gift, qty: checkoutData.checkGift[data.product.id * -1] || data.qty })) : (React.createElement(AccountButton, { className: `capitalize button-gift`, text: 'account.general_actions.restore', onClick: () => {
36
+ setCheckGift({ productId: data.product.id * -1, qty: data.qty });
37
37
  } })))) : (React.createElement("div", { className: `in-block` },
38
38
  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` },
39
39
  React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color1 mobile-quantity-with-symbol2` },
package/dist/modules/cart/CartItems/index.js CHANGED
@@ -1,4 +1,4 @@
1
- import React, { memo, useMemo } from 'react';
1
+ import React, { memo, useEffect, useMemo } from 'react';
2
2
  import { Text, useUi } from '@weareconceptstudio/core';
3
3
  //* Components
4
4
  import Item from './Item';
@@ -8,6 +8,16 @@ import { AccountButton } from '../../../components';
8
8
  import CartItemsStyle from './style';
9
9
  const CartItems = memo(({ data, className, title, smallFontSize, additionalParameters, actions }) => {
10
10
  const { winWidth } = useUi();
11
+ data = data?.reduce((acc, item) => {
12
+ const existingItem = acc.find((i) => item.is_gift && i.product.id === item.product.id);
13
+ if (existingItem) {
14
+ existingItem.qty += item.qty;
15
+ }
16
+ else {
17
+ acc.push({ ...item });
18
+ }
19
+ return acc;
20
+ }, []);
11
21
  //! Store
12
22
  const itemsStore = useMemo(() => {
13
23
  return winWidth >= 768 ? (React.createElement("div", { className: `cart-items-table-wrap` },
package/dist/modules/cart/CartItems/style.js CHANGED
@@ -352,6 +352,7 @@ const CartItemsStyle = styled.section `
352
352
  justify-content: space-between;
353
353
  align-items: center;
354
354
  margin-bottom: var(--account_titleEditWrapperMBot);
355
+ gap: var(--sp3x);
355
356
  }
356
357
  }
357
358
 
package/dist/modules/checkout/CheckoutProvider.js CHANGED
@@ -17,16 +17,26 @@ export const CheckoutProvider = ({ children }) => {
17
17
  useBalance: null,
18
18
  note: '',
19
19
  paymentType: user?.payment_method || 'cash_on_delivery',
20
- checkGift: true,
20
+ checkGift: {},
21
21
  });
22
22
  const [idramForm, setIdramForm] = useState();
23
23
  //! Has gift from data
24
- const hasGift = useMemo(() => {
25
- return items.some((item) => item.is_gift);
24
+ useMemo(() => {
25
+ items.length &&
26
+ setCheckoutData((prev) => {
27
+ const checkGift = {};
28
+ items?.forEach((item) => {
29
+ if (item.is_gift) {
30
+ const productId = item.product.id * -1;
31
+ checkGift[productId] = (checkGift[productId] || 0) + item.qty;
32
+ }
33
+ });
34
+ return { ...prev, checkGift };
35
+ });
26
36
  }, [items]);
27
37
  //! Set gift Select
28
- const setCheckGift = useCallback((props) => {
29
- setCheckoutData((prev) => ({ ...prev, checkGift: props || !prev.checkGift }));
38
+ const setCheckGift = useCallback(({ productId, qty } = {}) => {
39
+ setCheckoutData((prev) => ({ ...prev, checkGift: { ...prev.checkGift, [productId]: qty } }));
30
40
  }, []);
31
41
  const isCheckoutPage = useMemo(() => {
32
42
  return window.location.href.includes('checkout');
@@ -60,8 +70,17 @@ export const CheckoutProvider = ({ children }) => {
60
70
  }, [checkoutData]);
61
71
  const handleCheckout = async () => {
62
72
  let data = { ...checkoutData };
63
- if (!(checkoutData.checkGift && hasGift)) {
64
- delete data.checkGift;
73
+ //! Check gift
74
+ if (data.checkGift) {
75
+ data.checkGift = Object.entries(data.checkGift)
76
+ .filter(([key, value]) => value)
77
+ .map(([key, value]) => ({
78
+ id: key,
79
+ qty: value,
80
+ }));
81
+ if (!data.checkGift.length) {
82
+ delete data.checkGift;
83
+ }
65
84
  }
66
85
  if (isNumeric(checkoutData.paymentType)) {
67
86
  data.paymentType = 'credit_card';
package/dist/modules/order/OrderStatus/index.js CHANGED
@@ -3,6 +3,6 @@ import { Text } from '@weareconceptstudio/core';
3
3
  import OrderStatusStyle from './style';
4
4
  const OrderStatus = ({ status, className = '' }) => {
5
5
  return (React.createElement(OrderStatusStyle, null,
6
- React.createElement(Text, { className: `account-p account-p4 account-font-bold status-item ${status} ${className}`, text: `account.order_management.${status}` })));
6
+ React.createElement(Text, { className: `account-p account-p4 account-font-bold status-item text-center ${status} ${className}`, text: `account.order_management.${status}` })));
7
7
  };
8
8
  export default OrderStatus;
package/dist/translations/en.js CHANGED
@@ -141,7 +141,7 @@ export default {
141
141
  shopNow: 'Shop now',
142
142
  add: 'Add',
143
143
  backToShop: 'Back to shop',
144
- backToLoginPAge: 'Back to log in page',
144
+ backToLoginPAge: 'Back to login page',
145
145
  continueShopping: 'Continue shopping',
146
146
  color: 'Color',
147
147
  size: 'Size',
@@ -185,10 +185,10 @@ export default {
185
185
  floorPlaceholder: 'Floor',
186
186
  apartment: 'Apartment',
187
187
  apartmentPlaceholder: 'Apartment',
188
- doorBell: 'Doorbell',
189
- doorBellPlaceholder: 'Doorbell',
190
- noteForCourier: 'Note for courier',
191
- noteForCourierPlaceholder: 'Note for courier',
188
+ doorBell: 'Door number',
189
+ doorBellPlaceholder: 'Door number',
190
+ noteForCourier: 'Note for delivery',
191
+ noteForCourierPlaceholder: 'Note for delivery',
192
192
  },
193
193
  order_balance: {
194
194
  emptyTitle: 'Your orders will appear here.',
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@weareconceptstudio/account",
3
- "version": "0.5.6",
3
+ "version": "0.5.7",
4
4
  "description": "Concept Studio Account",
5
5
  "author": "Concept Studio",
6
6
  "license": "ISC",