@weareconceptstudio/account 0.5.9 → 0.6.0

package/dist/modules/cart/CartProvider.js

@@ -0,0 +1,243 @@
+'use client';
+import React, { useState, useRef, createContext, useContext, useMemo, useEffect, useCallback } from 'react';
+import { getCookie, setCookie, removeCookie, useTranslation, api, isNumeric, cleanObject } from '@weareconceptstudio/core';
+const CartContext = createContext({});
+export const useCart = () => useContext(CartContext);
+export const CartProvider = ({ useUser, children }) => {
+    const { selectedLang } = useTranslation();
+    const { isLoggedIn, user } = useUser();
+    const idramFormRef = useRef(null);
+    const [idramForm, setIdramForm] = useState(null);
+    const [cartState, setCartState] = useState({
+        itemsCount: 0,
+        items: [],
+        subtotal: 0,
+        total: 0,
+        loading: true,
+        currency: 'AMD',
+        shippingCost: '-',
+        freeShippingRange: null,
+        shippingCostValue: null,
+        hasFreeGift: null,
+        giftThresholdRemaining: null,
+        useBalance: null,
+        discount: null,
+        appliedPromotions: [],
+    });
+    const initialCheckoutData = JSON.parse(sessionStorage.getItem('checkoutData') || '{}') || {
+        addressId: null,
+        useBalance: null,
+        note: '',
+        paymentType: user?.payment_method || 'cash_on_delivery',
+        checkGift: [],
+        card_id: null,
+    };
+    const [checkoutData, setCheckoutData] = useState(initialCheckoutData);
+    const checkoutDataRef = useRef(checkoutData);
+    useEffect(() => {
+        if (typeof window !== 'undefined') {
+            sessionStorage.setItem('checkoutData', JSON.stringify(checkoutData));
+        }
+        checkoutDataRef.current = checkoutData;
+    }, [checkoutData]);
+    const getCookieItems = () => {
+        const cookieCart = getCookie('cart');
+        return cookieCart ? JSON.parse(cookieCart) : [];
+    };
+    const setResourceDecorator = (data) => {
+        setCartState((prev) => ({ ...prev, ...data, loading: false }));
+        setCheckoutData((prev) => ({ ...prev, useBalance: data.useBalance }));
+    };
+    const isCheckoutPage = useMemo(() => {
+        return window.location.href.includes('checkout');
+    }, [window.location.href]);
+    const isCartPage = useMemo(() => {
+        return window.location.href.includes('cart');
+    }, [window.location.href]);
+    const cartResourceType = useMemo(() => {
+        return isCheckoutPage || isCartPage ? 'cart' : 'cart-summary';
+    }, [isCheckoutPage, isCartPage]);
+    const getCart = async (params = {}) => {
+        let newParams = { ...cleanObject(params), ...cleanObject(checkoutDataRef.current), cartResourceType };
+        if (isLoggedIn) {
+            const { data } = await api.get({ url: 'cart', lang: selectedLang, params: newParams });
+            setResourceDecorator(data);
+        }
+        else {
+            const cookieItems = getCookieItems();
+            const { data } = await api.post('guest-cart', { items: cookieItems, ...newParams }, selectedLang);
+            setResourceDecorator(data);
+        }
+    };
+    const toggleCartItem = async ({ productId, qty }) => {
+        if (qty === 0)
+            return deleteCartItem({ productId });
+        return isLoggedIn ? customerToggleCartItem({ productId, qty }) : guestToggleCartItem({ productId, qty });
+    };
+    const guestToggleCartItem = async ({ productId, qty }) => {
+        const cookieItems = getCookieItems();
+        const existingItem = cookieItems.find((item) => item.productId === productId);
+        const items = existingItem
+            ? cookieItems.map((item) => (item.productId === productId ? { ...item, qty } : item))
+            : [...cookieItems, { productId, qty }];
+        setCookie('cart', JSON.stringify(items));
+        await getCart();
+        return Promise.resolve();
+    };
+    const customerToggleCartItem = async ({ productId, qty }) => {
+        let params = { productId, qty, ...cleanObject(checkoutDataRef.current), cartResourceType };
+        const { data } = await api.post('toggle-cart-item', params, selectedLang);
+        setResourceDecorator(data);
+    };
+    const deleteCartItem = async ({ productId }) => {
+        let params = { productId, ...cleanObject(checkoutDataRef.current), cartResourceType };
+        if (isLoggedIn) {
+            const { data } = await api.post('delete-cart-item', params);
+            setResourceDecorator(data);
+        }
+        else {
+            const items = getCookieItems().filter((item) => item.productId !== productId);
+            setCookie('cart', JSON.stringify(items));
+            await getCart();
+        }
+    };
+    const mergeCart = async () => {
+        const cookieItems = getCookieItems();
+        if (cookieItems.length > 0) {
+            removeCookie('cart');
+            const { data } = await api.post('merge-cart', { items: cookieItems }, selectedLang);
+            setResourceDecorator(data);
+        }
+    };
+    const clearCart = async () => {
+        if (isLoggedIn) {
+            const { data } = await api.post('clear-cart');
+            setResourceDecorator(data);
+        }
+        else {
+            removeCookie('cart');
+            await getCart();
+        }
+    };
+    // TODO: make router push func
+    const reorder = async (orderId) => {
+        const { data } = await api.post('reorder', { orderId });
+        setResourceDecorator(data);
+        // router.push(getLangPath('cart'));
+    };
+    //! Has gift from data
+    useEffect(() => {
+        if (cartState.items.length && !checkoutData.checkGift.length) {
+            setCheckoutData((prev) => {
+                const checkGift = cartState.items
+                    .filter((item) => item.is_gift)
+                    .map((item) => ({
+                    id: item.product.id,
+                    qty: item.qty,
+                    promotionId: item.appliedPromotion.id,
+                }));
+                return { ...prev, checkGift };
+            });
+        }
+    }, [cartState.items]);
+    //! Set gift Select
+    const setCheckGift = useCallback(({ promotionId, qty, productId }) => {
+        setCheckoutData((prev) => ({
+            ...prev,
+            checkGift: [
+                ...prev.checkGift.map((item) => {
+                    if (item.promotionId == promotionId && item.id == productId) {
+                        return { ...item, qty };
+                    }
+                    else {
+                        return { ...item };
+                    }
+                }),
+            ],
+        }));
+    }, []);
+    const checkoutBtnDisabled = useMemo(() => {
+        let isDisabled = false;
+        if (isCheckoutPage && isNumeric(checkoutData.paymentType)) {
+            const selectedCard = user?.cards?.find((card) => card.id == checkoutData.paymentType);
+            isDisabled = selectedCard.is_expired;
+        }
+        if (!cartState.itemsCount) {
+            isDisabled = true;
+        }
+        return isDisabled;
+    }, [checkoutData.paymentType, user, isCheckoutPage, cartState.itemsCount]);
+    const fillCheckoutData = (key, value) => {
+        setCheckoutData((prev) => {
+            const updatedData = { ...prev, [key]: value };
+            sessionStorage.setItem('checkoutData', JSON.stringify(updatedData));
+            return updatedData;
+        });
+    };
+    const fillCart = useCallback((key, value) => {
+        const updatedData = { ...checkoutData, [key]: value };
+        getCart(updatedData);
+    }, [checkoutData]);
+    const idram = (res) => {
+        let lang = selectedLang === 'en' ? 'EN' : selectedLang === 'ru' ? 'RU' : 'AM';
+        const idramForm = (React.createElement("form", { action: res.url, method: 'POST', ref: idramFormRef },
+            React.createElement("input", { type: 'hidden', name: 'EDP_LANGUAGE', value: lang }),
+            Object.keys(res.form).map((i, key) => (React.createElement("input", { key: key, type: 'hidden', name: i, value: res.form[i] })))));
+        setIdramForm(idramForm);
+    };
+    const handleCheckout = async () => {
+        let data = cleanObject({ ...checkoutData });
+        //! Check gift
+        if (data.checkGift) {
+            data.checkGift = data.checkGift.filter((item) => item.qty);
+            if (!data.checkGift.length)
+                delete data.checkGift;
+        }
+        if (isNumeric(checkoutData.paymentType)) {
+            data.paymentType = 'credit_card';
+            data.card_id = Number(checkoutData.paymentType);
+        }
+        if (checkoutData.paymentType == 'credit_card') {
+            data.card_id = 0;
+        }
+        return await api.post('checkout', data).then((res) => {
+            if (res.redirect_url) {
+                window.location.href = res.redirect_url;
+            }
+            else if (res.url) {
+                idram(res);
+            }
+        });
+    };
+    useEffect(() => {
+        setCartState((prev) => ({ ...prev, loading: true }));
+        getCart(checkoutData);
+        if (isLoggedIn)
+            mergeCart();
+    }, [isCartPage, isCheckoutPage, selectedLang, isLoggedIn]);
+    useEffect(() => {
+        if (idramFormRef.current) {
+            idramFormRef.current.submit();
+        }
+    }, [idramForm, idramFormRef]);
+    return (React.createElement(CartContext.Provider, { value: {
+            ...cartState,
+            checkoutData,
+            getCart,
+            setCartState: (data) => setCartState((prev) => ({ ...prev, ...data })),
+            toggleCartItem,
+            deleteCartItem,
+            clearCart,
+            reorder,
+            mergeCart,
+            setCheckoutData,
+            fillCheckoutData,
+            handleCheckout,
+            fillCart,
+            setCheckGift,
+            checkoutBtnDisabled,
+            isCheckoutPage,
+        } },
+        children,
+        idramForm));
+};

package/dist/modules/cart/CartTemplate/Skeleton/index.js

@@ -1,14 +1,14 @@
 import React from 'react';
 import { useUi } from '@weareconceptstudio/core';
-import { useCheckoutContext } from '../../../checkout';
 import { useAccountContext } from '../../../../AccountProvider';
+import { useCart } from '../../CartProvider';
 import { skeletonCategoryName, skeletonMenuTitle, skeletonShopUrl, skeletonCategoryNameAdapting } from './icons';
 import SkeletonItemCart from './SkeletonItem';
 import SkeletonCartTemplateStyle from './style';
 const SkeletonCartTemplate = () => {
     const { winWidth } = useUi();
-    const { isCheckoutPage } = useCheckoutContext();
     const { shopUrl } = useAccountContext();
+    const { isCheckoutPage } = useCart();
     return (React.createElement(SkeletonCartTemplateStyle, { className: isCheckoutPage ? 'checkout-style' : '' },
         React.createElement("div", { className: 'left-bar' },
             shopUrl ? React.createElement("div", { className: 'wrapper-url' }, skeletonShopUrl) : React.createElement(React.Fragment, null),

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

@@ -1,6 +1,6 @@
 import React, { useEffect, useRef } from 'react';
 import { Page, useTranslation } from '@weareconceptstudio/core';
-import { CartItems, EmptyCart } from '..';
+import { CartItems, EmptyCart, useCart } from '..';
 import { TotalCheckout, AccountButton } from '../../../components';
 import { useAccountContext } from '../../../AccountProvider';
 import AccountContainer from '../../../components/AccountContainer';
@@ -14,7 +14,7 @@ import CartTemplateStyle from './style';
 import SkeletonCartTemplate from './Skeleton';
 const CartTemplate = ({ children, checkoutUrl = '/checkout/', moreMenu, emptyCartIcon }) => {
     const { translate } = useTranslation();
-    const { shopUrl, useCart } = useAccountContext();
+    const { shopUrl } = useAccountContext();
     const { itemsCount, loading, toggleCartItem, deleteCartItem } = useCart();
     return (React.createElement(Page, { className: 'cart use-account' },
         React.createElement(AccountContainer, { className: `second-version` },

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

@@ -1,3 +1,4 @@
+export * from './CartProvider';
 export { default as EmptyCart } from './EmptyCart';
 export { default as CartItems } from './CartItems';
 export { default as CartTemplate } from './CartTemplate';

package/dist/modules/cart/index.js

@@ -1,3 +1,4 @@
+export * from './CartProvider';
 export { default as EmptyCart } from './EmptyCart';
 export { default as CartItems } from './CartItems';
 export { default as CartTemplate } from './CartTemplate';

package/dist/modules/checkout/CheckoutTemplate/StepReview/index.js

@@ -13,7 +13,7 @@ const StepReview = () => {
     return (React.createElement("div", { className: 'step-review' },
         React.createElement(SelectAddress, null),
         React.createElement(Payment, { title: 'account.payment_management.payment', onClick: handleSelectPopup }),
-        React.createElement(CartItems, { smallFontSize: true, className: `checkout-mt`, title: 'account.order_management.orderItems', additionalParameters: {
+        React.createElement(CartItems, { isCheckout: true, smallFontSize: true, className: `checkout-mt`, title: 'account.order_management.orderItems', additionalParameters: {
                 remove: false,
                 select: false,
                 horizontalLine: false,

package/dist/modules/checkout/CheckoutTemplate/index.js

@@ -3,7 +3,7 @@ import { Page } from '@weareconceptstudio/core';
 import { Sequence, TotalCheckout } from '../../../components';
 import { useAddressContext } from '../../address';
 import { useAccountContext } from '../../../AccountProvider';
-import { useCheckoutContext } from '../CheckoutProvider';
+import { useCart } from '../../cart';
 import StepReview from './StepReview';
 import StepShipping from './StepShipping';
 import AccountContainer from '../../../components/AccountContainer';
@@ -15,10 +15,9 @@ import SequenceSkeleton from '../../../components/Sequence/Skeleton';
 import SkeletonAddressSelect from '../../address/SelectAddress/Skeleton';
 const CheckoutTemplate = () => {
     const firstStepFormRef = useRef(null);
-    const { useCart, useUser } = useAccountContext();
+    const { useUser } = useAccountContext();
     const { hasCheckoutAddress, addressLoading } = useAddressContext();
-    const { handleCheckout } = useCheckoutContext();
-    const { itemsCount, loading } = useCart();
+    const { itemsCount, loading, handleCheckout } = useCart();
     const { user } = useUser();
     const checkStep = {
         isShipping: !hasCheckoutAddress,

package/dist/modules/checkout/ThankYouTemplate/index.js

@@ -6,12 +6,13 @@ import ThankYouMessageStyle from './style';
 import { useAccountContext } from '../../../AccountProvider';
 import { confirmImage } from './icons';
 import AccountContainer from '../../../components/AccountContainer';
+import { useCart } from '../../cart';
 const ThankYouTemplate = ({ orderNumber, thankIcon }) => {
-    const { shopUrl, useCart } = useAccountContext();
+    const { shopUrl } = useAccountContext();
     const { translate } = useTranslation();
-    const cart = useCart();
+    const { clearCart } = useCart();
     useEffect(() => {
-        cart.clearCart();
+        clearCart();
     }, []);
     return (React.createElement(Page, { className: 'thank-you-message use-account' },
         React.createElement(ThankYouMessageStyle, null,

package/dist/modules/checkout/index.d.ts

@@ -1,3 +1,2 @@
-export * from './CheckoutProvider';
 export { default as CheckoutTemplate } from './CheckoutTemplate';
 export { default as ThankYouTemplate } from './ThankYouTemplate';

package/dist/modules/checkout/index.js

@@ -1,3 +1,2 @@
-export * from './CheckoutProvider';
 export { default as CheckoutTemplate } from './CheckoutTemplate';
 export { default as ThankYouTemplate } from './ThankYouTemplate';

package/dist/modules/order/OrderedItems/Item/index.js

@@ -13,7 +13,7 @@ const Item = memo(({ data }) => {
                     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, { disabled: !data.product, btnType: `green-large-text`, className: `ordered-item-title`, text: data.product?.name || data?.product_name, onClick: () => data.product && handleProductClick(data.product) }),
+                    React.createElement(AccountButton, { disabled: !data.product, btnType: `green-large-text`, className: `ordered-item-title`, text: data.product?.name || data.product_name, onClick: () => data.product && 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",
@@ -26,25 +26,29 @@ const Item = memo(({ data }) => {
                         React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color1`, text: data.product.short_info_2 }))) : null)),
             React.createElement("div", { className: `col-item tl-col-2` },
                 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.sale_price && !data.is_gift ? (React.createElement("div", null,
+            React.createElement("div", { className: `col-item tl-col-3 col-item-3 nowrap` }, (data.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 order-sale-price`, text: handlePriceCheckFunc(data.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 ? (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_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 order-price1`, text: handlePriceCheckFunc(data.price, currency) })))) : (React.createElement(Text, { className: `account-p account-p3 account-font-bold account-primary-color1 align-right order-sale-price`, text: handlePriceCheckFunc(data.is_gift ? 0 : data.price, currency) }))),
+                    React.createElement(Text, { className: `account-p account-p3 account-font-regular account-primary-color2 line-through value align-right order-price1`, text: handlePriceCheckFunc(data.price, currency) })))) : (React.createElement(Text, { className: `account-p account-p3 account-font-bold account-primary-color1 align-right order-sale-price` }, data.is_gift ? (React.createElement(React.Fragment, null,
+                handlePriceCheckFunc(0, currency),
+                React.createElement("span", { className: 'gift-name-text' }, data?.appliedPromotion?.name || 'Karlen'))) : (handlePriceCheckFunc(data.price, currency))))),
             React.createElement("div", { className: `col-item tl-col-4 col-item-4 nowrap price-block` },
                 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 order-sale-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 ? (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_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 order-price1`, text: handlePriceCheckFunc(data.total, currency) })))) : (React.createElement(Text, { className: `account-p account-p3 account-font-bold account-primary-color1 align-right order-sale-price`, 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 order-price1`, text: handlePriceCheckFunc(data.total, currency) })))) : (React.createElement(Text, { className: `account-p account-p3 account-font-bold account-primary-color1 align-right order-sale-price` }, data.is_gift ? (React.createElement(React.Fragment, null,
+                        handlePriceCheckFunc(0, currency),
+                        React.createElement("span", { className: 'gift-name-text' }, data?.appliedPromotion?.name || 'Karlen'))) : (handlePriceCheckFunc(data.total, currency))))))))));
 });
 export default Item;

package/dist/modules/order/OrderedItems/ItemMobile/index.js

@@ -12,7 +12,7 @@ const ItemMobile = memo(({ data }) => {
                 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, { disabled: !data.product, btnType: `green-large-text`, className: `ordered-item-mobile-title`, text: data.product?.name || data?.product_name, onClick: () => data.product && handleProductClick(data.product) }),
+                React.createElement(AccountButton, { disabled: !data.product, btnType: `green-large-text`, className: `ordered-item-mobile-title`, text: data.product?.name || data.product_name, onClick: () => data.product && 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",
@@ -31,25 +31,29 @@ const ItemMobile = memo(({ data }) => {
                     React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color1`, text: data?.qty })),
                 React.createElement("div", { className: `mobile-price-wrap nowrap` },
                     React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color1`, text: `account.order_balance.price` }),
-                    data.sale_price && !data.is_gift ? (React.createElement(React.Fragment, null,
+                    (data.sale_price || data.product?.discount) && !data.is_gift ? (React.createElement(React.Fragment, null,
                         React.createElement(Text, { className: `account-p account-p3 account-font-medium account-secondary-color2 sale-price`, text: handlePriceCheckFunc(data.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-mobile` },
+                            data.product?.discount ? (React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color2 discount-text-mobile` },
                                 data.product.discount,
-                                data?.product?.discount_type === 'percentage' ? '%' : ` ${currency}`,
+                                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 price1`, text: handlePriceCheckFunc(data.price, currency) })))) : (React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color1 price2`, text: handlePriceCheckFunc(data.is_gift ? 0 : data.price, currency) }))),
+                            React.createElement(Text, { className: `account-p account-p3 account-font-regular account-primary-color2 line-through price1`, text: handlePriceCheckFunc(data.price, currency) })))) : (React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color1 price2` }, data.is_gift ? (React.createElement(React.Fragment, null,
+                        handlePriceCheckFunc(0, currency),
+                        React.createElement("span", { className: 'gift-name-text' }, data?.appliedPromotion?.name || 'Karlen'))) : (handlePriceCheckFunc(data.price, currency))))),
                 React.createElement("div", { className: `mobile-total-price-wrap nowrap` },
                     React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color1`, text: `account.order_balance.total` }),
-                    data.sale_total && !data.is_gift ? (React.createElement(React.Fragment, null,
+                    (data.sale_total || data.product?.discount) && !data.is_gift ? (React.createElement(React.Fragment, null,
                         React.createElement(Text, { className: `account-p account-p3 account-font-medium account-secondary-color2 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-mobile` },
+                            data.product?.discount ? (React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color2 discount-text-mobile` },
                                 data.product.discount,
-                                data?.product?.discount_type === 'percentage' ? '%' : ` ${currency}`,
+                                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 total1`, text: handlePriceCheckFunc(data.total, currency) })))) : (React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color1 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 total1`, text: handlePriceCheckFunc(data.total, currency) })))) : (React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color1 total2`, text: handlePriceCheckFunc(data.is_gift ? 0 : data.total, currency) }, data.is_gift ? (React.createElement(React.Fragment, null,
+                        handlePriceCheckFunc(0, currency),
+                        React.createElement("span", { className: 'gift-name-text' }, data?.appliedPromotion?.name || 'Karlen'))) : (handlePriceCheckFunc(data.total, currency)))))))));
 });
 export default ItemMobile;

package/dist/modules/order/OrderedItems/index.js

@@ -1,13 +1,12 @@
 import React, { useMemo } from 'react';
 import { Text, useUi } from '@weareconceptstudio/core';
-import { useAccountContext } from '../../../AccountProvider';
+import { useCart } from '../../cart';
 import { AccountButton } from '../../../components';
 import Item from './Item';
 import ItemMobile from './ItemMobile';
 import OrderedItemsStyle from './style';
 const OrderedItems = ({ data: items, dataId }) => {
     const { winWidth } = useUi();
-    const { useCart } = useAccountContext();
     const cartContext = useCart();
     //! Store order items
     const storeOrderedItems = useMemo(() => {

package/dist/modules/order/OrderedItems/style.js

@@ -373,6 +373,12 @@ const OrderedItemsStyle = styled.div `
 		column-gap: var(--sp1x);
 	}
 
+	.gift-name-text {
+		display: block;
+		color: var(--pink1000);
+		white-space: pre-wrap;
+	}
+
 	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXLMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeL}) {
 		--account_orderItemsMarginTop: var(--sp11x);
 		--account_spaceLineMarginTop: var(--sp2x);

package/dist/modules/payment/AddNewCard/index.js

@@ -1,11 +1,11 @@
 import React from 'react';
 import { Text, api, useTranslation } from '@weareconceptstudio/core';
-import { useCheckoutContext } from '../../checkout';
+import { useCart } from '../../cart';
 import { popupCardSVG } from '../icons';
 //* Style
 import AddNewCardStyle from './style';
 const AddNewCard = ({ className }) => {
-    const { isCheckoutPage } = useCheckoutContext();
+    const { isCheckoutPage } = useCart();
     const { translate } = useTranslation();
     const handleNewCard = async () => {
         return await api.post('add-card', { backUrl: `${window.location.href}`, isCheckout: isCheckoutPage }).then((res) => {

package/dist/modules/payment/Card/index.js

@@ -1,15 +1,15 @@
 import React, { useCallback } from 'react';
 import { Text, useUi } from '@weareconceptstudio/core';
 import { mastercardSVG, visaSVG } from '../icons';
+import { useCart } from '../../cart';
 //* Components
 import WarningMessageForPopup from '../../../components/WarningMessageForPopup';
 import AccountButton from '../../../components/AccountButton';
 //* Style
 import CardStyle from './style';
-import { useCheckoutContext } from '../../checkout';
 const Card = ({ cardOption, className, selectedPayment, setSelectedPayment, deleteCard }) => {
     const { openPopup } = useUi();
-    const { isCheckoutPage } = useCheckoutContext();
+    const { isCheckoutPage } = useCart();
     //! Handle Popups
     const handleDeletePopup = useCallback(() => {
         openPopup(React.createElement(WarningMessageForPopup, { isDelete: true, title: 'account.payment_management.deleteCardMessage', description: 'account.payment_management.confirmDeleteCard', onRemove: () => deleteCard(cardOption.id) }), {

package/dist/modules/payment/Payment/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Text } from '@weareconceptstudio/core';
-import { useCheckoutContext } from '../../checkout';
+import { useCart } from '../../cart';
 //* Components
 import AccountButton from '../../../components/AccountButton';
 import PaymentMethods from '../PaymentMethods';
@@ -10,7 +10,7 @@ import PaymentStyle from './style';
 import { useAccountContext } from '../../../AccountProvider';
 const Payment = ({ title, onClick, className }) => {
     const { useUser } = useAccountContext();
-    const { checkoutData, fillCheckoutData } = useCheckoutContext();
+    const { checkoutData, fillCheckoutData } = useCart();
     const { user } = useUser();
     const setSelectedPayment = (value) => {
         fillCheckoutData('paymentType', value);
@@ -18,7 +18,7 @@ const Payment = ({ title, onClick, className }) => {
     return (React.createElement(PaymentStyle, { className: `item-container ${className || ''}` },
         React.createElement("div", { className: `change-payment-wrap` },
             React.createElement(Text, { className: `account-p account-p2 account-font-bold account-primary-color1`, text: title }),
-            user.payment_method && (React.createElement(AccountButton, { onClick: onClick, btnType: `green-small-text`, text: `account.general_actions.change` }))),
-        user.payment_method ? (React.createElement(SelectedPayment, null)) : (React.createElement(PaymentMethods, { selectedPayment: checkoutData.paymentType, setSelectedPayment: setSelectedPayment }))));
+            user?.payment_method && (React.createElement(AccountButton, { onClick: onClick, btnType: `green-small-text`, text: `account.general_actions.change` }))),
+        user?.payment_method ? (React.createElement(SelectedPayment, null)) : (React.createElement(PaymentMethods, { selectedPayment: checkoutData.paymentType, setSelectedPayment: setSelectedPayment }))));
 };
 export default Payment;

package/dist/modules/payment/PaymentMethods/index.js

@@ -8,7 +8,7 @@ const PaymentMethods = ({ className, selectedPayment, setSelectedPayment }) => {
     const { paymentOptions, useUser } = useAccountContext();
     const { user } = useUser();
     const paymentMethods = useMemo(() => {
-        return !!user.payment_method ? paymentOptions : [{ label: 'Card', value: 'credit_card' }, ...paymentOptions];
+        return !!user?.payment_method ? paymentOptions : [{ label: 'Card', value: 'credit_card' }, ...paymentOptions];
     }, [user, paymentOptions]);
     return (React.createElement(PaymentMethodsStyle, { className: `payment-item-container ${className || ''}` }, paymentMethods.map((item, index) => (React.createElement(PaymentMethodItem, { key: index, item: item, selectedPayment: selectedPayment, setSelectedPayment: setSelectedPayment })))));
 };

package/dist/modules/payment/SelectPaymentMethodPopup/index.js

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { useUi, Text } from '@weareconceptstudio/core';
-import { useCheckoutContext } from '../../checkout';
+import { useCart } from '../../cart';
 //* Components
 import AccountButton from '../../../components/AccountButton';
 import PaymentWrap from '../PaymentWrap';
@@ -8,7 +8,7 @@ import PaymentWrap from '../PaymentWrap';
 import SelectPaymentMethodPopupStyle from './style';
 const SelectPaymentMethodPopup = () => {
     const { closePopup } = useUi();
-    const { checkoutData, fillCheckoutData } = useCheckoutContext();
+    const { checkoutData, fillCheckoutData } = useCart();
     const [selectedPayment, setSelectedPayment] = useState(checkoutData.paymentType);
     const handlePaymentMethodChangeSubmit = () => {
         fillCheckoutData('paymentType', selectedPayment);

package/dist/modules/payment/SelectedPayment/index.js

@@ -2,10 +2,10 @@ import React, { useMemo } from 'react';
 import { isNumeric } from '@weareconceptstudio/core';
 import PaymentMethodItem from '../PaymentMethodItem';
 import { useAccountContext } from '../../../AccountProvider';
-import { useCheckoutContext } from '../../checkout';
+import { useCart } from '../../cart';
 const SelectedPayment = () => {
     const { paymentOptions, useUser } = useAccountContext();
-    const { checkoutData } = useCheckoutContext();
+    const { checkoutData } = useCart();
     const { user } = useUser();
     const isCardType = useMemo(() => {
         return isNumeric(checkoutData.paymentType);

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@weareconceptstudio/account",
-	"version": "0.5.9",
+	"version": "0.6.0",
 	"description": "Concept Studio Account",
 	"author": "Concept Studio",
 	"license": "ISC",

package/dist/modules/checkout/CheckoutProvider.d.ts

@@ -1,5 +0,0 @@
-export function useCheckoutContext(): any;
-export function CheckoutProvider({ children }: {
-    children: any;
-}): React.JSX.Element;
-import React from 'react';