@weareconceptstudio/account 0.5.3 → 0.5.5

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/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, 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, { type: 'submit', btnType: `promo-code-version`, text: `account.general_actions.add` })))) }))) : 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,40 +14,10 @@ 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),
@@ -60,12 +30,12 @@ const TotalCheckout = memo(({ isShipping, children, confirmation, buttonProps })
                             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,
+                            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}`}` })),
@@ -74,11 +44,10 @@ const TotalCheckout = memo(({ isShipping, children, confirmation, buttonProps })
                                 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),
-                            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,
+                            user ? (React.createElement(CollapseContainer, { className: 'collapse-container-wrapper' },
+                                React.createElement(PromoCodeComp, null),
+                                React.createElement(BalanceComp, 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

@@ -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;
 				}
 			}
 		}
@@ -192,7 +196,7 @@ const TotalCheckoutStyle = styled.section `
 	}
 
 	/* //! Scroll logic */
-	.scroll-block {
+	/* .scroll-block {
 		overflow-x: hidden;
 		overflow-y: auto;
 		max-height: calc(100vh - var(--sp27x));
@@ -203,7 +207,7 @@ const TotalCheckoutStyle = styled.section `
 		&::-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);

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

@@ -0,0 +1,49 @@
+import React, { memo } from 'react';
+import { handlePriceCheckFunc, Image, Text, useTranslation } 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();
+    const { translate } = useTranslation();
+    return (React.createElement("div", { className: `item-wrap user-select-none` },
+        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.color ? (React.createElement("div", { className: `right-first-item-wrap` },
+                        React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color1`, text: `account.general_actions.color` }),
+                        "\u00A0",
+                        React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color1 capitalize`, text: data.color }))) : 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.size ? (React.createElement("div", { className: `right-second-item-wrap` },
+                        React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color1`, text: `account.general_actions.size` }),
+                        "\u00A0",
+                        React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color1`, text: data.size }))) : data.product.short_info_2 ? (React.createElement("div", { className: `right-second-item-wrap` },
+                        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("div", { className: 'wrapper-discount' },
+                    data.discount ? React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color2 discount-text` }, translate('account.order_balance.discountWithSymbol', { discount: data.discount })) : null,
+                    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("div", { className: 'wrapper-discount' },
+                            data.discount ? React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color2 discount-text` }, translate('account.order_balance.discountWithSymbol', { discount: data.discount })) : null,
+                            React.createElement(Text, { className: `account-p account-p3 account-font-regular account-primary-color2 line-through value align-right cart-total1`, text: handlePriceCheckFunc(data.total, currency) })))) : (React.createElement(Text, { className: `account-p account-p3 account-font-bold account-primary-color1 align-right cart-total2`, text: handlePriceCheckFunc(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;

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

@@ -0,0 +1,46 @@
+import React, { memo } from 'react';
+import { handlePriceCheckFunc, Image, Text, useTranslation } from '@weareconceptstudio/core';
+import { AccountButton, AccountCounter } from '../../../../components';
+import { useAccountContext } from '../../../../AccountProvider';
+import { useCheckoutContext } from '../../../checkout';
+import { defaultIconGift } from '../util';
+const ItemMobile = memo(({ data, select }) => {
+    const { handleProductClick, currency } = useAccountContext();
+    const { translate } = useTranslation();
+    const { checkoutData, setCheckGift } = useCheckoutContext();
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { className: `mobile-cart-item-wrap user-select-none` },
+            React.createElement("div", { className: `mobile-cart-item-inner-wrap` },
+                React.createElement("div", { className: `mobile-image-wrap` },
+                    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: `mobile-info-wrap` },
+                    React.createElement(AccountButton, { text: data.product.name, btnType: `green-large-text`, className: `capitalize mobile-info-wrap-title`, onClick: () => handleProductClick(data.product) }),
+                    data.color ? (React.createElement("div", { className: `mobile-info-item` },
+                        React.createElement(Text, { className: `account-p account-p3 account-font-bold account-primary-color1`, text: `account.general_actions.color` }),
+                        "\u00A0",
+                        React.createElement(Text, { className: `account-p account-p3 account-font-regular account-primary-color1 capitalize`, text: data.color }))) : data.product.short_info_1 ? (React.createElement("div", { className: 'mobile-info-item' },
+                        React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color1 mobile-short-info1`, text: data.product.short_info_1 }))) : null,
+                    data.size ? (React.createElement("div", { className: `mobile-info-item` },
+                        React.createElement(Text, { className: `account-p account-p3 account-font-bold account-primary-color1`, text: `account.general_actions.size` }),
+                        "\u00A0",
+                        React.createElement(Text, { className: `account-p account-p3 account-font-regular account-primary-color1`, text: data.size }))) : data.product.short_info_2 ? (React.createElement("div", { className: 'mobile-info-item' },
+                        React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color1 mobile-short-info2`, text: data.product.short_info_2 }))) : null,
+                    React.createElement("div", { className: `mobile-total-price-wrap flex-box` },
+                        data.sale_total && !data.is_gift ? (React.createElement("div", { className: 'mobile-total-price-flex-block' },
+                            React.createElement(Text, { className: `account-p account-p3 account-font-medium account-secondary-color2 mobile-total-discounted-price`, text: handlePriceCheckFunc(data.sale_total, currency) }),
+                            React.createElement("div", { className: 'wrapper-discount' },
+                                data.discount ? React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color2 discount-text` }, translate('account.order_balance.discountWithSymbol', { discount: data.discount })) : null,
+                                React.createElement(Text, { className: `account-p account-p3 account-font-regular account-primary-color2 line-through mobile-total-price price-discount`, text: handlePriceCheckFunc(data.total, currency) })))) : (React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color1 mobile-total-price2`, text: handlePriceCheckFunc(data.is_gift ? 0 : data.total, currency) })),
+                        select ? (React.createElement("div", { className: `inner-container` }, !data.product.out_of_stock && !data.is_gift ? (React.createElement(AccountCounter, { productId: data.product.id })) : data.is_gift ? (React.createElement("div", { className: 'wrapper-gift-button' }, checkoutData.checkGift ? (React.createElement(AccountCounter, { maxQty: 1, productId: -1, isGift: data.is_gift })) : (React.createElement(AccountButton, { className: `capitalize button-gift`, text: 'account.general_actions.restore', onClick: () => {
+                                setCheckGift();
+                            } })))) : (React.createElement("div", { className: `in-block` },
+                            React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color1`, text: 'account.general_actions.outOfStock' }))))) : (React.createElement("div", { className: `in-block` },
+                            React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color1 mobile-quantity-with-symbol2` },
+                                translate('account.order_balance.quantity'),
+                                ":"),
+                            "\u00A0",
+                            React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color1 mobile-quantity2`, text: data.qty }))))))),
+        React.createElement("div", { className: 'line' })));
+});
+export default ItemMobile;

package/dist/modules/cart/{SimpleItems → CartItems}/index.js

@@ -1,18 +1,16 @@
-import React, { memo, useLayoutEffect, useMemo } from 'react';
+import React, { memo, useMemo } from 'react';
 import { Text, useUi } from '@weareconceptstudio/core';
 //* Components
 import Item from './Item';
 import ItemMobile from './ItemMobile';
 import { AccountButton } from '../../../components';
-import { useAccountContext } from '../../../AccountProvider';
 //* Style
 import CartItemsStyle from './style';
 const CartItems = memo(({ data, className, title, smallFontSize, additionalParameters, actions }) => {
     const { winWidth } = useUi();
-    const { maxQty, currency } = useAccountContext();
     //! Store
     const itemsStore = useMemo(() => {
-        return winWidth >= 768 ? (React.createElement("div", { className: `order-items-table-wrap` },
+        return winWidth >= 768 ? (React.createElement("div", { className: `cart-items-table-wrap` },
             React.createElement("div", { className: `titles-wrap` },
                 React.createElement("div", { className: `title-wrap tl-col-1` },
                     React.createElement(Text, { className: `account-p account-p3 account-font-bold account-primary-color1 nowrap`, text: `account.order_balance.item` })),
@@ -24,19 +22,19 @@ const CartItems = memo(({ data, className, title, smallFontSize, additionalParam
                     React.createElement(Text, { className: `account-p account-p3 account-font-bold account-primary-color1 nowrap align-right`, text: `account.order_balance.total` }))),
             React.createElement("div", { className: `items-wrap` }, data?.length > 0
                 ? data.map((item, index) => {
-                    return (React.createElement(Item, { key: index, data: item, maxQty: maxQty, actions: actions, currency: currency, isGift: item.is_gift, isLast: data.length - 1 == index, select: additionalParameters.select, remove: additionalParameters.remove, edit: additionalParameters.edit.item }));
+                    return (React.createElement(Item, { key: index, data: item, actions: actions, isLast: data.length - 1 == index, select: additionalParameters.select, remove: additionalParameters.remove }));
                 })
-                : null))) : (React.createElement("div", { className: `mobile-order-items-table-wrap` }, data?.length > 0
+                : null))) : (React.createElement("div", { className: `mobile-cart-items-table-wrap` }, data?.length > 0
             ? data.map((item, index) => {
-                return (React.createElement(ItemMobile, { key: index, data: item, maxQty: maxQty, actions: actions, currency: currency, isGift: item.is_gift, select: additionalParameters.select, remove: additionalParameters.remove, edit: additionalParameters.edit.item }));
+                return (React.createElement(ItemMobile, { key: index, data: item, select: additionalParameters.select }));
             })
             : null));
-    }, [winWidth, data, additionalParameters, currency, actions, maxQty]);
+    }, [winWidth, data, additionalParameters, actions]);
     return (React.createElement(CartItemsStyle, { className: className || '' },
         additionalParameters.edit.list ? (React.createElement("div", { className: `title-edit-wrapper` },
             React.createElement(Text, { className: `account-p ${smallFontSize ? 'account-p2' : 'account-p1'} account-font-bold account-primary-color1 cart-items-title2-version`, text: title }),
             React.createElement(AccountButton, { url: '/cart/', btnType: `green-small-text`, className: 'cart-items-edit-btn', text: `account.cart_checkout.editCart` }))) : (React.createElement(Text, { className: `account-p ${smallFontSize ? 'account-p2' : 'account-p1'} account-font-bold account-primary-color1 cart-items-title1-version`, text: title })),
-        additionalParameters.horizontalLine ? React.createElement("div", { className: `order-items-line` }) : null,
+        additionalParameters.horizontalLine ? React.createElement("div", { className: `cart-items-line` }) : null,
         itemsStore));
 });
 export default CartItems;