@weareconceptstudio/account 0.5.1 → 0.5.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.
Files changed (41) hide show
  1. package/dist/components/AccountCounter/index.d.ts +3 -1
  2. package/dist/components/AccountCounter/index.js +6 -4
  3. package/dist/components/TotalCheckout/BalanceComp/index.d.ts +1 -6
  4. package/dist/components/TotalCheckout/BalanceComp/index.js +15 -7
  5. package/dist/components/TotalCheckout/CommentComp/index.d.ts +1 -3
  6. package/dist/components/TotalCheckout/CommentComp/index.js +3 -1
  7. package/dist/components/TotalCheckout/FreeShippingComp/index.d.ts +1 -6
  8. package/dist/components/TotalCheckout/FreeShippingComp/index.js +9 -11
  9. package/dist/components/TotalCheckout/FreeShippingComp/style.js +0 -1
  10. package/dist/components/TotalCheckout/GiftComp/index.d.ts +3 -0
  11. package/dist/components/TotalCheckout/GiftComp/index.js +18 -0
  12. package/dist/components/TotalCheckout/GiftComp/style.d.ts +2 -0
  13. package/dist/components/TotalCheckout/GiftComp/style.js +100 -0
  14. package/dist/components/TotalCheckout/PromoCodeComp/index.d.ts +1 -5
  15. package/dist/components/TotalCheckout/PromoCodeComp/index.js +15 -9
  16. package/dist/components/TotalCheckout/index.js +32 -33
  17. package/dist/components/TotalCheckout/style.js +22 -8
  18. package/dist/modules/account/AccountBalanceTemplate/HeroBalance/ProgressBalance/index.js +5 -9
  19. package/dist/modules/account/AccountBalanceTemplate/HeroBalance/index.js +1 -6
  20. package/dist/modules/account/AccountBalanceTemplate/HistoryBalance/index.js +1 -1
  21. package/dist/modules/account/AccountBalanceTemplate/index.js +3 -3
  22. package/dist/modules/auth/ForgotPasswordTemplate/index.js +1 -3
  23. package/dist/modules/cart/SimpleItems/Item/index.js +10 -7
  24. package/dist/modules/cart/SimpleItems/ItemMobile/index.js +8 -14
  25. package/dist/modules/cart/SimpleItems/index.js +3 -3
  26. package/dist/modules/cart/SimpleItems/style.js +11 -0
  27. package/dist/modules/cart/SimpleItems/{Item/util.js → util.js} +2 -2
  28. package/dist/modules/checkout/CheckoutProvider.js +14 -1
  29. package/dist/modules/order/OrderedItems/index.js +20 -18
  30. package/dist/modules/payment/AddNewCard/style.js +1 -0
  31. package/dist/styles/theme.js +10 -10
  32. package/dist/styles/variables.js +2 -0
  33. package/dist/translations/en.d.ts +10 -12
  34. package/dist/translations/en.js +11 -13
  35. package/dist/translations/hy.d.ts +10 -12
  36. package/dist/translations/hy.js +14 -16
  37. package/dist/translations/index.d.ts +30 -35
  38. package/dist/translations/ru.d.ts +10 -11
  39. package/dist/translations/ru.js +11 -12
  40. package/package.json +1 -1
  41. /package/dist/modules/cart/SimpleItems/{Item/util.d.ts → util.d.ts} +0 -0
package/dist/components/AccountCounter/index.d.ts CHANGED
@@ -1,6 +1,8 @@
1
1
  export default AccountCounter;
2
- declare function AccountCounter({ productId, qty }: {
2
+ declare function AccountCounter({ productId, qty, isGift, maxQty }: {
3
3
  productId: any;
4
4
  qty?: number;
5
+ isGift: any;
6
+ maxQty: any;
5
7
  }): React.JSX.Element;
6
8
  import React from 'react';
package/dist/components/AccountCounter/index.js CHANGED
@@ -1,15 +1,17 @@
1
1
  import React, { useState, useCallback, useEffect } from 'react';
2
2
  import { Text, debounce } from '@weareconceptstudio/core';
3
3
  import { useAccountContext } from '../../AccountProvider';
4
+ import { useCheckoutContext } from '../../modules';
4
5
  //* Style
5
6
  import AccountCounterStyle from './style';
6
- const AccountCounter = ({ productId, qty = 1 }) => {
7
+ const AccountCounter = ({ productId, qty = 1, isGift, maxQty }) => {
7
8
  const { useCart } = useAccountContext();
8
9
  const { toggleCartItem, items } = useCart();
10
+ const { setCheckGift } = useCheckoutContext();
9
11
  //! State
10
12
  const [count, setCount] = useState(qty);
11
13
  useEffect(() => {
12
- setCount(items.find((item) => item.product.id == productId)?.qty || qty);
14
+ setCount(items.find((item) => item.product.id == productId && !item.is_gift)?.qty || qty);
13
15
  }, [items]);
14
16
  const updateCartServer = useCallback((quantity) => {
15
17
  toggleCartItem({
@@ -22,7 +24,7 @@ const AccountCounter = ({ productId, qty = 1 }) => {
22
24
  e.stopPropagation();
23
25
  const newCount = type == 'inc' ? count + 1 : count - 1;
24
26
  setCount(newCount);
25
- debouncedUpdateCartServer(newCount);
27
+ isGift ? (newCount == 0 ? setCheckGift() : null) : debouncedUpdateCartServer(newCount);
26
28
  };
27
29
  return (React.createElement(AccountCounterStyle, { onClick: (e) => e.stopPropagation(), className: `counter-block ${count == 0 ? 'opacity-zero pointer-none' : ''}` },
28
30
  React.createElement("div", { className: 'counter' },
@@ -30,7 +32,7 @@ const AccountCounter = ({ productId, qty = 1 }) => {
30
32
  React.createElement("svg", { fill: 'none', viewBox: '0 0 13 3', className: `minus`, xmlns: 'http://www.w3.org/2000/svg' },
31
33
  React.createElement("path", { d: 'M0 1.5H12', strokeWidth: '2' }))),
32
34
  React.createElement(Text, { className: `p p5 font-montserrat-arm-medium count` }, `${count}`),
33
- React.createElement("div", { onClick: (e) => handleAddToCart(e, 'inc'), className: `c-icon-block ${count == 99 ? 'disable' : ''}` },
35
+ React.createElement("div", { onClick: (e) => handleAddToCart(e, 'inc'), className: `c-icon-block ${count >= maxQty || count == 99 ? 'disable' : ''}` },
34
36
  React.createElement("svg", { fill: 'none', className: `plus`, viewBox: '0 0 12 12', xmlns: 'http://www.w3.org/2000/svg' },
35
37
  React.createElement("path", { d: 'M0 6H12', strokeWidth: '2' }),
36
38
  React.createElement("path", { d: 'M6 12L6 0', strokeWidth: '2' }))))));
package/dist/components/TotalCheckout/BalanceComp/index.d.ts CHANGED
@@ -1,10 +1,5 @@
1
1
  export default BalanceComp;
2
- declare function BalanceComp({ isBalance, currency, balance, useBalance, balanceHandler, getItemCount }: {
2
+ declare function BalanceComp({ isBalance }: {
3
3
  isBalance?: boolean;
4
- currency: any;
5
- balance: any;
6
- useBalance: any;
7
- balanceHandler: any;
8
- getItemCount: any;
9
4
  }): React.JSX.Element;
10
5
  import React from 'react';
package/dist/components/TotalCheckout/BalanceComp/index.js CHANGED
@@ -1,20 +1,28 @@
1
1
  import React, { useState } from 'react';
2
- import { Text, CollapseItem, useTranslation, handlePriceCheckFunc } from '@weareconceptstudio/core';
2
+ import { Text, CollapseItem, handlePriceCheckFunc, useTranslation } from '@weareconceptstudio/core';
3
3
  import { FormBuilder } from '@weareconceptstudio/form';
4
+ import { useAccountContext } from '../../../AccountProvider';
5
+ import { useCheckoutContext } from '../../../modules';
4
6
  import AccountButton from '../../AccountButton';
5
7
  import { balanceFields } from './utils';
6
8
  //* Style
7
9
  import BalanceCompStyle from './style';
8
- const BalanceComp = ({ isBalance = true, currency, balance, useBalance, balanceHandler, getItemCount }) => {
10
+ const BalanceComp = ({ isBalance = true }) => {
9
11
  const { translate } = useTranslation();
10
- //! States
12
+ const { useCart, useUser } = useAccountContext();
13
+ const { currency, itemsCount, useBalance } = useCart();
14
+ const { fillCart } = useCheckoutContext();
15
+ const { user } = useUser();
16
+ const balance = user?.balance || 0;
11
17
  const [disable, setDisable] = useState(false);
12
- //! On Finish
18
+ const handleBalance = (amount) => {
19
+ fillCart('useBalance', amount);
20
+ };
13
21
  const onFinish = (values) => {
14
22
  setDisable(true);
15
- balanceHandler(values.balance);
23
+ handleBalance(values.balance);
16
24
  };
17
- return isBalance ? (React.createElement(BalanceCompStyle, { className: `collapse-distance ${getItemCount && balance ? ' ' : 'disable'}` },
25
+ return isBalance ? (React.createElement(BalanceCompStyle, { className: `collapse-distance ${itemsCount && balance ? ' ' : 'disable'}` },
18
26
  React.createElement(CollapseItem, { disable: useBalance || disable, title: React.createElement(React.Fragment, null,
19
27
  React.createElement("div", { className: 'inner-wrapper-icon' },
20
28
  React.createElement("svg", { width: '12', height: '12', fill: 'none', viewBox: '0 0 12 12', xmlns: 'http://www.w3.org/2000/svg' },
@@ -23,7 +31,7 @@ const BalanceComp = ({ isBalance = true, currency, balance, useBalance, balanceH
23
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` },
24
32
  React.createElement(Text, { className: 'account-p account-p4 account-primary-color2 account-font-medium balance-success-text' }, handlePriceCheckFunc(useBalance, currency)),
25
33
  React.createElement(Text, { text: 'account.general_actions.remove', className: 'account-p account-p4 account-primary-color2 account-font-medium balance-remove-text', onClick: () => {
26
- balanceHandler(null);
34
+ handleBalance(null);
27
35
  setDisable(false);
28
36
  } }))) : (React.createElement(FormBuilder, { onSubmit: onFinish, fields: balanceFields, className: `balance-block`, formOptions: {
29
37
  className: 'balance-container',
package/dist/components/TotalCheckout/CommentComp/index.d.ts CHANGED
@@ -1,5 +1,3 @@
1
1
  export default CommentComp;
2
- declare function CommentComp({ fillCheckoutData }: {
3
- fillCheckoutData: any;
4
- }): React.JSX.Element;
2
+ declare function CommentComp(): React.JSX.Element;
5
3
  import React from 'react';
package/dist/components/TotalCheckout/CommentComp/index.js CHANGED
@@ -1,8 +1,10 @@
1
1
  import React from 'react';
2
2
  import { CollapseContainer, CollapseItem, Text } from '@weareconceptstudio/core';
3
3
  import { Input } from '@weareconceptstudio/form';
4
+ import { useCheckoutContext } from '../../../modules';
4
5
  import CommentCompStyle from './style';
5
- const CommentComp = ({ fillCheckoutData }) => {
6
+ const CommentComp = () => {
7
+ const { fillCheckoutData } = useCheckoutContext();
6
8
  return (React.createElement(CommentCompStyle, { className: 'collapse-distance' },
7
9
  React.createElement(CollapseContainer, null,
8
10
  React.createElement(CollapseItem, { status: 'open', title: React.createElement(React.Fragment, null,
package/dist/components/TotalCheckout/FreeShippingComp/index.d.ts CHANGED
@@ -1,8 +1,3 @@
1
1
  export default FreeShippingComp;
2
- declare function FreeShippingComp({ shippingCostValue, freeShippingRange, shippingCost, currency }: {
3
- shippingCostValue: any;
4
- freeShippingRange: any;
5
- shippingCost: any;
6
- currency: any;
7
- }): React.JSX.Element;
2
+ declare function FreeShippingComp(): React.JSX.Element;
8
3
  import React from 'react';
package/dist/components/TotalCheckout/FreeShippingComp/index.js CHANGED
@@ -1,22 +1,20 @@
1
1
  import React from 'react';
2
2
  import { handlePriceCheckFunc, useTranslation } from '@weareconceptstudio/core';
3
+ import { useAccountContext } from '../../../AccountProvider';
4
+ import { useCheckoutContext } from '../../../modules';
3
5
  //* Style
4
6
  import FreeShippingCompStyle from './style';
5
- const FreeShippingComp = ({ shippingCostValue, freeShippingRange, shippingCost, currency }) => {
7
+ const FreeShippingComp = () => {
6
8
  const { translate } = useTranslation();
7
- return freeShippingRange ? (React.createElement(FreeShippingCompStyle, null,
9
+ const { useCart } = useAccountContext();
10
+ const { isCheckoutPage } = useCheckoutContext();
11
+ const { shippingCostValue, freeShippingRange, shippingCost, currency } = useCart();
12
+ return !isCheckoutPage ? (freeShippingRange ? (React.createElement(FreeShippingCompStyle, null,
8
13
  React.createElement("svg", { fill: 'none', viewBox: '0 0 24 24', xmlns: 'http://www.w3.org/2000/svg', className: 'free-shipping-comp-icon' },
9
14
  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' })),
10
- React.createElement("span", { className: 'free-shipping-comp-attr' },
11
- React.createElement("span", null, translate('account.notifications_messages.freeShippingText1')),
12
- React.createElement("span", { className: 'range-value' }, handlePriceCheckFunc(freeShippingRange, currency)),
13
- React.createElement("span", null, translate('account.notifications_messages.freeShippingText2'))))) : typeof shippingCost != 'number' ? (React.createElement(FreeShippingCompStyle, null,
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,
14
16
  React.createElement("svg", { fill: 'none', viewBox: '0 0 16 16', xmlns: 'http://www.w3.org/2000/svg', className: 'free-shipping-comp-icon' },
15
17
  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: 'free-shipping-comp-attr' },
17
- React.createElement("span", null, translate('account.notifications_messages.youHaveReachedFreeShipping')),
18
- React.createElement("span", { className: 'range-value' },
19
- handlePriceCheckFunc(shippingCostValue, currency),
20
- "!")))) : null;
18
+ 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;
21
19
  };
22
20
  export default FreeShippingComp;
package/dist/components/TotalCheckout/FreeShippingComp/style.js CHANGED
@@ -32,7 +32,6 @@ const FreeShippingCompStyle = styled.div `
32
32
 
33
33
  .range-value {
34
34
  font-weight: 700;
35
- margin: 0 var(--sp0-5x);
36
35
  }
37
36
 
38
37
  /* //! 1920 */
package/dist/components/TotalCheckout/GiftComp/index.d.ts ADDED
@@ -0,0 +1,3 @@
1
+ export default GiftComp;
2
+ declare function GiftComp(): React.JSX.Element;
3
+ import React from 'react';
package/dist/components/TotalCheckout/GiftComp/index.js ADDED
@@ -0,0 +1,18 @@
1
+ import React from 'react';
2
+ import { handlePriceCheckFunc, useTranslation } from '@weareconceptstudio/core';
3
+ import { useAccountContext } from '../../../AccountProvider';
4
+ //* Style
5
+ import GiftCompStyle from './style';
6
+ const GiftComp = () => {
7
+ const { translate } = useTranslation();
8
+ const { useCart } = useAccountContext();
9
+ const { hasFreeGift, giftThresholdRemaining, currency } = useCart();
10
+ return giftThresholdRemaining && !hasFreeGift ? (React.createElement(GiftCompStyle, null,
11
+ React.createElement("svg", { fill: 'none', viewBox: '0 0 24 23', className: 'gift-comp-icon', xmlns: 'http://www.w3.org/2000/svg' },
12
+ 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,
14
+ React.createElement("svg", { fill: 'none', viewBox: '0 0 16 16', className: 'gift-comp-icon', xmlns: 'http://www.w3.org/2000/svg' },
15
+ 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;
17
+ };
18
+ export default GiftComp;
package/dist/components/TotalCheckout/GiftComp/style.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ export default GiftCompStyle;
2
+ declare const GiftCompStyle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
package/dist/components/TotalCheckout/GiftComp/style.js ADDED
@@ -0,0 +1,100 @@
1
+ import styled from 'styled-components';
2
+ const GiftCompStyle = styled.div `
3
+ --account_giftBlockDistance: var(--sp5x);
4
+ --account_giftBlockPadTB: var(--sp2-5x);
5
+ --account_giftBlockPadLR: var(--sp2-5x);
6
+ --account_giftIconSize: var(--sp3x);
7
+ --account_giftAttrGap: var(--sp1-5x);
8
+
9
+ display: flex;
10
+ gap: var(--account_giftAttrGap);
11
+
12
+ margin: var(--account_giftBlockDistance) 0;
13
+ margin-bottom: 0;
14
+ background-color: var(--account_surfaceColor);
15
+ padding: var(--account_giftBlockPadTB) var(--account_giftBlockPadLR);
16
+ border-radius: var(--sp1x);
17
+
18
+ .gift-comp-icon {
19
+ max-width: var(--account_giftIconSize);
20
+ width: 100%;
21
+ height: var(--account_giftIconSize);
22
+ fill: var(--account_primaryColor3);
23
+ }
24
+
25
+ .gift-comp-attr {
26
+ color: var(--account_primaryColor2);
27
+ font-family: var(--account_Font);
28
+ font-size: var(--account_p4);
29
+ line-height: var(--account_lineHeight);
30
+ font-weight: 400;
31
+ }
32
+
33
+ .range-value {
34
+ font-weight: 700;
35
+ }
36
+
37
+ /* //! 1920 */
38
+ @media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXLMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeL}) {
39
+ --account_giftBlockDistance: var(--sp3-5x);
40
+ --account_giftBlockPadTB: var(--sp2x);
41
+ --account_giftBlockPadLR: var(--sp2x);
42
+ --account_giftIconSize: var(--sp3x);
43
+ --account_giftAttrGap: var(--sp1x);
44
+ }
45
+
46
+ /* //! 1510 */
47
+ @media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeLMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeM}) {
48
+ --account_giftBlockDistance: var(--sp4x);
49
+ --account_giftBlockPadTB: var(--sp2x);
50
+ --account_giftBlockPadLR: var(--sp2x);
51
+ --account_giftIconSize: var(--sp2-5x);
52
+ --account_giftAttrGap: var(--sp1x);
53
+ }
54
+
55
+ /* //! 1440 */
56
+ @media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeMMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeS}) {
57
+ --account_giftBlockDistance: var(--sp3x);
58
+ --account_giftBlockPadTB: var(--sp2x);
59
+ --account_giftBlockPadLR: var(--sp2x);
60
+ --account_giftIconSize: var(--sp2-5x);
61
+ --account_giftAttrGap: var(--sp1x);
62
+ }
63
+
64
+ /* //! 1280 */
65
+ @media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeSMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXS}) {
66
+ --account_giftBlockDistance: var(--sp3x);
67
+ --account_giftBlockPadTB: var(--sp2x);
68
+ --account_giftBlockPadLR: var(--sp2x);
69
+ --account_giftIconSize: var(--sp2-5x);
70
+ --account_giftAttrGap: var(--sp1x);
71
+ }
72
+
73
+ /* //! 1024 */
74
+ @media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXSMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_TabletSize}) {
75
+ --account_giftBlockDistance: var(--sp3x);
76
+ --account_giftBlockPadTB: var(--sp2x);
77
+ --account_giftBlockPadLR: var(--sp2x);
78
+ --account_giftIconSize: var(--sp2-5x);
79
+ --account_giftAttrGap: var(--sp1x);
80
+ }
81
+
82
+ /* //! 768 */
83
+ @media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeS}) {
84
+ --account_giftBlockDistance: var(--sp3x);
85
+ --account_giftBlockPadTB: var(--sp2x);
86
+ --account_giftBlockPadLR: var(--sp2x);
87
+ --account_giftIconSize: var(--sp2-5x);
88
+ --account_giftAttrGap: var(--sp1x);
89
+ }
90
+
91
+ /* //! Mobile */
92
+ @media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeSMin}) {
93
+ --account_giftBlockDistance: var(--sp3x);
94
+ --account_giftBlockPadTB: var(--sp2x);
95
+ --account_giftBlockPadLR: var(--sp2x);
96
+ --account_giftIconSize: var(--sp2-5x);
97
+ --account_giftAttrGap: var(--sp1x);
98
+ }
99
+ `;
100
+ export default GiftCompStyle;
package/dist/components/TotalCheckout/PromoCodeComp/index.d.ts CHANGED
@@ -1,9 +1,5 @@
1
1
  export default PromoCodeComp;
2
- declare function PromoCodeComp({ isPromoCode, promotionHandler, usePromotion, getItemCount, appliedPromotions }: {
2
+ declare function PromoCodeComp({ isPromoCode }: {
3
3
  isPromoCode?: boolean;
4
- promotionHandler: any;
5
- usePromotion: any;
6
- getItemCount: any;
7
- appliedPromotions: any;
8
4
  }): React.JSX.Element;
9
5
  import React from 'react';
package/dist/components/TotalCheckout/PromoCodeComp/index.js CHANGED
@@ -1,24 +1,30 @@
1
1
  import React, { useMemo, useState } from 'react';
2
2
  import { Text, CollapseItem } from '@weareconceptstudio/core';
3
3
  import { FormBuilder } from '@weareconceptstudio/form';
4
+ import { useAccountContext } from '../../../AccountProvider';
5
+ import { useCheckoutContext } from '../../../modules';
4
6
  import AccountButton from '../../AccountButton';
5
7
  import AppliedPromotion from './AppliedPromotion';
6
8
  import { promoCodeFields } from './utils';
7
9
  //* Style
8
10
  import PromoCodeCompStyle from './style';
9
- const PromoCodeComp = ({ isPromoCode = true, promotionHandler, usePromotion, getItemCount, appliedPromotions }) => {
10
- //! States
11
+ const PromoCodeComp = ({ isPromoCode = true }) => {
12
+ const { useCart } = useAccountContext();
13
+ const { itemsCount, usePromotion, appliedPromotions } = useCart();
14
+ const { fillCart } = useCheckoutContext();
11
15
  const [disable, setDisable] = useState(false);
12
- //! On Finish
16
+ const handlePromotion = (promotion) => {
17
+ fillCart('usePromotion', promotion);
18
+ };
13
19
  const onFinish = (values) => {
14
20
  setDisable(true);
15
- promotionHandler(values.promo_code);
21
+ handlePromotion(values.promo_code);
16
22
  };
17
23
  const promotions = useMemo(() => {
18
- return appliedPromotions?.map((promotion) => React.createElement(AppliedPromotion, { ...promotion }));
24
+ return appliedPromotions?.map((promotion, index) => (React.createElement(AppliedPromotion, { key: index, ...promotion })));
19
25
  }, [appliedPromotions]);
20
- return isPromoCode ? (React.createElement(PromoCodeCompStyle, { className: `collapse-distance ${getItemCount ? '' : 'disable'}` },
21
- React.createElement(CollapseItem, { status: appliedPromotions?.length ? 'open' : 'closed', disable: disable, title: React.createElement(React.Fragment, null,
26
+ return isPromoCode ? (React.createElement(PromoCodeCompStyle, { className: `collapse-distance ${itemsCount ? '' : 'disable'}` },
27
+ React.createElement(CollapseItem, { status: appliedPromotions?.length ? 'open' : 'close', disable: disable, title: React.createElement(React.Fragment, null,
22
28
  React.createElement("div", { className: 'inner-wrapper-icon' },
23
29
  React.createElement("svg", { xmlns: 'http://www.w3.org/2000/svg', width: '12', height: '12', viewBox: '0 0 12 12', fill: 'none' },
24
30
  React.createElement("path", { d: 'M0 6H12', stroke: 'black', strokeWidth: '2' }),
@@ -26,11 +32,11 @@ const PromoCodeComp = ({ isPromoCode = true, promotionHandler, usePromotion, get
26
32
  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,
27
33
  promotions,
28
34
  usePromotion ? (React.createElement(AppliedPromotion, { name: usePromotion, onClick: () => {
29
- promotionHandler(null);
35
+ handlePromotion(null);
30
36
  setDisable(false);
31
37
  } })) : (React.createElement(FormBuilder, { onSubmit: onFinish, fields: promoCodeFields, className: `promo-code-block`, formOptions: {
32
38
  className: 'promo-code-container',
33
39
  } },
34
- React.createElement(AccountButton, { text: `account.general_actions.add`, type: 'submit', btnType: `promo-code-version` })))) }))) : null;
40
+ React.createElement(AccountButton, { type: 'submit', btnType: `promo-code-version`, text: `account.general_actions.add` })))) }))) : null;
35
41
  };
36
42
  export default PromoCodeComp;
package/dist/components/TotalCheckout/index.js CHANGED
@@ -7,22 +7,17 @@ import FreeShippingComp from './FreeShippingComp';
7
7
  import PromoCodeComp from './PromoCodeComp';
8
8
  import BalanceComp from './BalanceComp';
9
9
  import CommentComp from './CommentComp';
10
+ import GiftComp from './GiftComp';
10
11
  //* Style
11
12
  import TotalCheckoutStyle from './style';
12
13
  //* Skeleton
13
14
  import SkeletonTotalCheckout from './Skeleton';
14
15
  const TotalCheckout = memo(({ isShipping, children, confirmation, buttonProps }) => {
15
- const { currency, useCart, useUser } = useAccountContext();
16
- const { fillCheckoutData, fillCart, checkoutBtnDisabled, isCheckoutPage } = useCheckoutContext();
16
+ const { useCart, useUser } = useAccountContext();
17
+ const { checkoutBtnDisabled, isCheckoutPage } = useCheckoutContext();
17
18
  const { addressLoading } = useAddressContext();
18
19
  const { user } = useUser();
19
- const { itemsCount, shippingCost, freeShippingRange, shippingCostValue, total, subtotal, useBalance, loading, usePromotion, discount, appliedPromotions } = useCart();
20
- const handleBalance = (amount) => {
21
- fillCart('useBalance', amount);
22
- };
23
- const handlePromotion = (promotion) => {
24
- fillCart('usePromotion', promotion);
25
- };
20
+ const { itemsCount, shippingCost, total, subtotal, useBalance, loading, discount, currency } = useCart();
26
21
  const innerCollapseRef = useRef(null);
27
22
  //! disable keypress on input
28
23
  useEffect(() => {
@@ -57,29 +52,33 @@ const TotalCheckout = memo(({ isShipping, children, confirmation, buttonProps })
57
52
  React.createElement("div", { className: `cart-main-wrap` },
58
53
  React.createElement("div", { className: `left-panel-wrap panel` }, children),
59
54
  React.createElement("div", { className: `right-panel-wrap panel ${confirmation ? 'display-none-wrap' : ''}` }, !confirmation && !addressLoading && !loading ? (React.createElement("div", { className: `max-width-wrapper sticky-wrap` },
60
- React.createElement(Text, { className: `account-p account-p2 account-font-bold account-primary-color1 sticky-wrap-title`, text: `account.cart_checkout.orderSummary` }),
61
- React.createElement("div", { className: `od-line` }),
62
- React.createElement("div", { className: `od-item-wrap` },
63
- React.createElement(Text, { className: `account-p account-p2 account-font-regular account-primary-color1 sticky-wrap-subtotal`, text: `account.cart_checkout.subtotal` }),
64
- React.createElement(Text, { className: `account-p account-p2 account-font-regular account-primary-color1 sticky-wrap-currency`, text: itemsCount ? handlePriceCheckFunc(subtotal, currency) : `0 ${currency}` })),
65
- user && useBalance ? (React.createElement("div", { className: `od-item-wrap` },
66
- React.createElement(Text, { className: `account-p account-p2 account-font-regular account-primary-color1`, text: `account.balance_promotions.muramoney` }),
67
- React.createElement(Text, { className: `account-p account-p2 account-font-regular account-primary-color1 balance-text-block`, text: `-${handlePriceCheckFunc(useBalance, currency)}` }))) : null,
68
- user && discount ? (React.createElement("div", { className: `od-item-wrap` },
69
- React.createElement(Text, { className: `account-p account-p2 account-font-regular account-primary-color1`, text: `account.order_balance.discount` }),
70
- React.createElement(Text, { className: `account-p account-p2 account-font-regular account-primary-color1 balance-text-block`, text: `-${handlePriceCheckFunc(discount, currency)}` }))) : null,
71
- React.createElement("div", { className: `od-item-wrap` },
72
- React.createElement(Text, { className: `account-p account-p2 account-font-regular account-primary-color1 sticky-wrap-shipping`, text: `account.address_management.shipping` }),
73
- React.createElement(Text, { className: `account-p account-p2 account-font-regular account-primary-color1 sticky-wrap-shipping-cost`, text: `${String(shippingCost).toLowerCase() === 'free' || shippingCost === '-' ? shippingCost : `${numToLocalString(shippingCost)} ${currency}`}` })),
74
- React.createElement("div", { className: `od-item-wrap` },
75
- React.createElement(Text, { className: `account-p account-p2 account-font-bold account-primary-color1 sticky-wrap-total`, text: `account.order_balance.total` }),
76
- React.createElement(Text, { className: `account-p account-p2 account-font-bold account-primary-color1 sticky-wrap-currency2`, text: itemsCount ? handlePriceCheckFunc(total, currency) : `0 ${currency}` })),
77
- !isCheckoutPage ? (React.createElement(FreeShippingComp, { currency: currency, shippingCost: shippingCost, shippingCostValue: shippingCostValue, freeShippingRange: freeShippingRange })) : null,
78
- React.createElement(CollapseContainer, { className: 'collapse-container-wrapper' },
79
- React.createElement("div", { ref: innerCollapseRef },
80
- React.createElement(BalanceComp, { getItemCount: itemsCount, balance: user?.balance || 0, currency: currency, balanceHandler: handleBalance, useBalance: useBalance }),
81
- React.createElement(PromoCodeComp, { getItemCount: itemsCount, promotionHandler: handlePromotion, usePromotion: usePromotion, appliedPromotions: appliedPromotions }))),
82
- isCheckoutPage && typeof isShipping === 'boolean' && !isShipping ? React.createElement(CommentComp, { fillCheckoutData: fillCheckoutData }) : null,
83
- 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))))));
55
+ React.createElement("div", { className: 'panel-block' },
56
+ React.createElement(Text, { className: `account-p account-p2 account-font-bold account-primary-color1 sticky-wrap-title`, text: `account.cart_checkout.orderSummary` }),
57
+ React.createElement("div", { className: `od-line` }),
58
+ React.createElement("div", { className: 'scroll-block' },
59
+ React.createElement("div", { className: 'scroll-content' },
60
+ React.createElement("div", { className: `od-item-wrap` },
61
+ React.createElement(Text, { className: `account-p account-p2 account-font-regular account-primary-color1 sticky-wrap-subtotal`, text: `account.cart_checkout.subtotal` }),
62
+ React.createElement(Text, { className: `account-p account-p2 account-font-regular account-primary-color1 sticky-wrap-currency`, text: itemsCount ? handlePriceCheckFunc(subtotal, currency) : `0 ${currency}` })),
63
+ user && useBalance ? (React.createElement("div", { className: `od-item-wrap` },
64
+ React.createElement(Text, { className: `account-p account-p2 account-font-regular account-primary-color1`, text: `account.balance_promotions.muramoney` }),
65
+ React.createElement(Text, { className: `account-p account-p2 account-font-regular account-primary-color1 balance-text-block`, text: `-${handlePriceCheckFunc(useBalance, currency)}` }))) : null,
66
+ user && discount ? (React.createElement("div", { className: `od-item-wrap` },
67
+ React.createElement(Text, { className: `account-p account-p2 account-font-regular account-primary-color1`, text: `account.order_balance.discount` }),
68
+ React.createElement(Text, { className: `account-p account-p2 account-font-regular account-primary-color1 balance-text-block`, text: `-${handlePriceCheckFunc(discount, currency)}` }))) : null,
69
+ React.createElement("div", { className: `od-item-wrap` },
70
+ React.createElement(Text, { className: `account-p account-p2 account-font-regular account-primary-color1 sticky-wrap-shipping`, text: `account.address_management.shipping` }),
71
+ 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}`}` })),
72
+ React.createElement("div", { className: `od-item-wrap` },
73
+ React.createElement(Text, { className: `account-p account-p2 account-font-bold account-primary-color1 sticky-wrap-total`, text: `account.order_balance.total` }),
74
+ React.createElement(Text, { className: `account-p account-p2 account-font-bold account-primary-color1 sticky-wrap-currency2`, text: itemsCount ? handlePriceCheckFunc(total, currency) : `0 ${currency}` })),
75
+ React.createElement(GiftComp, null),
76
+ React.createElement(FreeShippingComp, null),
77
+ React.createElement(CollapseContainer, { className: 'collapse-container-wrapper' },
78
+ React.createElement("div", { ref: innerCollapseRef },
79
+ React.createElement(BalanceComp, null),
80
+ React.createElement(PromoCodeComp, null))),
81
+ isCheckoutPage && typeof isShipping === 'boolean' && !isShipping ? React.createElement(CommentComp, null) : null,
82
+ 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))))));
84
83
  });
85
84
  export default TotalCheckout;
package/dist/components/TotalCheckout/style.js CHANGED
@@ -6,7 +6,7 @@ const TotalCheckoutStyle = styled.section `
6
6
  --account_cartMainWrapPadTop: var(--sp8x);
7
7
  --account_leftPanelWrapWidth: calc(100% - var(--account_rightPanelWrapWidth));
8
8
 
9
- /* //! size text var */
9
+ /* //! Size text var */
10
10
  --account_textSize: var(--account_p4);
11
11
  --account_lineHeightSize: var(--account_lineHeight);
12
12
 
@@ -191,13 +191,27 @@ const TotalCheckoutStyle = styled.section `
191
191
  margin-top: var(--account_commentMarginTop);
192
192
  }
193
193
 
194
+ /* //! Scroll logic */
195
+ .scroll-block {
196
+ overflow-x: hidden;
197
+ overflow-y: auto;
198
+ max-height: calc(100vh - var(--sp27x));
199
+
200
+ scrollbar-width: none;
201
+ -ms-overflow-style: none;
202
+
203
+ &::-webkit-scrollbar {
204
+ display: none;
205
+ }
206
+ }
207
+
194
208
  @media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXLMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeL}) {
195
209
  --account_distance: var(--sp8x);
196
210
  /* --account_rightPanelWrapWidth: var(--sp66x); */
197
211
  --account_rightPanelWrapWidth: 29.21%;
198
212
  --account_cartMainWrapPadTop: var(--sp5x);
199
213
 
200
- //! Right Layout Sizes
214
+ /* //! Right Layout Sizes */
201
215
  --account_odLineMTop: var(--sp2x);
202
216
  --account_odLineMBot: var(--sp4x);
203
217
  --account_itemMTop: var(--sp2x);
@@ -216,7 +230,7 @@ const TotalCheckoutStyle = styled.section `
216
230
  --account_rightPanelWrapWidth: 27.67%;
217
231
  --account_cartMainWrapPadTop: var(--sp5x);
218
232
 
219
- //! Right Layout Sizes
233
+ /* //! Right Layout Sizes */
220
234
  --account_odLineMTop: var(--sp2x);
221
235
  --account_odLineMBot: var(--sp4x);
222
236
  --account_itemMTop: var(--sp2x);
@@ -235,7 +249,7 @@ const TotalCheckoutStyle = styled.section `
235
249
  --account_rightPanelWrapWidth: 29.07%;
236
250
  --account_cartMainWrapPadTop: var(--sp4x);
237
251
 
238
- //! Right Layout Sizes
252
+ /* //! Right Layout Sizes */
239
253
  --account_odLineMTop: var(--sp2x);
240
254
  --account_odLineMBot: var(--sp3x);
241
255
  --account_itemMTop: var(--sp2x);
@@ -254,7 +268,7 @@ const TotalCheckoutStyle = styled.section `
254
268
  --account_rightPanelWrapWidth: 29.68%;
255
269
  --account_cartMainWrapPadTop: var(--sp4x);
256
270
 
257
- //! Right Layout Sizes
271
+ /* //! Right Layout Sizes */
258
272
  --account_odLineMTop: var(--sp2x);
259
273
  --account_odLineMBot: var(--sp3x);
260
274
  --account_itemMTop: var(--sp2x);
@@ -273,7 +287,7 @@ const TotalCheckoutStyle = styled.section `
273
287
  --account_rightPanelWrapWidth: 30.9%;
274
288
  --account_cartMainWrapPadTop: var(--sp4x);
275
289
 
276
- //! Right Layout Sizes
290
+ /* //! Right Layout Sizes */
277
291
  --account_odLineMTop: var(--sp2x);
278
292
  --account_odLineMBot: var(--sp3x);
279
293
  --account_itemMTop: var(--sp1x);
@@ -292,7 +306,7 @@ const TotalCheckoutStyle = styled.section `
292
306
  --account_leftPanelWrapWidth: 100%;
293
307
  --account_cartMainWrapPadTop: var(--sp4x);
294
308
 
295
- //! Right Layout Sizes
309
+ /* //! Right Layout Sizes */
296
310
  --account_odLineMTop: var(--sp2x);
297
311
  --account_odLineMBot: var(--sp3x);
298
312
  --account_itemMTop: var(--sp1x);
@@ -317,7 +331,7 @@ const TotalCheckoutStyle = styled.section `
317
331
  --account_leftPanelWrapWidth: 100%;
318
332
  --account_cartMainWrapPadTop: var(--sp4x);
319
333
 
320
- //! Right Layout Sizes
334
+ /* //! Right Layout Sizes */
321
335
  --account_odLineMTop: var(--sp2x);
322
336
  --account_odLineMBot: var(--sp3x);
323
337
  --account_itemMTop: var(--sp1x);
package/dist/modules/account/AccountBalanceTemplate/HeroBalance/ProgressBalance/index.js CHANGED
@@ -13,15 +13,11 @@ const ProgressBalance = ({ progress, balance, nextStatusValue, nextStatusTitle,
13
13
  React.createElement(Text, { className: 'account-primary-color1 account-p account-p4 first-letter balance-title', text: 'account.balance_promotions.balance' }),
14
14
  React.createElement(Text, { className: 'account-primary-color1 account-h5 first-letter balance-value' }, typeof balance == 'number' ? handlePriceCheckFunc(balance, currency) : balance))) : null),
15
15
  nextStatusValue ? (React.createElement("div", { className: 'wrapper-next-status' },
16
- React.createElement(Text, { className: 'account-primary-color1 account-p account-p4 text-center next-status-text' },
17
- translate('account.balance_promotions.balanceNextStatusDescription1'),
18
- "\u00A0",
19
- React.createElement(Text, { className: 'account-font-medium next-status-value', tag: 'span' },
16
+ React.createElement(Text, { className: 'account-primary-color1 account-p account-p4 text-center next-status-text' }, translate('account.balance_promotions.balanceNextStatusDescription', {
17
+ nextStatusValue: (React.createElement("span", { className: 'account-font-medium next-status-value' },
20
18
  typeof nextStatusValue == 'number' ? handlePriceCheckFunc(nextStatusValue, '').trim() : nextStatusValue,
21
- iconValue || null),
22
- "\u00A0",
23
- translate('account.balance_promotions.balanceNextStatusDescription2'),
24
- "\u00A0",
25
- React.createElement(Text, { tag: 'span', className: 'account-secondary-color9 account-font-medium next-status-title', text: `account.user_status.${nextStatusTitle}` })))) : null));
19
+ iconValue || null)),
20
+ nextStatusTitle: React.createElement("span", { className: 'account-secondary-color9 account-font-medium next-status-title' }, translate(`account.user_status.${nextStatusTitle}`)),
21
+ })))) : null));
26
22
  };
27
23
  export default ProgressBalance;
package/dist/modules/account/AccountBalanceTemplate/HeroBalance/index.js CHANGED
@@ -14,12 +14,7 @@ const HeroBalance = ({ iconValue, balance, cashback, progress, totalSpent, nextS
14
14
  React.createElement("div", { className: 'inner-wrapper-left-bar' },
15
15
  React.createElement(Text, { className: 'account-primary-color1 account-font-medium account-p account-p3 first-letter status-title', text: 'account.balance_promotions.balanceStatus' }),
16
16
  React.createElement(Text, { className: 'account-primary-color1 account-font-medium account-h5 first-letter text-title', text: `account.user_status.${title}` }),
17
- description && (React.createElement(Text, { className: 'account-primary-color1 account-p account-p2 first-letter description-status' },
18
- translate(description.description1),
19
- " ",
20
- cashback + '%',
21
- " ",
22
- translate(description.description2))),
17
+ description && React.createElement(Text, { className: 'account-primary-color1 account-p account-p2 first-letter description-status' }, translate(description.description, { cashback: cashback })),
23
18
  React.createElement("div", { className: 'wrapper-information-payment' }, dataInformation.map((item, i, arr) => {
24
19
  return ((item || item == 0) && (React.createElement(Text, { key: i, className: 'account-primary-color1 account-p account-p3 first-letter account-font-medium info-text' },
25
20
  translate(dataInformationTitle[i]),