@weareconceptstudio/account 0.5.5 → 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 (25) hide show
  1. package/dist/components/AccountCounter/index.js +1 -1
  2. package/dist/components/Loader/index.js +1 -0
  3. package/dist/components/Pagination/index.js +31 -5
  4. package/dist/components/TotalCheckout/BalanceComp/index.js +4 -3
  5. package/dist/components/TotalCheckout/FreeShippingComp/index.js +16 -3
  6. package/dist/components/TotalCheckout/FreeShippingComp/style.js +1 -1
  7. package/dist/components/TotalCheckout/GiftComp/index.js +19 -5
  8. package/dist/components/TotalCheckout/GiftComp/style.js +1 -1
  9. package/dist/components/TotalCheckout/index.js +9 -9
  10. package/dist/components/TotalCheckout/style.js +47 -3
  11. package/dist/modules/account/AccountBalanceTemplate/HistoryBalance/index.js +5 -3
  12. package/dist/modules/cart/CartItems/Item/index.js +6 -4
  13. package/dist/modules/cart/CartItems/ItemMobile/index.js +2 -2
  14. package/dist/modules/cart/CartItems/index.js +12 -2
  15. package/dist/modules/cart/CartItems/style.js +1 -0
  16. package/dist/modules/cart/CartTemplate/index.js +12 -5
  17. package/dist/modules/checkout/CheckoutProvider.js +26 -7
  18. package/dist/modules/checkout/CheckoutTemplate/index.js +21 -13
  19. package/dist/modules/order/OrderDetails/index.js +23 -10
  20. package/dist/modules/order/OrderDetails/style.js +8 -0
  21. package/dist/modules/order/OrderStatus/index.js +1 -1
  22. package/dist/modules/order/OrdersList/index.js +5 -3
  23. package/dist/styles/helperClass.js +32 -0
  24. package/dist/translations/en.js +6 -6
  25. 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/Loader/index.js CHANGED
@@ -19,6 +19,7 @@ const Loader = ({ className, pathname }) => {
19
19
  setLoaderState('initial');
20
20
  }, 2200);
21
21
  return () => {
22
+ setLoaderState(false);
22
23
  clearTimeout(intervalStart.current);
23
24
  clearTimeout(intervalEnd.current);
24
25
  clearTimeout(intervalRerender.current);
package/dist/components/Pagination/index.js CHANGED
@@ -1,4 +1,4 @@
1
- import React, { memo, useMemo } 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' })));
@@ -7,12 +7,38 @@ const right_arrow = (React.createElement("svg", { xmlns: 'http://www.w3.org/2000
7
7
  //* Style
8
8
  import PaginationStyle from './style';
9
9
  import { getParamsByKey } from '@weareconceptstudio/core';
10
- const Pagination = memo(({ total, pageSize, onChange, activePageState, left_icon = false, right_icon = false }) => {
10
+ const Pagination = memo(({ total, pageSize, onChange, activePageState, left_icon = false, right_icon = false, parentElement }) => {
11
+ //! Ref
12
+ const paginationRef = useRef();
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
+ }
25
+ if ((parentElement || paginationRef.current) && activePageState) {
26
+ const parentElements = parentElement || paginationRef.current.parentElement;
27
+ const getHeader = document.querySelector('header');
28
+ const distance = parentElements.getBoundingClientRect().top;
29
+ const sizeScroll = (Math.floor(Math.abs(distance)) == 0 ? 0 : Math.floor(distance)) + window.scrollY - (getHeader ? getHeader.clientHeight : 0);
30
+ if (sizeScroll) {
31
+ requestAnimationFrame(() => {
32
+ window.scrollTo({ top: sizeScroll, behavior: 'smooth' });
33
+ });
34
+ }
35
+ }
36
+ }, [activePageState, parentElement]);
11
37
  const maxPage = useMemo(() => Math.ceil(total / pageSize), [total, pageSize]);
12
38
  const activePage = useMemo(() => Number(getParamsByKey(new URLSearchParams(window.location.search), 'page')) || activePageState || 1, [window.location.search, activePageState]);
13
- return (total > pageSize && (React.createElement(PaginationStyle, { className: `pg-container account-primary-color1` },
14
- React.createElement("div", { className: `pg-icon ${activePage === 1 ? 'disabled-icon' : ''}`, onClick: () => activePage > 1 && onChange(activePage - 1 >= 1 ? activePage - 1 : activePage) }, left_icon || left_arrow),
39
+ return (total > pageSize && (React.createElement(PaginationStyle, { ref: paginationRef, className: `pg-container account-primary-color1` },
40
+ React.createElement("div", { className: `pg-icon ${activePage === 1 ? 'disabled-icon' : ''}`, onClick: () => clickPagination({ paramClick: 'left' }) }, left_icon || left_arrow),
15
41
  React.createElement("span", { className: `pg-numbers account-p account-p4 account-font-bold` }, `${activePage} / ${maxPage}`),
16
- 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))));
17
43
  });
18
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/FreeShippingComp/index.js CHANGED
@@ -1,4 +1,4 @@
1
- import React from 'react';
1
+ import React, { useEffect, useState } from 'react';
2
2
  import { handlePriceCheckFunc, useTranslation } from '@weareconceptstudio/core';
3
3
  import { useAccountContext } from '../../../AccountProvider';
4
4
  import { useCheckoutContext } from '../../../modules';
@@ -8,11 +8,24 @@ const FreeShippingComp = () => {
8
8
  const { translate } = useTranslation();
9
9
  const { useCart } = useAccountContext();
10
10
  const { isCheckoutPage } = useCheckoutContext();
11
- const { shippingCostValue, freeShippingRange, shippingCost, currency } = useCart();
11
+ const { shippingCostValue, freeShippingRange, shippingCost, items, currency } = useCart();
12
+ const [freeShow, setFreeShow] = useState(items?.length);
13
+ useEffect(() => {
14
+ let timeoutID;
15
+ if (typeof shippingCost != 'number' && typeof freeShippingRange != 'number') {
16
+ timeoutID = setTimeout(() => {
17
+ setFreeShow(false);
18
+ }, 3000);
19
+ }
20
+ else {
21
+ clearTimeout(timeoutID);
22
+ setFreeShow(true);
23
+ }
24
+ }, [shippingCost, freeShippingRange]);
12
25
  return !isCheckoutPage ? (freeShippingRange ? (React.createElement(FreeShippingCompStyle, null,
13
26
  React.createElement("svg", { fill: 'none', viewBox: '0 0 24 24', xmlns: 'http://www.w3.org/2000/svg', className: 'free-shipping-comp-icon' },
14
27
  React.createElement("path", { d: 'M21.675 14.475V9.9L17.925 6.15H15.375V4.125H2.85C2.325 4.725 2.025 5.025 1.5 5.55V16.65H3.3C3.3 18.375 4.725 19.8 6.45 19.8C8.175 19.8 9.6 18.375 9.6 16.65H13.35C13.35 18.375 14.775 19.8 16.5 19.8C18.225 19.8 19.65 18.375 19.65 16.65H22.35V14.475H21.675ZM6.45 18.6C5.475 18.6 4.65 17.775 4.65 16.8C4.65 15.825 5.475 15 6.45 15C7.425 15 8.25 15.825 8.25 16.8C8.25 17.775 7.5 18.6 6.45 18.6ZM16.575 18.6C15.6 18.6 14.775 17.775 14.775 16.8C14.775 15.825 15.6 15 16.575 15C17.55 15 18.375 15.825 18.375 16.8C18.375 17.775 17.625 18.6 16.575 18.6ZM19.575 11.1H15.375V7.95H17.025L19.575 10.5V11.1Z' })),
15
- React.createElement("span", { className: 'free-shipping-comp-attr' }, translate('account.notifications_messages.freeShippingNote', { price: React.createElement("span", { className: 'range-value' }, handlePriceCheckFunc(freeShippingRange, currency)) })))) : typeof shippingCost != 'number' ? (React.createElement(FreeShippingCompStyle, null,
28
+ React.createElement("span", { className: 'free-shipping-comp-attr' }, translate('account.notifications_messages.freeShippingNote', { price: React.createElement("span", { className: 'range-value' }, handlePriceCheckFunc(freeShippingRange, currency)) })))) : typeof shippingCost != 'number' && freeShow ? (React.createElement(FreeShippingCompStyle, null,
16
29
  React.createElement("svg", { fill: 'none', viewBox: '0 0 16 16', xmlns: 'http://www.w3.org/2000/svg', className: 'free-shipping-comp-icon' },
17
30
  React.createElement("path", { d: 'M13.901 5.06321C13.835 5.1324 13.754 5.167 13.658 5.167C13.562 5.167 13.481 5.1324 13.415 5.06321L13.388 5.03491C13.2081 4.84621 12.9981 4.74871 12.7611 4.74242C12.5241 4.73613 12.3111 4.83363 12.1191 5.03491L8.90036 8.40947C8.83437 8.47866 8.75337 8.51326 8.65738 8.51326C8.56139 8.51326 8.48039 8.47866 8.4144 8.40947C8.3484 8.34028 8.3154 8.25537 8.3154 8.15473C8.3154 8.05409 8.3484 7.96917 8.4144 7.89998L11.5912 4.56945C11.8941 4.25181 12.2811 4.08827 12.7461 4.08512C13.2111 4.07883 13.595 4.23608 13.901 4.55687C13.967 4.62606 14 4.71097 14 4.81161C14 4.91225 13.967 4.99717 13.901 5.06636V5.06321ZM6.17655 3.19509C6.24255 3.1259 6.32354 3.09131 6.41954 3.09131C6.51553 3.09131 6.59652 3.1259 6.66252 3.19509L6.79151 3.33033C7.12449 3.67942 7.28648 4.11343 7.28348 4.63864C7.27748 5.16071 7.10949 5.59786 6.77651 5.94695L6.63552 6.09477C6.56953 6.16396 6.48853 6.19855 6.39254 6.19855C6.29655 6.19855 6.21555 6.16396 6.14956 6.09477C6.08356 6.02558 6.05056 5.94066 6.05056 5.84002C6.05056 5.73938 6.08356 5.65447 6.14956 5.58528L6.33554 5.39029C6.55453 5.16071 6.65652 4.89967 6.64152 4.60719C6.62652 4.31471 6.52453 4.06625 6.33554 3.86812L6.17955 3.70458C6.11356 3.63539 6.08056 3.55048 6.08056 3.44984C6.08056 3.3492 6.11356 3.26428 6.17955 3.19509H6.17655ZM8.58538 2.10378C8.65138 2.03459 8.73237 2 8.82837 2C8.92436 2 9.00535 2.03459 9.07135 2.10378L9.7253 2.78939C10.0193 3.10703 10.1723 3.50959 10.1813 3.99077C10.1903 4.4751 10.0433 4.87451 9.7403 5.19216L7.78744 7.23954C7.72145 7.30873 7.64045 7.34332 7.54446 7.34332C7.44846 7.34332 7.36747 7.30873 7.30147 7.23954C7.23548 7.17035 7.20248 7.08543 7.20248 6.9848C7.20248 6.88416 7.23548 6.79924 7.30147 6.73005L9.22434 4.71412C9.40433 4.52542 9.49132 4.28326 9.48832 3.99077C9.48232 3.69829 9.39233 3.45613 9.20934 3.26743L8.58238 2.61013C8.51639 2.54094 8.48339 2.45602 8.48339 2.35538C8.48339 2.25474 8.51639 2.16983 8.58238 2.10064L8.58538 2.10378ZM12.8601 9.64859C12.7941 9.71778 12.7131 9.75238 12.6171 9.75238C12.5211 9.75238 12.4401 9.71778 12.3741 9.64859L11.8761 9.12653C11.6572 8.89694 11.4292 8.78372 11.1922 8.78372C10.9552 8.78372 10.7272 8.89694 10.5082 9.12653L10.0373 9.62029C9.97129 9.68948 9.89029 9.72407 9.7943 9.72407C9.6983 9.72407 9.61731 9.68948 9.55131 9.62029C9.48532 9.5511 9.45232 9.46619 9.45232 9.36555C9.45232 9.26491 9.48532 9.17999 9.55131 9.1108L9.97728 8.66422C10.3103 8.31512 10.7092 8.13586 11.1742 8.12642C11.6392 8.11699 12.0381 8.28682 12.3711 8.63277L12.8541 9.13911C12.9201 9.2083 12.9531 9.29321 12.9531 9.39385C12.9531 9.49449 12.9201 9.5794 12.8541 9.64859H12.8601ZM2.36082 13.9855L9.01435 11.501C9.20034 11.4318 9.25434 11.1802 9.11335 11.0355L4.81765 6.6074C4.67666 6.46273 4.44268 6.51934 4.37668 6.71433L2.01585 13.6239C1.94085 13.8471 2.14484 14.0641 2.35783 13.9824L2.36082 13.9855Z' })),
18
31
  React.createElement("span", { className: 'free-shipping-comp-attr' }, translate('account.notifications_messages.freeShippingSuccessText', { price: React.createElement("span", { className: 'range-value' }, handlePriceCheckFunc(shippingCostValue, currency)) })))) : null) : null;
package/dist/components/TotalCheckout/FreeShippingComp/style.js CHANGED
@@ -9,7 +9,7 @@ const FreeShippingCompStyle = styled.div `
9
9
  display: flex;
10
10
  gap: var(--account_freeShippingAttrGap);
11
11
 
12
- margin: var(--account_freeShippingBlockDistance) 0;
12
+ margin: var(--account_commentMarginTop) 0;
13
13
  margin-bottom: 0;
14
14
  background-color: var(--account_surfaceColor);
15
15
  padding: var(--account_freeShippingBlockPadTB) var(--account_freeShippingBlockPadLR);
package/dist/components/TotalCheckout/GiftComp/index.js CHANGED
@@ -1,18 +1,32 @@
1
- import React from 'react';
2
- import { handlePriceCheckFunc, useTranslation } from '@weareconceptstudio/core';
1
+ import React, { useEffect, useState } from 'react';
2
+ import { useCheckoutContext } from '../../../modules';
3
3
  import { useAccountContext } from '../../../AccountProvider';
4
+ import { handlePriceCheckFunc, useTranslation } from '@weareconceptstudio/core';
4
5
  //* Style
5
6
  import GiftCompStyle from './style';
6
7
  const GiftComp = () => {
7
8
  const { translate } = useTranslation();
8
9
  const { useCart } = useAccountContext();
9
10
  const { hasFreeGift, giftThresholdRemaining, currency } = useCart();
10
- return giftThresholdRemaining && !hasFreeGift ? (React.createElement(GiftCompStyle, null,
11
+ const { isCheckoutPage } = useCheckoutContext();
12
+ const [show, setShow] = useState(true);
13
+ useEffect(() => {
14
+ if (hasFreeGift) {
15
+ const timer = setTimeout(() => {
16
+ setShow(false);
17
+ }, 5000);
18
+ return () => clearTimeout(timer);
19
+ }
20
+ else {
21
+ setShow(true);
22
+ }
23
+ }, [hasFreeGift]);
24
+ return !isCheckoutPage ? (giftThresholdRemaining && !hasFreeGift ? (React.createElement(GiftCompStyle, null,
11
25
  React.createElement("svg", { fill: 'none', viewBox: '0 0 24 23', className: 'gift-comp-icon', xmlns: 'http://www.w3.org/2000/svg' },
12
26
  React.createElement("path", { d: 'M20.25 5.75003H16.9613C16.9978 5.71909 17.0353 5.68909 17.0709 5.65628C17.3557 5.40332 17.5851 5.09433 17.745 4.74864C17.9049 4.40295 17.9917 4.02799 18 3.64721C18.0123 3.23066 17.9394 2.81598 17.7856 2.42864C17.6319 2.0413 17.4006 1.68947 17.106 1.39474C16.8113 1.10002 16.4596 0.86863 16.0723 0.714771C15.685 0.560913 15.2703 0.487836 14.8538 0.500027C14.4728 0.508232 14.0977 0.594982 13.7518 0.754846C13.406 0.91471 13.0968 1.14425 12.8438 1.42909C12.4936 1.83493 12.2089 2.29294 12 2.78659C11.7911 2.29294 11.5064 1.83493 11.1562 1.42909C10.9032 1.14425 10.594 0.91471 10.2482 0.754846C9.90232 0.594982 9.52718 0.508232 9.14625 0.500027C8.72969 0.487836 8.31503 0.560913 7.92774 0.714771C7.54044 0.86863 7.18868 1.10002 6.89405 1.39474C6.59941 1.68947 6.36812 2.0413 6.21438 2.42864C6.06064 2.81598 5.98768 3.23066 6 3.64721C6.00833 4.02799 6.09514 4.40295 6.255 4.74864C6.41486 5.09433 6.64434 5.40332 6.92906 5.65628C6.96469 5.68721 7.00219 5.71721 7.03875 5.75003H3.75C3.35218 5.75003 2.97064 5.90806 2.68934 6.18937C2.40804 6.47067 2.25 6.8522 2.25 7.25003V10.25C2.25 10.6479 2.40804 11.0294 2.68934 11.3107C2.97064 11.592 3.35218 11.75 3.75 11.75V17.75C3.75 18.1479 3.90804 18.5294 4.18934 18.8107C4.47064 19.092 4.85218 19.25 5.25 19.25H10.875C10.9745 19.25 11.0698 19.2105 11.1402 19.1402C11.2105 19.0699 11.25 18.9745 11.25 18.875V10.25H3.75V7.25003H11.25V10.25H12.75V7.25003H20.25V10.25H12.75V18.875C12.75 18.9745 12.7895 19.0699 12.8598 19.1402C12.9302 19.2105 13.0255 19.25 13.125 19.25H18.75C19.1478 19.25 19.5294 19.092 19.8107 18.8107C20.092 18.5294 20.25 18.1479 20.25 17.75V11.75C20.6478 11.75 21.0294 11.592 21.3107 11.3107C21.592 11.0294 21.75 10.6479 21.75 10.25V7.25003C21.75 6.8522 21.592 6.47067 21.3107 6.18937C21.0294 5.90806 20.6478 5.75003 20.25 5.75003ZM7.92281 4.53128C7.79168 4.41253 7.68651 4.26795 7.61391 4.10661C7.54131 3.94528 7.50285 3.77068 7.50094 3.59378C7.4962 3.3865 7.53287 3.18036 7.60881 2.98743C7.68476 2.79451 7.79844 2.61868 7.9432 2.47025C8.08796 2.32182 8.26089 2.20378 8.45186 2.12304C8.64282 2.04229 8.84798 2.00047 9.05531 2.00003H9.10125C9.27815 2.00194 9.45275 2.0404 9.61409 2.113C9.77542 2.1856 9.92 2.29077 10.0388 2.4219C10.8253 3.31065 11.1028 4.7844 11.2003 5.69565C10.2853 5.59909 8.8125 5.32159 7.92281 4.53128ZM16.0791 4.53128C15.1894 5.31878 13.7128 5.59628 12.7978 5.69378C12.9094 4.70846 13.2188 3.26565 13.9688 2.42284C14.0875 2.2917 14.2321 2.18653 14.3934 2.11393C14.5547 2.04133 14.7293 2.00287 14.9062 2.00096H14.9522C15.1595 2.00226 15.3645 2.04493 15.5552 2.12647C15.7458 2.20801 15.9183 2.32678 16.0624 2.47582C16.2066 2.62487 16.3195 2.80118 16.3947 2.99444C16.4698 3.18769 16.5056 3.394 16.5 3.60128C16.4969 3.77698 16.4578 3.95019 16.3851 4.11016C16.3124 4.27013 16.2076 4.41347 16.0772 4.53128H16.0791Z' })),
13
- React.createElement("span", { className: 'gift-comp-attr' }, translate('account.notifications_messages.giftNote', { price: React.createElement("span", { className: 'range-value' }, handlePriceCheckFunc(giftThresholdRemaining, currency)) })))) : hasFreeGift ? (React.createElement(GiftCompStyle, null,
27
+ React.createElement("span", { className: 'gift-comp-attr' }, translate('account.notifications_messages.giftNote', { price: React.createElement("span", { className: 'range-value' }, handlePriceCheckFunc(giftThresholdRemaining, currency)) })))) : hasFreeGift && show ? (React.createElement(GiftCompStyle, null,
14
28
  React.createElement("svg", { fill: 'none', viewBox: '0 0 16 16', className: 'gift-comp-icon', xmlns: 'http://www.w3.org/2000/svg' },
15
29
  React.createElement("path", { d: 'M13.901 5.06321C13.835 5.1324 13.754 5.167 13.658 5.167C13.562 5.167 13.481 5.1324 13.415 5.06321L13.388 5.03491C13.2081 4.84621 12.9981 4.74871 12.7611 4.74242C12.5241 4.73613 12.3111 4.83363 12.1191 5.03491L8.90036 8.40947C8.83437 8.47866 8.75337 8.51326 8.65738 8.51326C8.56139 8.51326 8.48039 8.47866 8.4144 8.40947C8.3484 8.34028 8.3154 8.25537 8.3154 8.15473C8.3154 8.05409 8.3484 7.96917 8.4144 7.89998L11.5912 4.56945C11.8941 4.25181 12.2811 4.08827 12.7461 4.08512C13.2111 4.07883 13.595 4.23608 13.901 4.55687C13.967 4.62606 14 4.71097 14 4.81161C14 4.91225 13.967 4.99717 13.901 5.06636V5.06321ZM6.17655 3.19509C6.24255 3.1259 6.32354 3.09131 6.41954 3.09131C6.51553 3.09131 6.59652 3.1259 6.66252 3.19509L6.79151 3.33033C7.12449 3.67942 7.28648 4.11343 7.28348 4.63864C7.27748 5.16071 7.10949 5.59786 6.77651 5.94695L6.63552 6.09477C6.56953 6.16396 6.48853 6.19855 6.39254 6.19855C6.29655 6.19855 6.21555 6.16396 6.14956 6.09477C6.08356 6.02558 6.05056 5.94066 6.05056 5.84002C6.05056 5.73938 6.08356 5.65447 6.14956 5.58528L6.33554 5.39029C6.55453 5.16071 6.65652 4.89967 6.64152 4.60719C6.62652 4.31471 6.52453 4.06625 6.33554 3.86812L6.17955 3.70458C6.11356 3.63539 6.08056 3.55048 6.08056 3.44984C6.08056 3.3492 6.11356 3.26428 6.17955 3.19509H6.17655ZM8.58538 2.10378C8.65138 2.03459 8.73237 2 8.82837 2C8.92436 2 9.00535 2.03459 9.07135 2.10378L9.7253 2.78939C10.0193 3.10703 10.1723 3.50959 10.1813 3.99077C10.1903 4.4751 10.0433 4.87451 9.7403 5.19216L7.78744 7.23954C7.72145 7.30873 7.64045 7.34332 7.54446 7.34332C7.44846 7.34332 7.36747 7.30873 7.30147 7.23954C7.23548 7.17035 7.20248 7.08543 7.20248 6.9848C7.20248 6.88416 7.23548 6.79924 7.30147 6.73005L9.22434 4.71412C9.40433 4.52542 9.49132 4.28326 9.48832 3.99077C9.48232 3.69829 9.39233 3.45613 9.20934 3.26743L8.58238 2.61013C8.51639 2.54094 8.48339 2.45602 8.48339 2.35538C8.48339 2.25474 8.51639 2.16983 8.58238 2.10064L8.58538 2.10378ZM12.8601 9.64859C12.7941 9.71778 12.7131 9.75238 12.6171 9.75238C12.5211 9.75238 12.4401 9.71778 12.3741 9.64859L11.8761 9.12653C11.6572 8.89694 11.4292 8.78372 11.1922 8.78372C10.9552 8.78372 10.7272 8.89694 10.5082 9.12653L10.0373 9.62029C9.97129 9.68948 9.89029 9.72407 9.7943 9.72407C9.6983 9.72407 9.61731 9.68948 9.55131 9.62029C9.48532 9.5511 9.45232 9.46619 9.45232 9.36555C9.45232 9.26491 9.48532 9.17999 9.55131 9.1108L9.97728 8.66422C10.3103 8.31512 10.7092 8.13586 11.1742 8.12642C11.6392 8.11699 12.0381 8.28682 12.3711 8.63277L12.8541 9.13911C12.9201 9.2083 12.9531 9.29321 12.9531 9.39385C12.9531 9.49449 12.9201 9.5794 12.8541 9.64859H12.8601ZM2.36082 13.9855L9.01435 11.501C9.20034 11.4318 9.25434 11.1802 9.11335 11.0355L4.81765 6.6074C4.67666 6.46273 4.44268 6.51934 4.37668 6.71433L2.01585 13.6239C1.94085 13.8471 2.14484 14.0641 2.35783 13.9824L2.36082 13.9855Z' })),
16
- React.createElement("span", { className: 'gift-comp-attr' }, translate('account.notifications_messages.giftSuccessText')))) : null;
30
+ React.createElement("span", { className: 'gift-comp-attr' }, translate('account.notifications_messages.giftSuccessText')))) : null) : null;
17
31
  };
18
32
  export default GiftComp;
package/dist/components/TotalCheckout/GiftComp/style.js CHANGED
@@ -9,7 +9,7 @@ const GiftCompStyle = styled.div `
9
9
  display: flex;
10
10
  gap: var(--account_giftAttrGap);
11
11
 
12
- margin: var(--account_giftBlockDistance) 0;
12
+ margin: var(--account_commentMarginTop) 0;
13
13
  margin-bottom: 0;
14
14
  background-color: var(--account_surfaceColor);
15
15
  padding: var(--account_giftBlockPadTB) var(--account_giftBlockPadLR);
package/dist/components/TotalCheckout/index.js CHANGED
@@ -12,12 +12,12 @@ 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 }) => {
15
+ const TotalCheckout = memo(({ isShipping, children, confirmation, buttonProps, loading }) => {
16
16
  const { useCart, useUser } = useAccountContext();
17
17
  const { checkoutBtnDisabled } = useCheckoutContext();
18
18
  const { addressLoading } = useAddressContext();
19
19
  const { user } = useUser();
20
- const { itemsCount, shippingCost, total, subtotal, useBalance, loading, discount, currency } = useCart();
20
+ const { itemsCount, shippingCost, total, subtotal, useBalance, discount, currency } = useCart();
21
21
  return (React.createElement(TotalCheckoutStyle, null,
22
22
  React.createElement("div", { className: `cart-main-wrap` },
23
23
  React.createElement("div", { className: `left-panel-wrap panel` }, children),
@@ -30,24 +30,24 @@ const TotalCheckout = memo(({ isShipping, children, confirmation, buttonProps })
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` },
40
40
  React.createElement(Text, { className: `account-p account-p2 account-font-regular account-primary-color1 sticky-wrap-shipping`, text: `account.address_management.shipping` }),
41
41
  React.createElement(Text, { className: `account-p account-p2 account-font-regular account-primary-color1 sticky-wrap-shipping-cost`, text: `${String(shippingCost).toLowerCase() === 'free' ? `account.general_actions.${shippingCost}` : shippingCost === '-' ? shippingCost : `${numToLocalString(shippingCost)} ${currency}`}` })),
42
- React.createElement("div", { className: `od-item-wrap` },
42
+ React.createElement("div", { className: `od-item-wrap total-block` },
43
43
  React.createElement(Text, { className: `account-p account-p2 account-font-bold account-primary-color1 sticky-wrap-total`, text: `account.order_balance.total` }),
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,
50
- React.createElement(CommentComp, { isShipping: isShipping }),
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))))));
49
+ React.createElement(BalanceComp, null)),
50
+ React.createElement(CommentComp, { isShipping: isShipping }))),
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
  });
53
53
  export default TotalCheckout;
package/dist/components/TotalCheckout/style.js CHANGED
@@ -53,6 +53,10 @@ const TotalCheckoutStyle = styled.section `
53
53
  justify-content: space-between;
54
54
  align-items: center;
55
55
 
56
+ &.total-block {
57
+ margin-bottom: var(--account_collapseLargeDistance);
58
+ }
59
+
56
60
  &:not(:first-child) {
57
61
  margin-top: var(--account_itemMTop);
58
62
  }
@@ -196,10 +200,12 @@ const TotalCheckoutStyle = styled.section `
196
200
  }
197
201
 
198
202
  /* //! Scroll logic */
199
- /* .scroll-block {
203
+ --account_rightPanelScrollSize: var(--sp50x);
204
+
205
+ .scroll-block {
200
206
  overflow-x: hidden;
201
207
  overflow-y: auto;
202
- max-height: calc(100vh - var(--sp27x));
208
+ max-height: calc(100vh - var(--account_rightPanelScrollSize));
203
209
 
204
210
  scrollbar-width: none;
205
211
  -ms-overflow-style: none;
@@ -207,7 +213,7 @@ const TotalCheckoutStyle = styled.section `
207
213
  &::-webkit-scrollbar {
208
214
  display: none;
209
215
  }
210
- } */
216
+ }
211
217
 
212
218
  @media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXLMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeL}) {
213
219
  --account_distance: var(--sp8x);
@@ -283,6 +289,9 @@ const TotalCheckoutStyle = styled.section `
283
289
  /* //! Collapse Sizes */
284
290
  --account_collapseLargeDistance: var(--sp4x);
285
291
  --account_collapseSmallDistance: var(--sp3x);
292
+
293
+ /* //! Scroll logic */
294
+ --account_rightPanelScrollSize: var(--sp45x);
286
295
  }
287
296
 
288
297
  @media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXSMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_TabletSize}) {
@@ -302,6 +311,9 @@ const TotalCheckoutStyle = styled.section `
302
311
  /* //! Collapse Sizes */
303
312
  --account_collapseLargeDistance: var(--sp3x);
304
313
  --account_collapseSmallDistance: var(--sp3x);
314
+
315
+ /* //! Scroll logic */
316
+ --account_rightPanelScrollSize: var(--sp40x);
305
317
  }
306
318
 
307
319
  @media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeS}) {
@@ -322,6 +334,22 @@ const TotalCheckoutStyle = styled.section `
322
334
  --account_collapseLargeDistance: var(--sp3x);
323
335
  --account_collapseSmallDistance: var(--sp2-5x);
324
336
 
337
+ /* //! Scroll logic */
338
+ --account_rightPanelScrollSize: 0;
339
+
340
+ .scroll-block {
341
+ overflow-x: unset;
342
+ overflow-y: unset;
343
+ max-height: unset;
344
+
345
+ scrollbar-width: unset;
346
+ -ms-overflow-style: unset;
347
+
348
+ &::-webkit-scrollbar {
349
+ display: unset;
350
+ }
351
+ }
352
+
325
353
  .cart-main-wrap {
326
354
  .right-panel-wrap {
327
355
  margin-top: var(--sp12x);
@@ -347,6 +375,22 @@ const TotalCheckoutStyle = styled.section `
347
375
  --account_collapseLargeDistance: var(--sp3x);
348
376
  --account_collapseSmallDistance: var(--sp2x);
349
377
 
378
+ /* //! Scroll logic */
379
+ --account_rightPanelScrollSize: 0;
380
+
381
+ .scroll-block {
382
+ overflow-x: unset;
383
+ overflow-y: unset;
384
+ max-height: unset;
385
+
386
+ scrollbar-width: unset;
387
+ -ms-overflow-style: unset;
388
+
389
+ &::-webkit-scrollbar {
390
+ display: unset;
391
+ }
392
+ }
393
+
350
394
  .cart-main-wrap {
351
395
  .right-panel-wrap {
352
396
  margin-top: var(--sp8x);
package/dist/modules/account/AccountBalanceTemplate/HistoryBalance/index.js CHANGED
@@ -1,4 +1,4 @@
1
- import React, { useCallback, useEffect, useState } from 'react';
1
+ import React, { useCallback, useEffect, useRef, useState } from 'react';
2
2
  import { api, Link, Text, useTranslation } from '@weareconceptstudio/core';
3
3
  //* Styles
4
4
  import HistoryBalanceStyle from './style';
@@ -8,6 +8,8 @@ import { Pagination } from '../../../../components';
8
8
  const dataCategoryName = ['account.balance_promotions.balanceCategoryDate', 'account.balance_promotions.balanceCategoryActivity', 'account.balance_promotions.balanceCategoryAmount'];
9
9
  const HistoryBalance = ({ linkEarnPage }) => {
10
10
  const { translate, selectedLang } = useTranslation();
11
+ //! Ref
12
+ const containerRef = useRef();
11
13
  const [currentPage, setCurrentPage] = useState(1);
12
14
  const [pagination, setPagination] = useState({
13
15
  total: 0,
@@ -25,7 +27,7 @@ const HistoryBalance = ({ linkEarnPage }) => {
25
27
  useEffect(() => {
26
28
  getHistory(currentPage);
27
29
  }, [currentPage]);
28
- return data?.length > 0 ? (React.createElement(HistoryBalanceStyle, null,
30
+ return data?.length > 0 ? (React.createElement(HistoryBalanceStyle, { ref: containerRef },
29
31
  React.createElement("div", { className: 'wrapper-title-section-history' },
30
32
  React.createElement("div", { className: 'wrapper-history-link' },
31
33
  React.createElement(Text, { className: 'account-primary-color1 account-font-medium account-p account-p1 first-letter title-section-history', text: 'account.balance_promotions.balanceRecentActivity' }),
@@ -40,6 +42,6 @@ const HistoryBalance = ({ linkEarnPage }) => {
40
42
  React.createElement("div", { className: 'line-info first-line' }),
41
43
  data &&
42
44
  data.map((item, i) => (React.createElement(ItemHistory, { key: i, ...item }))),
43
- React.createElement(Pagination, { activePageState: currentPage, ...pagination, onChange: (page) => setCurrentPage(page) }))))) : null;
45
+ React.createElement(Pagination, { parentElement: containerRef.current, activePageState: currentPage, ...pagination, onChange: (page) => setCurrentPage(page) }))))) : null;
44
46
  };
45
47
  export default HistoryBalance;
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` },
@@ -33,7 +43,7 @@ const CartItems = memo(({ data, className, title, smallFontSize, additionalParam
33
43
  return (React.createElement(CartItemsStyle, { className: className || '' },
34
44
  additionalParameters.edit.list ? (React.createElement("div", { className: `title-edit-wrapper` },
35
45
  React.createElement(Text, { className: `account-p ${smallFontSize ? 'account-p2' : 'account-p1'} account-font-bold account-primary-color1 cart-items-title2-version`, text: title }),
36
- React.createElement(AccountButton, { url: '/cart/', btnType: `green-small-text`, className: 'cart-items-edit-btn', text: `account.cart_checkout.editCart` }))) : (React.createElement(Text, { className: `account-p ${smallFontSize ? 'account-p2' : 'account-p1'} account-font-bold account-primary-color1 cart-items-title1-version`, text: title })),
46
+ React.createElement(AccountButton, { url: '/cart/', btnType: `green-small-text`, text: `account.cart_checkout.editCart`, className: 'cart-items-edit-btn align-right' }))) : (React.createElement(Text, { className: `account-p ${smallFontSize ? 'account-p2' : 'account-p1'} account-font-bold account-primary-color1 cart-items-title1-version`, text: title })),
37
47
  additionalParameters.horizontalLine ? React.createElement("div", { className: `cart-items-line` }) : null,
38
48
  itemsStore));
39
49
  });
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/cart/CartTemplate/index.js CHANGED
@@ -1,4 +1,4 @@
1
- import React from 'react';
1
+ import React, { useEffect, useRef } from 'react';
2
2
  import { Page, useTranslation } from '@weareconceptstudio/core';
3
3
  import { CartItems, EmptyCart } from '..';
4
4
  import { TotalCheckout, AccountButton } from '../../../components';
@@ -13,16 +13,23 @@ import CartTemplateStyle from './style';
13
13
  //* Skeleton
14
14
  import SkeletonCartTemplate from './Skeleton';
15
15
  const CartTemplate = ({ children, checkoutUrl = '/checkout/', moreMenu, emptyCartIcon }) => {
16
- const { shopUrl, useCart } = useAccountContext();
17
16
  const { translate } = useTranslation();
18
- const { items, itemsCount, shippingCost, loading, subtotal, total, freeShippingRange, shippingCostValue, toggleCartItem, deleteCartItem } = useCart();
17
+ const { shopUrl, useCart } = useAccountContext();
18
+ const { items, itemsCount, loading, toggleCartItem, deleteCartItem } = useCart();
19
+ const isFirstRender = useRef(true);
20
+ useEffect(() => {
21
+ if (isFirstRender.current) {
22
+ isFirstRender.current = false;
23
+ return;
24
+ }
25
+ }, [loading]);
19
26
  return (React.createElement(Page, { className: 'cart use-account' },
20
27
  React.createElement(AccountContainer, { className: `second-version` },
21
28
  React.createElement(CartTemplateStyle, null,
22
- React.createElement(TotalCheckout, { total: total, loading: loading, subtotal: subtotal, itemsCount: itemsCount, shippingCost: shippingCost, freeShippingRange: freeShippingRange, shippingCostValue: shippingCostValue, buttonProps: {
29
+ React.createElement(TotalCheckout, { loading: isFirstRender.current, buttonProps: {
23
30
  url: checkoutUrl,
24
31
  text: 'account.cart_checkout.proceedToCheckout',
25
- } }, !loading ? (itemsCount > 0 ? (React.createElement(React.Fragment, null,
32
+ } }, !isFirstRender.current ? (itemsCount > 0 ? (React.createElement(React.Fragment, null,
26
33
  shopUrl ? (React.createElement(AccountButton, { url: shopUrl, btnType: `purple-text`, className: `back-to-shop` },
27
34
  leftArrow,
28
35
  translate('account.general_actions.backToShop'))) : null,
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/checkout/CheckoutTemplate/index.js CHANGED
@@ -20,6 +20,13 @@ const CheckoutTemplate = () => {
20
20
  const { handleCheckout } = useCheckoutContext();
21
21
  const { items, 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]);
23
30
  const checkStep = {
24
31
  isShipping: !hasCheckoutAddress,
25
32
  isReview: hasCheckoutAddress,
@@ -47,18 +54,19 @@ const CheckoutTemplate = () => {
47
54
  }
48
55
  }, [itemsCount, loading]);
49
56
  return (React.createElement(Page, { className: 'checkout use-account' },
50
- React.createElement(AccountContainer, { className: `second-version` }, itemsCount && user ? (React.createElement(CheckoutTemplateStyle, null,
51
- React.createElement(TotalCheckout, { isShipping: checkStep.isShipping, buttonProps: {
52
- url: false,
53
- handleClick: handleCheckoutBtn,
54
- type: checkStep.isShipping ? 'submit' : 'button',
55
- text: checkStep.isShipping ? 'account.cart_checkout.proceedToCheckout' : 'account.cart_checkout.proceedToPayment',
56
- loadingButton: loadingProcessToPayment,
57
- } }, !addressLoading && itemsCount ? (React.createElement(React.Fragment, null,
58
- React.createElement(Sequence, { step: checkStep.isShipping ? 'shipping' : 'review' }),
59
- checkStep.isShipping ? React.createElement(StepShipping, { firstStepFormRef: firstStepFormRef }) : React.createElement(StepReview, { items: items }))) : (React.createElement(React.Fragment, null,
60
- React.createElement(SequenceSkeleton, { className: 'sequence-checkout-template' }),
61
- React.createElement(SkeletonAddressSelect, { className: 'address-checkout-template' }),
62
- React.createElement(SkeletonCartTemplate, null)))))) : null)));
57
+ React.createElement(AccountContainer, { className: `second-version` },
58
+ React.createElement(CheckoutTemplateStyle, null,
59
+ React.createElement(TotalCheckout, { loading: isFirstRender.current, isShipping: checkStep.isShipping, buttonProps: {
60
+ url: false,
61
+ handleClick: handleCheckoutBtn,
62
+ type: checkStep.isShipping ? 'submit' : 'button',
63
+ text: checkStep.isShipping ? 'account.cart_checkout.proceedToCheckout' : 'account.cart_checkout.proceedToPayment',
64
+ loadingButton: loadingProcessToPayment,
65
+ } }, !addressLoading && itemsCount && user ? (React.createElement(React.Fragment, null,
66
+ React.createElement(Sequence, { step: checkStep.isShipping ? 'shipping' : 'review' }),
67
+ checkStep.isShipping ? React.createElement(StepShipping, { firstStepFormRef: firstStepFormRef }) : React.createElement(StepReview, { items: items }))) : (React.createElement(React.Fragment, null,
68
+ React.createElement(SequenceSkeleton, { className: 'sequence-checkout-template' }),
69
+ React.createElement(SkeletonAddressSelect, { className: 'address-checkout-template' }),
70
+ React.createElement(SkeletonCartTemplate, null))))))));
63
71
  };
64
72
  export default CheckoutTemplate;
package/dist/modules/order/OrderDetails/index.js CHANGED
@@ -3,7 +3,7 @@ import { handlePriceCheckFunc, Text, useTranslation } from '@weareconceptstudio/
3
3
  import { useAccountContext } from '../../../AccountProvider';
4
4
  import OrderStatus from '../OrderStatus';
5
5
  import OrderDetailsStyle from './style';
6
- const OrderDetails = memo(({ className, status, date, orderNumber, itemsCount, total, shippingCost, usedBalance, discounts = [] }) => {
6
+ const OrderDetails = memo(({ className, status, date, orderNumber, itemsCount, total, subtotal, shippingCost, usedBalance, discounts = [] }) => {
7
7
  const { translate } = useTranslation();
8
8
  const { currency } = useAccountContext();
9
9
  return (React.createElement(OrderDetailsStyle, { className: `${className || ''}` },
@@ -29,20 +29,33 @@ const OrderDetails = memo(({ className, status, date, orderNumber, itemsCount, t
29
29
  translate('account.order_management.totalItems'),
30
30
  ":"),
31
31
  React.createElement(Text, { className: `account-p account-p3 account-font-regular account-primary-color1 value`, text: itemsCount })),
32
+ React.createElement("div", { className: `order-detail-item-wrap` },
33
+ React.createElement(Text, { className: `account-p account-p3 account-font-bold account-primary-color1` },
34
+ translate('account.cart_checkout.subtotal'),
35
+ ":"),
36
+ React.createElement(Text, { className: `account-p account-p3 account-font-regular account-primary-color1 value` }, handlePriceCheckFunc(subtotal, currency))),
32
37
  discounts?.length > 0
33
- ? discounts.map((item, index) => (React.createElement("div", { key: index, className: `order-detail-item-wrap` },
34
- React.createElement(Text, { className: `account-p account-p3 account-font-bold account-primary-color1` },
35
- translate('account.order_balance.discount'),
36
- " (",
37
- item.title,
38
- "):"),
39
- React.createElement(Text, { className: `account-p account-p3 account-font-regular account-primary-color1 value` }, handlePriceCheckFunc(item.discount, currency)))))
38
+ ? discounts.map((item, index) => {
39
+ if (item.discount != 0) {
40
+ return (React.createElement("div", { key: index, className: `order-detail-item-wrap` },
41
+ React.createElement(Text, { className: `account-p account-p3 account-font-bold discount-color` },
42
+ translate('account.order_balance.discount'),
43
+ " (",
44
+ item.title,
45
+ "):"),
46
+ React.createElement(Text, { className: `account-p account-p3 account-font-regular value discount-color` },
47
+ "-",
48
+ handlePriceCheckFunc(item.discount, currency))));
49
+ }
50
+ })
40
51
  : null,
41
52
  usedBalance ? (React.createElement("div", { className: `order-detail-item-wrap` },
42
- React.createElement(Text, { className: `account-p account-p3 account-font-bold account-primary-color1` },
53
+ React.createElement(Text, { className: `account-p account-p3 account-font-bold balance-color` },
43
54
  translate('account.balance_promotions.usedBalance'),
44
55
  ":"),
45
- React.createElement(Text, { className: `account-p account-p3 account-font-regular account-primary-color1 value` }, handlePriceCheckFunc(usedBalance, currency)))) : null,
56
+ React.createElement(Text, { className: `account-p account-p3 account-font-regular balance-color value` },
57
+ "-",
58
+ handlePriceCheckFunc(usedBalance, currency)))) : null,
46
59
  shippingCost ? (React.createElement("div", { className: `order-detail-item-wrap` },
47
60
  React.createElement(Text, { className: `account-p account-p3 account-font-bold account-primary-color1` },
48
61
  translate('account.order_balance.shippingCost'),
package/dist/modules/order/OrderDetails/style.js CHANGED
@@ -6,6 +6,14 @@ const OrderDetailsStyle = styled.section `
6
6
  --account_statusItemPadLR: var(--sp2-5x);
7
7
  --account_orderDetailItemWrapMTop: var(--sp2x);
8
8
 
9
+ .discount-color {
10
+ color: var(--account_statusCanceledColor);
11
+ }
12
+
13
+ .balance-color {
14
+ color: var(--account_statusPaymentFailedColor);
15
+ }
16
+
9
17
  .info-space-line {
10
18
  width: 100%;
11
19
  border-bottom: 2px solid var(--account_primaryColor1);
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/modules/order/OrdersList/index.js CHANGED
@@ -1,4 +1,4 @@
1
- import React, { useMemo, useState, useEffect, useCallback } from 'react';
1
+ import React, { useMemo, useState, useEffect, useCallback, useRef } from 'react';
2
2
  import { Text, useUi, api } from '@weareconceptstudio/core';
3
3
  //* Components
4
4
  import Item from './Item';
@@ -9,6 +9,8 @@ import { Pagination } from '../../../components';
9
9
  import OrdersListStyle from './style';
10
10
  const OrdersList = () => {
11
11
  const { winWidth } = useUi();
12
+ //! Ref
13
+ const containerRef = useRef();
12
14
  const [loading, setLoading] = useState(true);
13
15
  const [data, setData] = useState([]);
14
16
  const [currentPage, setCurrentPage] = useState(1);
@@ -47,11 +49,11 @@ const OrdersList = () => {
47
49
  return (React.createElement(ItemMobile, { key: index, data: item }));
48
50
  }))) : null;
49
51
  }, [winWidth, data]);
50
- return !loading && data?.length > 0 ? (React.createElement(OrdersListStyle, null,
52
+ return !loading && data?.length > 0 ? (React.createElement(OrdersListStyle, { ref: containerRef },
51
53
  React.createElement(Text, { className: `account-p account-p1 account-font-bold account-primary-color1`, text: 'account.account_info.orderHistory' }),
52
54
  React.createElement("div", { className: `order-history-line` }),
53
55
  listStore,
54
56
  React.createElement("div", { className: `pagination-wrap` },
55
- React.createElement(Pagination, { activePageState: currentPage, ...pagination, onChange: (page) => setCurrentPage(page) })))) : !loading ? (React.createElement(EmptyOrders, null)) : null;
57
+ React.createElement(Pagination, { activePageState: currentPage, parentElement: containerRef.current, onChange: (page) => setCurrentPage(page), ...pagination })))) : !loading ? (React.createElement(EmptyOrders, null)) : null;
56
58
  };
57
59
  export default OrdersList;
package/dist/styles/helperClass.js CHANGED
@@ -234,6 +234,38 @@ const AccountHelperClass = createGlobalStyle `${css `
234
234
  }
235
235
  }
236
236
 
237
+ .account-secondary-color10 {
238
+ color: var(--account_secondaryColor10);
239
+
240
+ &-bg {
241
+ background-color: var(--account_secondaryColor10);
242
+ }
243
+ }
244
+
245
+ .account-secondary-color11 {
246
+ color: var(--account_secondaryColor11);
247
+
248
+ &-bg {
249
+ background-color: var(--account_secondaryColor11);
250
+ }
251
+ }
252
+
253
+ .account-secondary-color12 {
254
+ color: var(--account_secondaryColor12);
255
+
256
+ &-bg {
257
+ background-color: var(--account_secondaryColor12);
258
+ }
259
+ }
260
+
261
+ .account-secondary-color13 {
262
+ color: var(--account_secondaryColor13);
263
+
264
+ &-bg {
265
+ background-color: var(--account_secondaryColor13);
266
+ }
267
+ }
268
+
237
269
  //! Background color
238
270
  .account-background-color {
239
271
  color: var(--account_backgroundColor);
package/dist/translations/en.js CHANGED
@@ -139,9 +139,9 @@ export default {
139
139
  save: 'Save',
140
140
  done: 'Done',
141
141
  shopNow: 'Shop now',
142
- add: 'add',
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.5",
3
+ "version": "0.5.7",
4
4
  "description": "Concept Studio Account",
5
5
  "author": "Concept Studio",
6
6
  "license": "ISC",