@weareconceptstudio/account 0.5.8 → 0.6.0

package/dist/AccountProvider.d.ts

@@ -1,5 +1,5 @@
 export function useAccountContext(): any;
-export function AccountProvider({ fontFamily, shopUrl, children, maxQty, currency, addressType, addressFormFields, useUser, useCart, productPopup, productUrlPrefix }: {
+export function AccountProvider({ fontFamily, shopUrl, children, maxQty, currency, addressType, addressFormFields, useUser, productPopup, productUrlPrefix }: {
     fontFamily?: string;
     shopUrl?: string;
     children: any;
@@ -8,7 +8,6 @@ export function AccountProvider({ fontFamily, shopUrl, children, maxQty, currenc
     addressType: any;
     addressFormFields: any;
     useUser: any;
-    useCart: any;
     productPopup: any;
     productUrlPrefix: any;
 }): React.JSX.Element;

package/dist/AccountProvider.js

@@ -2,7 +2,7 @@ import React, { createContext, useCallback, useContext, useEffect } from 'react'
 import { useTranslation, useUi } from '@weareconceptstudio/core';
 import { ThemeProvider } from 'styled-components';
 import { AddressProvider } from './modules/address/AddressProvider';
-import { CheckoutProvider } from './modules/checkout/CheckoutProvider';
+import { CartProvider } from './modules/cart/CartProvider';
 //* Translations
 import translations from './translations';
 //* Styles
@@ -15,7 +15,7 @@ export const useAccountContext = () => {
     const context = useContext(AccountContext);
     return context;
 };
-export const AccountProvider = ({ fontFamily = 'core_Font', shopUrl = '/', children, maxQty = 99, currency, addressType, addressFormFields, useUser, useCart, productPopup, productUrlPrefix }) => {
+export const AccountProvider = ({ fontFamily = 'core_Font', shopUrl = '/', children, maxQty = 99, currency, addressType, addressFormFields, useUser, productPopup, productUrlPrefix }) => {
     const { addTranslation } = useTranslation();
     const { openPopup } = useUi();
     const paymentOptions = [
@@ -51,9 +51,9 @@ export const AccountProvider = ({ fontFamily = 'core_Font', shopUrl = '/', child
             openPopup(productPopup, { ...product, className: 'popup-product-block' });
         }
     }, [productUrlPrefix, productPopup]);
-    return (React.createElement(AccountContext.Provider, { value: { currency, maxQty, shopUrl, useUser, useCart, handleProductClick, paymentOptions } },
-        React.createElement(CheckoutProvider, null,
-            React.createElement(AddressProvider, { useUser: useUser, useCart: useCart, addressType: addressType, addressFormFields: addressFormFields },
+    return (React.createElement(AccountContext.Provider, { value: { currency, maxQty, shopUrl, useUser, handleProductClick, paymentOptions } },
+        React.createElement(CartProvider, { useUser: useUser },
+            React.createElement(AddressProvider, { useUser: useUser, addressType: addressType, addressFormFields: addressFormFields },
                 React.createElement(ThemeProvider, { theme: theme },
                     React.createElement(AccountVariables, { fontFamily: fontFamily }),
                     React.createElement(AccountHelperClass, null),

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

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

package/dist/components/AccountCounter/index.js

@@ -1,17 +1,14 @@
 import React, { useState, useCallback, useEffect } from 'react';
 import { Text, debounce } from '@weareconceptstudio/core';
-import { useAccountContext } from '../../AccountProvider';
-import { useCheckoutContext } from '../../modules';
+import { useCart } from '../../modules';
 //* Style
 import AccountCounterStyle from './style';
-const AccountCounter = ({ productId, qty = 1, isGift, maxQty }) => {
-    const { useCart } = useAccountContext();
-    const { toggleCartItem, items } = useCart();
-    const { setCheckGift } = useCheckoutContext();
+const AccountCounter = ({ productId, qty = 1, isGift, maxQty, promotionId }) => {
+    const { toggleCartItem, items, setCheckGift } = useCart();
     //! State
     const [count, setCount] = useState(qty);
     useEffect(() => {
-        setCount(items.find((item) => item.product.id == productId && !item.is_gift)?.qty || qty);
+        setCount(items.find((item) => item.product.id == productId && item.promotionId == promotionId && !item.is_gift)?.qty || qty);
     }, [items]);
     const updateCartServer = useCallback((quantity) => {
         toggleCartItem({
@@ -24,7 +21,7 @@ const AccountCounter = ({ productId, qty = 1, isGift, maxQty }) => {
         e.stopPropagation();
         const newCount = type == 'inc' ? count + 1 : count - 1;
         setCount(newCount);
-        isGift ? setCheckGift({ productId, qty: newCount }) : debouncedUpdateCartServer(newCount);
+        isGift ? setCheckGift({ promotionId, qty: newCount, productId }) : debouncedUpdateCartServer(newCount);
     };
     return (React.createElement(AccountCounterStyle, { onClick: (e) => e.stopPropagation(), className: `counter-block ${count == 0 ? 'opacity-zero pointer-none' : ''}` },
         React.createElement("div", { className: 'counter' },

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

@@ -2,16 +2,15 @@ import React from 'react';
 import { Text, CollapseItem, handlePriceCheckFunc, useTranslation } from '@weareconceptstudio/core';
 import { FormBuilder } from '@weareconceptstudio/form';
 import { useAccountContext } from '../../../AccountProvider';
-import { useCheckoutContext } from '../../../modules';
+import { useCart } from '../../../modules';
 import AccountButton from '../../AccountButton';
 import { balanceFields } from './utils';
 //* Style
 import BalanceCompStyle from './style';
 const BalanceComp = () => {
     const { translate } = useTranslation();
-    const { useCart, useUser } = useAccountContext();
-    const { currency, itemsCount, useBalance } = useCart();
-    const { fillCart } = useCheckoutContext();
+    const { useUser } = useAccountContext();
+    const { currency, itemsCount, useBalance, fillCart } = useCart();
     const { user } = useUser();
     const balance = user?.balance || 0;
     const handleBalance = (amount) => {

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

@@ -1,10 +1,10 @@
 import React from 'react';
 import { CollapseContainer, CollapseItem, Text } from '@weareconceptstudio/core';
 import { Input } from '@weareconceptstudio/form';
-import { useCheckoutContext } from '../../../modules';
+import { useCart } from '../../../modules';
 import CommentCompStyle from './style';
 const CommentComp = ({ isShipping }) => {
-    const { fillCheckoutData, isCheckoutPage } = useCheckoutContext();
+    const { fillCheckoutData, isCheckoutPage } = useCart();
     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,

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

@@ -1,13 +1,11 @@
 import React, { useEffect, useState } from 'react';
 import { handlePriceCheckFunc, useTranslation } from '@weareconceptstudio/core';
-import { useAccountContext } from '../../../AccountProvider';
-import { useCheckoutContext } from '../../../modules';
+import { useCart } from '../../../modules';
 //* Style
 import FreeShippingCompStyle from './style';
 const FreeShippingComp = () => {
     const { translate } = useTranslation();
-    const { useCart } = useAccountContext();
-    const { isCheckoutPage } = useCheckoutContext();
+    const { isCheckoutPage } = useCart();
     const { shippingCostValue, freeShippingRange, shippingCost, items, currency } = useCart();
     const [freeShow, setFreeShow] = useState(items?.length);
     useEffect(() => {

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

@@ -1,14 +1,11 @@
 import React, { useEffect, useState } from 'react';
-import { useCheckoutContext } from '../../../modules';
-import { useAccountContext } from '../../../AccountProvider';
 import { handlePriceCheckFunc, useTranslation } from '@weareconceptstudio/core';
+import { useCart } from '../../../modules';
 //* Style
 import GiftCompStyle from './style';
 const GiftComp = () => {
     const { translate } = useTranslation();
-    const { useCart } = useAccountContext();
-    const { hasFreeGift, giftThresholdRemaining, currency } = useCart();
-    const { isCheckoutPage } = useCheckoutContext();
+    const { hasFreeGift, giftThresholdRemaining, currency, isCheckoutPage } = useCart();
     const [show, setShow] = useState(true);
     useEffect(() => {
         if (hasFreeGift) {

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

@@ -1,17 +1,14 @@
 import React, { useMemo } from 'react';
 import { Text, CollapseItem } from '@weareconceptstudio/core';
 import { FormBuilder } from '@weareconceptstudio/form';
-import { useAccountContext } from '../../../AccountProvider';
-import { useCheckoutContext } from '../../../modules';
+import { useCart } from '../../../modules';
 import AccountButton from '../../AccountButton';
 import AppliedPromotion from './AppliedPromotion';
 import { promoCodeFields } from './utils';
 //* Style
 import PromoCodeCompStyle from './style';
 const PromoCodeComp = () => {
-    const { useCart } = useAccountContext();
-    const { itemsCount, usePromotion, appliedPromotions } = useCart();
-    const { fillCart } = useCheckoutContext();
+    const { itemsCount, usePromotion, appliedPromotions, fillCart } = useCart();
     const handlePromotion = (promotion) => {
         fillCart('usePromotion', promotion);
     };

package/dist/components/TotalCheckout/index.js

@@ -1,7 +1,6 @@
 import React, { memo } from 'react';
 import { Text, CollapseContainer, handlePriceCheckFunc, numToLocalString } from '@weareconceptstudio/core';
-import { useAccountContext } from '../../AccountProvider';
-import { useAddressContext, useCheckoutContext } from '../../modules';
+import { useCart } from '../../modules';
 import AccountButton from '../AccountButton';
 import FreeShippingComp from './FreeShippingComp';
 import PromoCodeComp from './PromoCodeComp';
@@ -12,16 +11,12 @@ import GiftComp from './GiftComp';
 import TotalCheckoutStyle from './style';
 //* Skeleton
 import SkeletonTotalCheckout from './Skeleton';
-const TotalCheckout = memo(({ isShipping, children, confirmation, buttonProps, loading }) => {
-    const { useCart, useUser } = useAccountContext();
-    const { checkoutBtnDisabled } = useCheckoutContext();
-    const { addressLoading } = useAddressContext();
-    const { user } = useUser();
-    const { itemsCount, shippingCost, total, subtotal, useBalance, discount, currency } = useCart();
+const TotalCheckout = memo(({ isShipping, children, confirmation, buttonProps }) => {
+    const { itemsCount, shippingCost, total, subtotal, useBalance, discount, currency, loading, checkoutBtnDisabled } = useCart();
     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("div", { className: `right-panel-wrap panel ${confirmation ? 'display-none-wrap' : ''}` }, !confirmation && !loading ? (React.createElement("div", { className: `max-width-wrapper sticky-wrap` },
                 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` }),

package/dist/components/TotalCheckout/style.js

@@ -200,12 +200,12 @@ const TotalCheckoutStyle = styled.section `
 	}
 
 	/* //! Scroll logic */
-	--account_rightPanelScrollSize: var(--sp50x);
+	--account_rightPanelScrollSize: var(--sp70x);
 
 	.scroll-block {
 		overflow-x: hidden;
 		overflow-y: auto;
-		max-height: calc(100vh - var(--account_rightPanelScrollSize));
+		max-height: calc(100dvh - var(--account_rightPanelScrollSize));
 
 		scrollbar-width: none;
 		-ms-overflow-style: none;
@@ -232,6 +232,9 @@ const TotalCheckoutStyle = styled.section `
 		/* //!  Collapse Sizes */
 		--account_collapseLargeDistance: var(--sp4x);
 		--account_collapseSmallDistance: var(--sp3x);
+
+		/* //! Scroll logic */
+		--account_rightPanelScrollSize: var(--sp55x);
 	}
 
 	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeLMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeM}) {
@@ -251,6 +254,9 @@ const TotalCheckoutStyle = styled.section `
 		/* //!  Collapse Sizes */
 		--account_collapseLargeDistance: var(--sp3x);
 		--account_collapseSmallDistance: var(--sp3x);
+
+		/* //! Scroll logic */
+		--account_rightPanelScrollSize: var(--sp55x);
 	}
 
 	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeMMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeS}) {
@@ -270,6 +276,9 @@ const TotalCheckoutStyle = styled.section `
 		/* //!  Collapse Sizes */
 		--account_collapseLargeDistance: var(--sp4x);
 		--account_collapseSmallDistance: var(--sp3x);
+
+		/* //! Scroll logic */
+		--account_rightPanelScrollSize: var(--sp50x);
 	}
 
 	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeSMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXS}) {
@@ -291,7 +300,7 @@ const TotalCheckoutStyle = styled.section `
 		--account_collapseSmallDistance: var(--sp3x);
 
 		/* //! Scroll logic */
-		--account_rightPanelScrollSize: var(--sp45x);
+		--account_rightPanelScrollSize: var(--sp50x);
 	}
 
 	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXSMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_TabletSize}) {

package/dist/modules/address/AddressForm/index.js

@@ -2,7 +2,7 @@ import React, { memo as Memo, useState, useCallback, useMemo } from 'react';
 import { useUi, Text } from '@weareconceptstudio/core';
 import { FormBuilder } from '@weareconceptstudio/form';
 import { useAddressContext } from '../AddressProvider';
-import { useCheckoutContext } from '../../checkout';
+import { useCart } from '../../cart';
 import AccountButton from '../../../components/AccountButton';
 //* Icons
 import { CheckboxIcon, CheckboxCheckedIcon } from '../../../utils/icons';
@@ -10,7 +10,7 @@ import { CheckboxIcon, CheckboxCheckedIcon } from '../../../utils/icons';
 import AddressFormStyle from './style';
 const AddressForm = Memo(({ title, data, type }) => {
     const { formFields, createAddress, updateAddress } = useAddressContext();
-    const { isCheckoutPage } = useCheckoutContext();
+    const { isCheckoutPage } = useCart();
     const { closePopup } = useUi();
     //! States
     const [isChecked, setIsChecked] = useState(data?.is_default || false);

package/dist/modules/address/AddressProvider.js

@@ -1,6 +1,6 @@
-import React, { createContext, useCallback, useContext, useEffect, useMemo, useState } from 'react';
+import React, { createContext, useContext, useEffect, useMemo, useState } from 'react';
 import { api } from '@weareconceptstudio/core';
-import { useCheckoutContext } from '../checkout';
+import { useCart } from '../cart';
 const AddressContext = createContext(null);
 export const useAddressContext = () => {
     const context = useContext(AddressContext);
@@ -8,7 +8,7 @@ export const useAddressContext = () => {
 };
 export const AddressProvider = ({ addressType, addressFormFields = [], useUser, children }) => {
     const { isLoggedIn } = useUser();
-    const { fillCheckoutData, fillCart, isCheckoutPage } = useCheckoutContext();
+    const { fillCheckoutData, fillCart, isCheckoutPage } = useCart();
     const [addressLoading, setAddressLoading] = useState(false);
     const [addresses, setAddresses] = useState(addressType ? { billing: [], shipping: [] } : []);
     const [selectedAddresses, setSelectedAddresses] = useState(addressType ? { billing: {}, shipping: {} } : {});

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

@@ -1,14 +1,14 @@
-import React, { memo, useCallback, useEffect } from 'react';
+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 { useCart } from '../../CartProvider';
 import { defaultIconGift } from '../util';
-const Item = memo(({ data, remove, select, isLast, actions }) => {
-    const { checkoutData, setCheckGift } = useCheckoutContext();
+const Item = memo(({ data, remove, select, isLast, actions, isCheckout }) => {
+    const { checkoutData, setCheckGift } = useCart();
     const { currency, handleProductClick } = useAccountContext();
     const { translate } = useTranslation();
-    return (React.createElement("div", { className: `item-wrap user-select-none` },
+    return !isCheckout || checkoutData.checkGift.find((item) => item.promotionId == data.appliedPromotion?.id && item.id == data.product.id)?.qty !== 0 ? (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` },
@@ -27,33 +27,37 @@ const Item = memo(({ data, remove, select, isLast, actions }) => {
                         "\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[data.product.id * -1] !== 0 ? (React.createElement(React.Fragment, null,
-                React.createElement(AccountCounter, { maxQty: data.qty, productId: data.product.id * -1, isGift: data.is_gift, qty: checkoutData.checkGift[data.product.id * -1] || data.qty }))) : (React.createElement(React.Fragment, null,
+            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 && !isCheckout ? (React.createElement("div", { className: 'wrapper-gift-button' }, checkoutData.checkGift.find((item) => item.promotionId == data.appliedPromotion.id && item.id == data.product.id)?.qty !== 0 ? (React.createElement(React.Fragment, null,
+                React.createElement(AccountCounter, { maxQty: data?.qty, productId: data.product.id, promotionId: data.appliedPromotion.id, isGift: data.is_gift, qty: checkoutData.checkGift.find((item) => item.promotionId == data.appliedPromotion.id && item.id == data.product.id)?.qty }))) : (React.createElement(React.Fragment, null,
                 React.createElement(AccountButton, { className: `button-gift`, text: 'account.general_actions.restore', onClick: () => {
-                        setCheckGift({ productId: data.product.id * -1, qty: data.qty });
-                    } }))))) : (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,
+                        setCheckGift({ promotionId: data.appliedPromotion.id, productId: data.product.id, qty: data?.qty });
+                    } }))))) : (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.product.discount) && !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.product.discount ? (React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color2 discount-text` },
-                        data.product.discount,
-                        data.product.discount_type === 'percentage' ? '%' : ` ${currency}`,
+                        data.product.discount.value,
+                        data.product.discount.type === 'percentage' ? '%' : ` ${currency}`,
                         "\u00A0",
                         React.createElement("span", { className: 'lowercase' }, translate('account.order_balance.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(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` }, data.is_gift ? (React.createElement(React.Fragment, null,
+                handlePriceCheckFunc(0, currency),
+                React.createElement("span", { className: 'gift-name-text' }, data.appliedPromotion.name))) : (handlePriceCheckFunc(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("div", { className: `flex-end-wrap` }, (data.sale_total || data.product.discount) && !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.product.discount ? (React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color2 discount-text` },
-                                data.product.discount,
-                                data.product.discount_type === 'percentage' ? '%' : ` ${currency}`,
+                                data.product.discount.value,
+                                data.product.discount.type === 'percentage' ? '%' : ` ${currency}`,
                                 "\u00A0",
                                 React.createElement("span", { className: 'lowercase' }, translate('account.order_balance.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(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` }, data.is_gift ? (React.createElement(React.Fragment, null,
+                        handlePriceCheckFunc(0, currency),
+                        React.createElement("span", { className: 'gift-name-text' }, data.appliedPromotion.name))) : (handlePriceCheckFunc(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));
+        isLast ? React.createElement("div", { className: 'line' }) : null)) : null;
 });
 export default Item;

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

@@ -2,13 +2,13 @@ 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 { useCart } from '../../CartProvider';
 import { defaultIconGift } from '../util';
-const ItemMobile = memo(({ data, select }) => {
+const ItemMobile = memo(({ data, select, isCheckout }) => {
     const { handleProductClick, currency } = useAccountContext();
     const { translate } = useTranslation();
-    const { checkoutData, setCheckGift } = useCheckoutContext();
-    return (React.createElement(React.Fragment, null,
+    const { checkoutData, setCheckGift } = useCart();
+    return !isCheckout || checkoutData.checkGift.find((item) => item.promotionId == data.appliedPromotion?.id && item.id == data.product.id)?.qty !== 0 ? (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` },
@@ -27,24 +27,26 @@ const ItemMobile = memo(({ data, select }) => {
                         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' },
+                        (data.sale_total || data.product.discount) && !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.product.discount ? (React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color2 discount-text` },
-                                    data.product.discount,
-                                    data.product.discount_type === 'percentage' ? '%' : ` ${currency}`,
+                                    data.product.discount.value,
+                                    data.product.discount.type === 'percentage' ? '%' : ` ${currency}`,
                                     "\u00A0",
                                     React.createElement("span", { className: 'lowercase' }, translate('account.order_balance.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[data.product.id * -1] !== 0 ? (React.createElement(AccountCounter, { maxQty: data.qty, productId: data.product.id * -1, isGift: data.is_gift, qty: checkoutData.checkGift[data.product.id * -1] || data.qty })) : (React.createElement(AccountButton, { className: `capitalize button-gift`, text: 'account.general_actions.restore', onClick: () => {
-                                setCheckGift({ productId: data.product.id * -1, qty: data.qty });
+                                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` }, data.is_gift ? (React.createElement(React.Fragment, null,
+                            handlePriceCheckFunc(0, currency),
+                            React.createElement("span", { className: 'gift-name-text' }, data.appliedPromotion.name))) : (handlePriceCheckFunc(data.total, currency)))),
+                        select && !data.is_gift ? (React.createElement("div", { className: `inner-container` }, !data.product.out_of_stock ? (React.createElement(AccountCounter, { productId: data.product.id })) : (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' }))))) : data.is_gift && !isCheckout ? (React.createElement("div", { className: 'wrapper-gift-button' }, checkoutData.checkGift.find((item) => item.promotionId == data.appliedPromotion.id && item.id == data.product.id)?.qty !== 0 ? (React.createElement(AccountCounter, { maxQty: data?.qty, productId: data.product.id, promotionId: data.appliedPromotion.id, isGift: data.is_gift, qty: checkoutData.checkGift.find((item) => item.promotionId == data.appliedPromotion.id && item.id == data.product.id)?.qty })) : (React.createElement(AccountButton, { className: `capitalize button-gift`, text: 'account.general_actions.restore', onClick: () => {
+                                setCheckGift({ promotionId: data.appliedPromotion.id, productId: data.product.id, qty: data?.qty });
                             } })))) : (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' })));
+                            React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color1 mobile-quantity2`, text: data?.qty }))))))),
+        React.createElement("div", { className: 'line' }))) : null;
 });
 export default ItemMobile;

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

@@ -1,23 +1,15 @@
-import React, { memo, useEffect, useMemo } from 'react';
+import React, { memo, useMemo } from 'react';
 import { Text, useUi } from '@weareconceptstudio/core';
+import { useCart } from '../CartProvider';
 //* Components
 import Item from './Item';
 import ItemMobile from './ItemMobile';
 import { AccountButton } from '../../../components';
 //* Style
 import CartItemsStyle from './style';
-const CartItems = memo(({ data, className, title, smallFontSize, additionalParameters, actions }) => {
+const CartItems = memo(({ className, title, smallFontSize, additionalParameters, actions, isCheckout = false }) => {
     const { winWidth } = useUi();
-    data = data?.reduce((acc, item) => {
-        const existingItem = acc.find((i) => item.is_gift && i.product.id === item.product.id);
-        if (existingItem) {
-            existingItem.qty += item.qty;
-        }
-        else {
-            acc.push({ ...item });
-        }
-        return acc;
-    }, []);
+    const { items } = useCart();
     //! Store
     const itemsStore = useMemo(() => {
         return winWidth >= 768 ? (React.createElement("div", { className: `cart-items-table-wrap` },
@@ -30,16 +22,16 @@ 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.price` })),
                 React.createElement("div", { className: `title-wrap tl-col-4 title-item` },
                     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, actions: actions, isLast: data.length - 1 == index, select: additionalParameters.select, remove: additionalParameters.remove }));
+            React.createElement("div", { className: `items-wrap` }, items?.length > 0
+                ? items.map((item, index) => {
+                    return (React.createElement(Item, { key: index, data: item, actions: actions, isCheckout: isCheckout, isLast: items.length - 1 == index, select: additionalParameters.select, remove: additionalParameters.remove }));
                 })
-                : 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, select: additionalParameters.select }));
+                : null))) : (React.createElement("div", { className: `mobile-cart-items-table-wrap` }, items?.length > 0
+            ? items.map((item, index) => {
+                return (React.createElement(ItemMobile, { key: index, data: item, isCheckout: isCheckout, select: additionalParameters.select }));
             })
             : null));
-    }, [winWidth, data, additionalParameters, actions]);
+    }, [winWidth, items, 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 }),

package/dist/modules/cart/CartItems/style.js

@@ -293,6 +293,12 @@ const CartItemsStyle = styled.section `
 		}
 	}
 
+	.gift-name-text {
+		display: block;
+		color: var(--pink1000);
+		white-space: pre-wrap;
+	}
+
 	@keyframes opacityShow {
 		0% {
 			opacity: 0;

package/dist/modules/cart/CartProvider.d.ts

@@ -0,0 +1,67 @@
+import React, { ReactNode } from 'react';
+interface CartItem {
+    productId: number;
+    qty: number;
+}
+interface CheckoutData {
+    addressId: number | null;
+    useBalance: boolean | null;
+    note: string;
+    paymentType: string;
+    checkGift: {
+        id: number;
+        qty: number;
+        promotionId: number;
+    }[];
+    card_id: number | null;
+}
+interface CartState {
+    itemsCount: number;
+    items: any[];
+    subtotal: number;
+    total: number;
+    loading: boolean;
+    currency: string;
+    shippingCost: string;
+    freeShippingRange: number | null;
+    shippingCostValue: number | null;
+    hasFreeGift: boolean | null;
+    giftThresholdRemaining: number | null;
+    useBalance: boolean | null;
+    discount: number | null;
+    usePromotion?: string | null;
+    appliedPromotions: any[];
+}
+interface CartContextType extends CartState {
+    getCart: (params?: Record<string, any>) => Promise<void>;
+    setCartState: (data: Partial<CartState>) => void;
+    toggleCartItem: ({ productId, qty }: CartItem) => Promise<void>;
+    deleteCartItem: ({ productId }: {
+        productId: number;
+    }) => Promise<void>;
+    clearCart: () => Promise<void>;
+    reorder: (orderId: number) => Promise<void>;
+    mergeCart: () => Promise<void>;
+    checkoutData: CheckoutData;
+    setCheckoutData: React.Dispatch<React.SetStateAction<CheckoutData>>;
+    fillCheckoutData: (key: string, value: any) => void;
+    handleCheckout: () => Promise<void>;
+    fillCart: (key: string, value: any) => void;
+    setCheckGift: ({ promotionId, qty, productId }: {
+        promotionId: number;
+        qty: number;
+        productId: number;
+    }) => void;
+    checkoutBtnDisabled: boolean;
+    isCheckoutPage: boolean;
+}
+export declare const useCart: () => CartContextType;
+interface CartProviderProps {
+    useUser: () => {
+        user: any;
+        isLoggedIn: boolean;
+    };
+    children: ReactNode;
+}
+export declare const CartProvider: React.FC<CartProviderProps>;
+export {};