@weareconceptstudio/account 0.5.2 → 0.5.4

package/dist/components/AccountCounter/index.d.ts

@@ -1,6 +1,8 @@
 export default AccountCounter;
-declare function AccountCounter({ productId, qty }: {
+declare function AccountCounter({ productId, qty, isGift, maxQty }: {
     productId: any;
     qty?: number;
+    isGift: any;
+    maxQty: any;
 }): React.JSX.Element;
 import React from 'react';

package/dist/components/AccountCounter/index.js

@@ -1,15 +1,17 @@
 import React, { useState, useCallback, useEffect } from 'react';
 import { Text, debounce } from '@weareconceptstudio/core';
 import { useAccountContext } from '../../AccountProvider';
+import { useCheckoutContext } from '../../modules';
 //* Style
 import AccountCounterStyle from './style';
-const AccountCounter = ({ productId, qty = 1 }) => {
+const AccountCounter = ({ productId, qty = 1, isGift, maxQty }) => {
     const { useCart } = useAccountContext();
     const { toggleCartItem, items } = useCart();
+    const { setCheckGift } = useCheckoutContext();
     //! State
     const [count, setCount] = useState(qty);
     useEffect(() => {
-        setCount(items.find((item) => item.product.id == productId)?.qty || qty);
+        setCount(items.find((item) => item.product.id == productId && !item.is_gift)?.qty || qty);
     }, [items]);
     const updateCartServer = useCallback((quantity) => {
         toggleCartItem({
@@ -22,7 +24,7 @@ const AccountCounter = ({ productId, qty = 1 }) => {
         e.stopPropagation();
         const newCount = type == 'inc' ? count + 1 : count - 1;
         setCount(newCount);
-        debouncedUpdateCartServer(newCount);
+        isGift ? (newCount == 0 ? setCheckGift() : null) : debouncedUpdateCartServer(newCount);
     };
     return (React.createElement(AccountCounterStyle, { onClick: (e) => e.stopPropagation(), className: `counter-block ${count == 0 ? 'opacity-zero pointer-none' : ''}` },
         React.createElement("div", { className: 'counter' },
@@ -30,7 +32,7 @@ const AccountCounter = ({ productId, qty = 1 }) => {
                 React.createElement("svg", { fill: 'none', viewBox: '0 0 13 3', className: `minus`, xmlns: 'http://www.w3.org/2000/svg' },
                     React.createElement("path", { d: 'M0 1.5H12', strokeWidth: '2' }))),
             React.createElement(Text, { className: `p p5 font-montserrat-arm-medium count` }, `${count}`),
-            React.createElement("div", { onClick: (e) => handleAddToCart(e, 'inc'), className: `c-icon-block ${count == 99 ? 'disable' : ''}` },
+            React.createElement("div", { onClick: (e) => handleAddToCart(e, 'inc'), className: `c-icon-block ${count >= maxQty || count == 99 ? 'disable' : ''}` },
                 React.createElement("svg", { fill: 'none', className: `plus`, viewBox: '0 0 12 12', xmlns: 'http://www.w3.org/2000/svg' },
                     React.createElement("path", { d: 'M0 6H12', strokeWidth: '2' }),
                     React.createElement("path", { d: 'M6 12L6 0', strokeWidth: '2' }))))));

package/dist/components/TotalCheckout/BalanceComp/index.d.ts

@@ -1,5 +1,3 @@
 export default BalanceComp;
-declare function BalanceComp({ isBalance }: {
-    isBalance?: boolean;
-}): React.JSX.Element;
+declare function BalanceComp(): React.JSX.Element;
 import React from 'react';

package/dist/components/TotalCheckout/BalanceComp/index.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React from 'react';
 import { Text, CollapseItem, handlePriceCheckFunc, useTranslation } from '@weareconceptstudio/core';
 import { FormBuilder } from '@weareconceptstudio/form';
 import { useAccountContext } from '../../../AccountProvider';
@@ -7,35 +7,31 @@ import AccountButton from '../../AccountButton';
 import { balanceFields } from './utils';
 //* Style
 import BalanceCompStyle from './style';
-const BalanceComp = ({ isBalance = true }) => {
+const BalanceComp = () => {
     const { translate } = useTranslation();
     const { useCart, useUser } = useAccountContext();
     const { currency, itemsCount, useBalance } = useCart();
     const { fillCart } = useCheckoutContext();
     const { user } = useUser();
-    const balance = user?.balance || 0;
-    const [disable, setDisable] = useState(false);
     const handleBalance = (amount) => {
         fillCart('useBalance', amount);
     };
     const onFinish = (values) => {
-        setDisable(true);
+        if (!user || !user?.balance)
+            return;
         handleBalance(values.balance);
     };
-    return isBalance ? (React.createElement(BalanceCompStyle, { className: `collapse-distance ${itemsCount && balance ? ' ' : 'disable'}` },
-        React.createElement(CollapseItem, { disable: useBalance || disable, title: React.createElement(React.Fragment, null,
+    return (React.createElement(BalanceCompStyle, { className: `collapse-distance ${itemsCount && user.balance ? '' : 'disable'}` },
+        React.createElement(CollapseItem, { title: React.createElement(React.Fragment, null,
                 React.createElement("div", { className: 'inner-wrapper-icon' },
                     React.createElement("svg", { width: '12', height: '12', fill: 'none', viewBox: '0 0 12 12', xmlns: 'http://www.w3.org/2000/svg' },
                         React.createElement("path", { d: 'M0 6H12', stroke: 'black', strokeWidth: '2' }),
                         React.createElement("path", { d: 'M6 12L6 0', stroke: 'black', strokeWidth: '2' }))),
-                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` },
+                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` },
                 React.createElement(Text, { className: 'account-p account-p4 account-primary-color2 account-font-medium balance-success-text' }, handlePriceCheckFunc(useBalance, currency)),
-                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);
-                        setDisable(false);
-                    } }))) : (React.createElement(FormBuilder, { onSubmit: onFinish, fields: balanceFields, className: `balance-block`, formOptions: {
+                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: {
                     className: 'balance-container',
                 } },
-                React.createElement(AccountButton, { text: `account.general_actions.add`, type: 'submit', btnType: `balance-version` })))) }))) : null;
+                React.createElement(AccountButton, { type: 'submit', disabled: !user.balance, btnType: `balance-version`, text: `account.general_actions.add` })))) })));
 };
 export default BalanceComp;

package/dist/components/TotalCheckout/CommentComp/index.d.ts

@@ -1,3 +1,5 @@
 export default CommentComp;
-declare function CommentComp(): React.JSX.Element;
+declare function CommentComp({ isShipping }: {
+    isShipping: any;
+}): React.JSX.Element;
 import React from 'react';

package/dist/components/TotalCheckout/CommentComp/index.js

@@ -3,15 +3,15 @@ import { CollapseContainer, CollapseItem, Text } from '@weareconceptstudio/core'
 import { Input } from '@weareconceptstudio/form';
 import { useCheckoutContext } from '../../../modules';
 import CommentCompStyle from './style';
-const CommentComp = () => {
-    const { fillCheckoutData } = useCheckoutContext();
-    return (React.createElement(CommentCompStyle, { className: 'collapse-distance' },
+const CommentComp = ({ isShipping }) => {
+    const { fillCheckoutData, isCheckoutPage } = useCheckoutContext();
+    return isCheckoutPage && typeof isShipping === 'boolean' && !isShipping ? (React.createElement(CommentCompStyle, { className: 'collapse-distance' },
         React.createElement(CollapseContainer, null,
             React.createElement(CollapseItem, { status: 'open', title: React.createElement(React.Fragment, null,
                     React.createElement("div", { className: 'inner-wrapper-icon' },
                         React.createElement("svg", { width: '12', height: '12', fill: 'none', viewBox: '0 0 12 12', xmlns: 'http://www.w3.org/2000/svg' },
                             React.createElement("path", { d: 'M0 6H12', stroke: 'black', strokeWidth: '2' }),
                             React.createElement("path", { d: 'M6 12L6 0', stroke: 'black', strokeWidth: '2' }))),
-                    React.createElement(Text, { className: 'account-p account-p4 account-primary-color1 account-font-medium comment-text', text: 'account.order_balance.comment' })), description: React.createElement(Input.TextArea, { containerClassName: `comment-field`, placeholder: 'account.cart_checkout.checkoutCommentPlaceholder', onChange: (e) => fillCheckoutData('note', e.target.value), className: `account-p account-p3 account-font-regular account-primary-color1` }) }))));
+                    React.createElement(Text, { className: 'account-p account-p4 account-primary-color1 account-font-medium comment-text', text: 'account.order_balance.comment' })), description: React.createElement(Input.TextArea, { containerClassName: `comment-field`, placeholder: 'account.cart_checkout.checkoutCommentPlaceholder', onChange: (e) => fillCheckoutData('note', e.target.value), className: `account-p account-p3 account-font-regular account-primary-color1` }) })))) : null;
 };
 export default CommentComp;

package/dist/components/TotalCheckout/FreeShippingComp/index.js

@@ -1,18 +1,20 @@
 import React from 'react';
 import { handlePriceCheckFunc, useTranslation } from '@weareconceptstudio/core';
 import { useAccountContext } from '../../../AccountProvider';
+import { useCheckoutContext } from '../../../modules';
 //* Style
 import FreeShippingCompStyle from './style';
 const FreeShippingComp = () => {
     const { translate } = useTranslation();
     const { useCart } = useAccountContext();
+    const { isCheckoutPage } = useCheckoutContext();
     const { shippingCostValue, freeShippingRange, shippingCost, currency } = useCart();
-    return freeShippingRange ? (React.createElement(FreeShippingCompStyle, null,
+    return !isCheckoutPage ? (freeShippingRange ? (React.createElement(FreeShippingCompStyle, null,
         React.createElement("svg", { fill: 'none', viewBox: '0 0 24 24', xmlns: 'http://www.w3.org/2000/svg', className: 'free-shipping-comp-icon' },
             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' })),
         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,
         React.createElement("svg", { fill: 'none', viewBox: '0 0 16 16', xmlns: 'http://www.w3.org/2000/svg', className: 'free-shipping-comp-icon' },
             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' })),
-        React.createElement("span", { className: 'free-shipping-comp-attr' }, translate('account.notifications_messages.freeShippingSuccessText', { price: React.createElement("span", { className: 'range-value' }, handlePriceCheckFunc(shippingCostValue, currency)) })))) : null;
+        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;
 };
 export default FreeShippingComp;

package/dist/components/TotalCheckout/PromoCodeComp/index.d.ts

@@ -1,5 +1,3 @@
 export default PromoCodeComp;
-declare function PromoCodeComp({ isPromoCode }: {
-    isPromoCode?: boolean;
-}): React.JSX.Element;
+declare function PromoCodeComp(): React.JSX.Element;
 import React from 'react';

package/dist/components/TotalCheckout/PromoCodeComp/index.js

@@ -1,4 +1,4 @@
-import React, { useMemo, useState } from 'react';
+import React, { useMemo } from 'react';
 import { Text, CollapseItem } from '@weareconceptstudio/core';
 import { FormBuilder } from '@weareconceptstudio/form';
 import { useAccountContext } from '../../../AccountProvider';
@@ -8,35 +8,30 @@ import AppliedPromotion from './AppliedPromotion';
 import { promoCodeFields } from './utils';
 //* Style
 import PromoCodeCompStyle from './style';
-const PromoCodeComp = ({ isPromoCode = true }) => {
+const PromoCodeComp = () => {
     const { useCart } = useAccountContext();
     const { itemsCount, usePromotion, appliedPromotions } = useCart();
     const { fillCart } = useCheckoutContext();
-    const [disable, setDisable] = useState(false);
     const handlePromotion = (promotion) => {
         fillCart('usePromotion', promotion);
     };
     const onFinish = (values) => {
-        setDisable(true);
         handlePromotion(values.promo_code);
     };
     const promotions = useMemo(() => {
-        return appliedPromotions?.map((promotion) => React.createElement(AppliedPromotion, { ...promotion }));
+        return appliedPromotions?.map((promotion, index) => (React.createElement(AppliedPromotion, { key: index, ...promotion })));
     }, [appliedPromotions]);
-    return isPromoCode ? (React.createElement(PromoCodeCompStyle, { className: `collapse-distance ${itemsCount ? '' : 'disable'}` },
-        React.createElement(CollapseItem, { status: appliedPromotions?.length ? 'open' : 'close', disable: disable, title: React.createElement(React.Fragment, null,
+    return (React.createElement(PromoCodeCompStyle, { className: `collapse-distance ${itemsCount ? '' : 'disable'}` },
+        React.createElement(CollapseItem, { status: appliedPromotions?.length ? 'open' : 'close', title: React.createElement(React.Fragment, null,
                 React.createElement("div", { className: 'inner-wrapper-icon' },
                     React.createElement("svg", { xmlns: 'http://www.w3.org/2000/svg', width: '12', height: '12', viewBox: '0 0 12 12', fill: 'none' },
                         React.createElement("path", { d: 'M0 6H12', stroke: 'black', strokeWidth: '2' }),
                         React.createElement("path", { d: 'M6 12L6 0', stroke: 'black', strokeWidth: '2' }))),
                 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,
                 promotions,
-                usePromotion ? (React.createElement(AppliedPromotion, { name: usePromotion, onClick: () => {
-                        handlePromotion(null);
-                        setDisable(false);
-                    } })) : (React.createElement(FormBuilder, { onSubmit: onFinish, fields: promoCodeFields, className: `promo-code-block`, formOptions: {
+                usePromotion ? (React.createElement(AppliedPromotion, { name: usePromotion, onClick: () => handlePromotion(null) })) : (React.createElement(FormBuilder, { onSubmit: onFinish, fields: promoCodeFields, className: `promo-code-block`, formOptions: {
                         className: 'promo-code-container',
                     } },
-                    React.createElement(AccountButton, { text: `account.general_actions.add`, type: 'submit', btnType: `promo-code-version` })))) }))) : null;
+                    React.createElement(AccountButton, { type: 'submit', btnType: `promo-code-version`, text: `account.general_actions.add` })))) })));
 };
 export default PromoCodeComp;

package/dist/components/TotalCheckout/index.js

@@ -1,4 +1,4 @@
-import React, { memo, useEffect, useRef } from 'react';
+import React, { memo } from 'react';
 import { Text, CollapseContainer, handlePriceCheckFunc, numToLocalString } from '@weareconceptstudio/core';
 import { useAccountContext } from '../../AccountProvider';
 import { useAddressContext, useCheckoutContext } from '../../modules';
@@ -14,68 +14,40 @@ import TotalCheckoutStyle from './style';
 import SkeletonTotalCheckout from './Skeleton';
 const TotalCheckout = memo(({ isShipping, children, confirmation, buttonProps }) => {
     const { useCart, useUser } = useAccountContext();
-    const { checkoutBtnDisabled, isCheckoutPage } = useCheckoutContext();
+    const { checkoutBtnDisabled } = useCheckoutContext();
     const { addressLoading } = useAddressContext();
     const { user } = useUser();
     const { itemsCount, shippingCost, total, subtotal, useBalance, loading, discount, currency } = useCart();
-    const innerCollapseRef = useRef(null);
-    //! disable keypress on input
-    useEffect(() => {
-        const handleKeyDown = (event) => {
-            if (event.key === 'Enter') {
-                event.preventDefault();
-            }
-        };
-        if ((!itemsCount || !user?.balance) && innerCollapseRef.current) {
-            let inputField = innerCollapseRef.current.querySelectorAll('.base-input');
-            if (inputField.length) {
-                [...inputField].forEach((item, i) => {
-                    if (!user?.balance && itemsCount && i == 1) {
-                        return;
-                    }
-                    else {
-                        item.addEventListener('keydown', handleKeyDown);
-                    }
-                });
-            }
-        }
-        return () => {
-            if ((!itemsCount || !user?.balance) && innerCollapseRef.current) {
-                const inputField = innerCollapseRef.current.querySelectorAll('.base-input');
-                [...inputField].map((item) => {
-                    item.removeEventListener('keydown', handleKeyDown);
-                });
-            }
-        };
-    });
     return (React.createElement(TotalCheckoutStyle, null,
         React.createElement("div", { className: `cart-main-wrap` },
             React.createElement("div", { className: `left-panel-wrap panel` }, children),
             React.createElement("div", { className: `right-panel-wrap panel ${confirmation ? 'display-none-wrap' : ''}` }, !confirmation && !addressLoading && !loading ? (React.createElement("div", { className: `max-width-wrapper sticky-wrap` },
-                React.createElement(Text, { className: `account-p account-p2 account-font-bold account-primary-color1 sticky-wrap-title`, text: `account.cart_checkout.orderSummary` }),
-                React.createElement("div", { className: `od-line` }),
-                React.createElement("div", { className: `od-item-wrap` },
-                    React.createElement(Text, { className: `account-p account-p2 account-font-regular account-primary-color1 sticky-wrap-subtotal`, text: `account.cart_checkout.subtotal` }),
-                    React.createElement(Text, { className: `account-p account-p2 account-font-regular account-primary-color1 sticky-wrap-currency`, text: itemsCount ? handlePriceCheckFunc(subtotal, currency) : `0 ${currency}` })),
-                user && useBalance ? (React.createElement("div", { className: `od-item-wrap` },
-                    React.createElement(Text, { className: `account-p account-p2 account-font-regular account-primary-color1`, text: `account.balance_promotions.muramoney` }),
-                    React.createElement(Text, { className: `account-p account-p2 account-font-regular account-primary-color1 balance-text-block`, text: `-${handlePriceCheckFunc(useBalance, currency)}` }))) : null,
-                user && discount ? (React.createElement("div", { className: `od-item-wrap` },
-                    React.createElement(Text, { className: `account-p account-p2 account-font-regular account-primary-color1`, text: `account.order_balance.discount` }),
-                    React.createElement(Text, { className: `account-p account-p2 account-font-regular account-primary-color1 balance-text-block`, text: `-${handlePriceCheckFunc(discount, currency)}` }))) : null,
-                React.createElement("div", { className: `od-item-wrap` },
-                    React.createElement(Text, { className: `account-p account-p2 account-font-regular account-primary-color1 sticky-wrap-shipping`, text: `account.address_management.shipping` }),
-                    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}`}` })),
-                React.createElement("div", { className: `od-item-wrap` },
-                    React.createElement(Text, { className: `account-p account-p2 account-font-bold account-primary-color1 sticky-wrap-total`, text: `account.order_balance.total` }),
-                    React.createElement(Text, { className: `account-p account-p2 account-font-bold account-primary-color1 sticky-wrap-currency2`, text: itemsCount ? handlePriceCheckFunc(total, currency) : `0 ${currency}` })),
-                React.createElement(GiftComp, null),
-                !isCheckoutPage ? React.createElement(FreeShippingComp, null) : null,
-                React.createElement(CollapseContainer, { className: 'collapse-container-wrapper' },
-                    React.createElement("div", { ref: innerCollapseRef },
-                        React.createElement(BalanceComp, null),
-                        React.createElement(PromoCodeComp, null))),
-                isCheckoutPage && typeof isShipping === 'boolean' && !isShipping ? React.createElement(CommentComp, null) : null,
-                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))))));
+                React.createElement("div", { className: 'panel-block' },
+                    React.createElement(Text, { className: `account-p account-p2 account-font-bold account-primary-color1 sticky-wrap-title`, text: `account.cart_checkout.orderSummary` }),
+                    React.createElement("div", { className: `od-line` }),
+                    React.createElement("div", { className: 'scroll-block' },
+                        React.createElement("div", { className: 'scroll-content' },
+                            React.createElement("div", { className: `od-item-wrap` },
+                                React.createElement(Text, { className: `account-p account-p2 account-font-regular account-primary-color1 sticky-wrap-subtotal`, text: `account.cart_checkout.subtotal` }),
+                                React.createElement(Text, { className: `account-p account-p2 account-font-regular account-primary-color1 sticky-wrap-currency`, text: itemsCount ? handlePriceCheckFunc(subtotal, currency) : `0 ${currency}` })),
+                            user && discount ? (React.createElement("div", { className: `od-item-wrap` },
+                                React.createElement(Text, { className: `account-p account-p2 account-font-regular account-primary-color1`, text: `account.order_balance.discount` }),
+                                React.createElement(Text, { className: `account-p account-p2 account-font-regular account-primary-color1 balance-text-block`, text: `-${handlePriceCheckFunc(discount, currency)}` }))) : null,
+                            user && useBalance ? (React.createElement("div", { className: `od-item-wrap` },
+                                React.createElement(Text, { className: `account-p account-p2 account-font-regular account-primary-color1`, text: `account.balance_promotions.muramoney` }),
+                                React.createElement(Text, { className: `account-p account-p2 account-font-regular account-primary-color1 balance-text-block`, text: `-${handlePriceCheckFunc(useBalance, currency)}` }))) : null,
+                            React.createElement("div", { className: `od-item-wrap` },
+                                React.createElement(Text, { className: `account-p account-p2 account-font-regular account-primary-color1 sticky-wrap-shipping`, text: `account.address_management.shipping` }),
+                                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}`}` })),
+                            React.createElement("div", { className: `od-item-wrap` },
+                                React.createElement(Text, { className: `account-p account-p2 account-font-bold account-primary-color1 sticky-wrap-total`, text: `account.order_balance.total` }),
+                                React.createElement(Text, { className: `account-p account-p2 account-font-bold account-primary-color1 sticky-wrap-currency2`, text: itemsCount ? handlePriceCheckFunc(total, currency) : `0 ${currency}` })),
+                            React.createElement(GiftComp, null),
+                            React.createElement(FreeShippingComp, null),
+                            user ? (React.createElement(CollapseContainer, { className: 'collapse-container-wrapper' },
+                                React.createElement(BalanceComp, null),
+                                React.createElement(PromoCodeComp, null))) : null,
+                            React.createElement(CommentComp, { isShipping: isShipping }),
+                            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))))));
 });
 export default TotalCheckout;

package/dist/components/TotalCheckout/style.js

@@ -6,7 +6,7 @@ const TotalCheckoutStyle = styled.section `
 	--account_cartMainWrapPadTop: var(--sp8x);
 	--account_leftPanelWrapWidth: calc(100% - var(--account_rightPanelWrapWidth));
 
-	/* //! size text var */
+	/* //! Size text var */
 	--account_textSize: var(--account_p4);
 	--account_lineHeightSize: var(--account_lineHeight);
 
@@ -176,9 +176,13 @@ const TotalCheckoutStyle = styled.section `
 		&.disable {
 			#collapse-description {
 				button {
-					pointer-events: none;
-					border-color: var(--account_primaryColor5);
-					color: var(--account_primaryColor5);
+					pointer-events: none !important;
+					border-color: var(--account_primaryColor5) !important;
+					color: var(--account_primaryColor5) !important;
+				}
+
+				.disabled {
+					opacity: 1 !important;
 				}
 			}
 		}
@@ -191,13 +195,27 @@ const TotalCheckoutStyle = styled.section `
 		margin-top: var(--account_commentMarginTop);
 	}
 
+	/* //! Scroll logic */
+	/* .scroll-block {
+		overflow-x: hidden;
+		overflow-y: auto;
+		max-height: calc(100vh - var(--sp27x));
+
+		scrollbar-width: none;
+		-ms-overflow-style: none;
+
+		&::-webkit-scrollbar {
+			display: none;
+		}
+	} */
+
 	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXLMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeL}) {
 		--account_distance: var(--sp8x);
 		/* --account_rightPanelWrapWidth: var(--sp66x); */
 		--account_rightPanelWrapWidth: 29.21%;
 		--account_cartMainWrapPadTop: var(--sp5x);
 
-		//! Right Layout Sizes
+		/* //! Right Layout Sizes */
 		--account_odLineMTop: var(--sp2x);
 		--account_odLineMBot: var(--sp4x);
 		--account_itemMTop: var(--sp2x);
@@ -216,7 +234,7 @@ const TotalCheckoutStyle = styled.section `
 		--account_rightPanelWrapWidth: 27.67%;
 		--account_cartMainWrapPadTop: var(--sp5x);
 
-		//! Right Layout Sizes
+		/* //! Right Layout Sizes */
 		--account_odLineMTop: var(--sp2x);
 		--account_odLineMBot: var(--sp4x);
 		--account_itemMTop: var(--sp2x);
@@ -235,7 +253,7 @@ const TotalCheckoutStyle = styled.section `
 		--account_rightPanelWrapWidth: 29.07%;
 		--account_cartMainWrapPadTop: var(--sp4x);
 
-		//! Right Layout Sizes
+		/* //! Right Layout Sizes */
 		--account_odLineMTop: var(--sp2x);
 		--account_odLineMBot: var(--sp3x);
 		--account_itemMTop: var(--sp2x);
@@ -254,7 +272,7 @@ const TotalCheckoutStyle = styled.section `
 		--account_rightPanelWrapWidth: 29.68%;
 		--account_cartMainWrapPadTop: var(--sp4x);
 
-		//! Right Layout Sizes
+		/* //! Right Layout Sizes */
 		--account_odLineMTop: var(--sp2x);
 		--account_odLineMBot: var(--sp3x);
 		--account_itemMTop: var(--sp2x);
@@ -273,7 +291,7 @@ const TotalCheckoutStyle = styled.section `
 		--account_rightPanelWrapWidth: 30.9%;
 		--account_cartMainWrapPadTop: var(--sp4x);
 
-		//! Right Layout Sizes
+		/* //! Right Layout Sizes */
 		--account_odLineMTop: var(--sp2x);
 		--account_odLineMBot: var(--sp3x);
 		--account_itemMTop: var(--sp1x);
@@ -292,7 +310,7 @@ const TotalCheckoutStyle = styled.section `
 		--account_leftPanelWrapWidth: 100%;
 		--account_cartMainWrapPadTop: var(--sp4x);
 
-		//! Right Layout Sizes
+		/* //! Right Layout Sizes */
 		--account_odLineMTop: var(--sp2x);
 		--account_odLineMBot: var(--sp3x);
 		--account_itemMTop: var(--sp1x);
@@ -317,7 +335,7 @@ const TotalCheckoutStyle = styled.section `
 		--account_leftPanelWrapWidth: 100%;
 		--account_cartMainWrapPadTop: var(--sp4x);
 
-		//! Right Layout Sizes
+		/* //! Right Layout Sizes */
 		--account_odLineMTop: var(--sp2x);
 		--account_odLineMBot: var(--sp3x);
 		--account_itemMTop: var(--sp1x);

package/dist/modules/account/AccountBalanceTemplate/HeroBalance/ProgressBalance/index.js

@@ -13,15 +13,11 @@ const ProgressBalance = ({ progress, balance, nextStatusValue, nextStatusTitle,
                 React.createElement(Text, { className: 'account-primary-color1 account-p account-p4 first-letter balance-title', text: 'account.balance_promotions.balance' }),
                 React.createElement(Text, { className: 'account-primary-color1 account-h5 first-letter balance-value' }, typeof balance == 'number' ? handlePriceCheckFunc(balance, currency) : balance))) : null),
         nextStatusValue ? (React.createElement("div", { className: 'wrapper-next-status' },
-            React.createElement(Text, { className: 'account-primary-color1 account-p account-p4 text-center next-status-text' },
-                translate('account.balance_promotions.balanceNextStatusDescription1'),
-                "\u00A0",
-                React.createElement(Text, { className: 'account-font-medium next-status-value', tag: 'span' },
+            React.createElement(Text, { className: 'account-primary-color1 account-p account-p4 text-center next-status-text' }, translate('account.balance_promotions.balanceNextStatusDescription', {
+                nextStatusValue: (React.createElement("span", { className: 'account-font-medium next-status-value' },
                     typeof nextStatusValue == 'number' ? handlePriceCheckFunc(nextStatusValue, '').trim() : nextStatusValue,
-                    iconValue || null),
-                "\u00A0",
-                translate('account.balance_promotions.balanceNextStatusDescription2'),
-                "\u00A0",
-                React.createElement(Text, { tag: 'span', className: 'account-secondary-color9 account-font-medium next-status-title', text: `account.user_status.${nextStatusTitle}` })))) : null));
+                    iconValue || null)),
+                nextStatusTitle: React.createElement("span", { className: 'account-secondary-color9 account-font-medium next-status-title' }, translate(`account.user_status.${nextStatusTitle}`)),
+            })))) : null));
 };
 export default ProgressBalance;

package/dist/modules/account/AccountBalanceTemplate/HeroBalance/index.js

@@ -14,12 +14,7 @@ const HeroBalance = ({ iconValue, balance, cashback, progress, totalSpent, nextS
                 React.createElement("div", { className: 'inner-wrapper-left-bar' },
                     React.createElement(Text, { className: 'account-primary-color1 account-font-medium account-p account-p3 first-letter status-title', text: 'account.balance_promotions.balanceStatus' }),
                     React.createElement(Text, { className: 'account-primary-color1 account-font-medium account-h5 first-letter text-title', text: `account.user_status.${title}` }),
-                    description && (React.createElement(Text, { className: 'account-primary-color1  account-p account-p2 first-letter description-status' },
-                        translate(description.description1),
-                        " ",
-                        cashback + '%',
-                        " ",
-                        translate(description.description2))),
+                    description && React.createElement(Text, { className: 'account-primary-color1 account-p account-p2 first-letter description-status' }, translate(description.description, { cashback: cashback })),
                     React.createElement("div", { className: 'wrapper-information-payment' }, dataInformation.map((item, i, arr) => {
                         return ((item || item == 0) && (React.createElement(Text, { key: i, className: 'account-primary-color1  account-p account-p3 first-letter account-font-medium info-text' },
                             translate(dataInformationTitle[i]),

package/dist/modules/account/AccountBalanceTemplate/HistoryBalance/index.js

@@ -25,7 +25,7 @@ const HistoryBalance = ({ linkEarnPage }) => {
     useEffect(() => {
         getHistory(currentPage);
     }, [currentPage]);
-    return data && data.length ? (React.createElement(HistoryBalanceStyle, null,
+    return data?.length > 0 ? (React.createElement(HistoryBalanceStyle, null,
         React.createElement("div", { className: 'wrapper-title-section-history' },
             React.createElement("div", { className: 'wrapper-history-link' },
                 React.createElement(Text, { className: 'account-primary-color1 account-font-medium account-p account-p1 first-letter title-section-history', text: 'account.balance_promotions.balanceRecentActivity' }),

package/dist/modules/account/AccountBalanceTemplate/index.js

@@ -18,10 +18,10 @@ const AccountBalanceTemplate = ({ iconValue, dataItem, linkEarnPage, className }
         });
     }, []);
     return dataBalance ? (React.createElement(AccountBalanceTemplateStyle, { className: className || '' },
-        React.createElement(HeroBalance, { currency: currency, iconValue: iconValue, nextStatusTitle: 'resident', balance: dataBalance.balance, title: dataBalance.info.status.toLowerCase(), cashback: dataBalance.cashback, progress: dataBalance.info.timeline, totalSpent: dataBalance.info.spent.current, nextStatusValue: dataBalance.info.spent.next, description: (() => {
+        React.createElement(HeroBalance, { currency: currency, iconValue: iconValue, nextStatusTitle: 'resident', balance: dataBalance.balance, cashback: dataBalance.cashback, progress: dataBalance.info.timeline, totalSpent: dataBalance.info.spent.current, title: dataBalance.info.status.toLowerCase(), nextStatusValue: dataBalance.info.spent.next, description: (() => {
                 if (dataItem) {
-                    const { description1, description2 } = dataItem.find((item) => item.name?.toLowerCase() === dataBalance.info.status?.toLowerCase()) || {};
-                    return { description1, description2 };
+                    const { description } = dataItem.find((item) => item.name?.toLowerCase() === dataBalance.info.status?.toLowerCase()) || {};
+                    return { description };
                 }
                 else {
                     return false;

package/dist/modules/auth/ForgotPasswordTemplate/index.js

@@ -60,9 +60,7 @@ const ForgotPasswordTemplate = ({ signInUrl = '/sign-in' }) => {
                         translate('account.notifications_messages.thankYou'),
                         "!"),
                     React.createElement("div", { className: 'recovery-wrap' },
-                        React.createElement(Text, { className: 'account-p account-p2 account-font-medium account-primary-color1 recovery-text', text: 'account.email_verification.recoveryText' }),
-                        "\u00A0",
-                        React.createElement(Text, { className: 'account-p account-p2 account-font-bold account-primary-color1 recovery-email', text: forgotState.email })),
+                        React.createElement(Text, { className: 'account-p account-p2 account-font-regular account-primary-color1 recovery-text text-center' }, translate('account.email_verification.recoveryText', { recoveryEmail: React.createElement("span", { className: 'account-p account-p2 account-font-medium account-primary-color1 recovery-email' }, forgotState.email) }))),
                     React.createElement("div", { className: 'try-again-wrap' },
                         React.createElement(Text, { onClick: handleTryAgain, text: `account.email_verification.resendNewLink`, className: `account-p account-p3 account-font-bold account-primary-color1 underline try-again-text ${forgotState.isBtnDisabled ? 'disabled' : ''}` }))),
                 React.createElement("div", { className: 'col-3 col-t-1 col-m-0' })))))));

package/dist/modules/cart/CartItems/Item/index.js

@@ -0,0 +1,38 @@
+import React, { memo } from 'react';
+import { handlePriceCheckFunc, Image, Text } from '@weareconceptstudio/core';
+import { AccountButton, AccountCounter } from '../../../../components';
+import { useAccountContext } from '../../../../AccountProvider';
+import { useCheckoutContext } from '../../../checkout';
+import { defaultIconGift } from '../util';
+const Item = memo(({ data, remove, select, isLast, actions }) => {
+    const { checkoutData, setCheckGift } = useCheckoutContext();
+    const { currency, handleProductClick } = useAccountContext();
+    return (React.createElement("div", { className: `item-wrap` },
+        React.createElement("div", { className: 'line' }),
+        React.createElement("div", { className: `item-inner-wrapper` },
+            React.createElement("div", { className: `col-item tl-col-1 col-item-1` },
+                React.createElement("div", { className: `image-wrapper` },
+                    data.is_gift ? React.createElement("div", { className: 'wrapper-gift-icon' }, defaultIconGift) : null,
+                    React.createElement(Image, { src: data.product.image.src, alt: data.product.image.alt })),
+                React.createElement("div", { className: `col-1-right-wrap` },
+                    React.createElement(AccountButton, { text: data.product?.name, btnType: `green-large-text`, className: `capitalize title-btn`, onClick: () => handleProductClick(data.product) }),
+                    data.product.short_info_1 ? (React.createElement("div", { className: `right-first-item-wrap` },
+                        React.createElement(Text, { className: `account-p account-p3 account-font-regular account-primary-color1`, text: data.product.short_info_1 }))) : null,
+                    data.product.short_info_2 ? (React.createElement("div", { className: `right-second-item-wrap` },
+                        React.createElement(Text, { className: `account-p account-p3 account-font-bold account-primary-color1`, text: data.product.short_info_2 }))) : null)),
+            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: () => {
+                    setCheckGift();
+                } })))) : (React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color1`, text: data.qty }))),
+            React.createElement("div", { className: `col-item tl-col-3 col-item-3 nowrap` }, data.product.sale_price && !data.is_gift ? (React.createElement("div", null,
+                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) }),
+                React.createElement(Text, { className: `account-p account-p3 account-font-regular account-primary-color2 line-through value align-right cart-price1`, text: handlePriceCheckFunc(data.product.price, currency) }))) : (React.createElement(Text, { className: `account-p account-p3 account-font-bold account-primary-color1 align-right cart-price2`, text: handlePriceCheckFunc(data.is_gift ? 0 : data.product.price, currency) }))),
+            React.createElement("div", { className: `col-item tl-col-4 col-item-4 nowrap` },
+                React.createElement("div", { className: `col-item-inner-wrap` },
+                    React.createElement("div", { className: `flex-end-wrap` }, data.sale_total && !data.is_gift ? (React.createElement("div", null,
+                        React.createElement(Text, { className: `account-p account-p3 account-font-bold account-secondary-color2 align-right cart-sale-total`, text: handlePriceCheckFunc(data.sale_total, currency) }),
+                        React.createElement(Text, { className: `account-p account-p3 account-font-regular account-primary-color2 line-through value align-right cart-total1`, text: `${data.total} ${currency}` }))) : (React.createElement(Text, { className: `account-p account-p3 account-font-bold account-primary-color1 align-right cart-total2`, text: `${data.is_gift ? 0 : data.total} ${currency}` }))),
+                    React.createElement("div", { className: `favorite-and-remove-wrap` }, remove && !data.is_gift && (React.createElement("div", { className: `remove-btn-wrap` },
+                        React.createElement(AccountButton, { btnType: `green-small-text`, className: 'cart-remove-btn', text: 'account.general_actions.remove', onClick: () => actions.delete({ productId: data.product.id }) }))))))),
+        isLast ? React.createElement("div", { className: 'line' }) : null));
+});
+export default Item;