@weareconceptstudio/account 0.5.8 → 0.6.0

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",
@@ -28,28 +28,32 @@ const ItemMobile = memo(({ data }) => {
                         translate('account.order_balance.quantity'),
                         ":"),
                     "\u00A0",
-                    React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color1`, text: data.qty })),
+                    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.8",
+	"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';

package/dist/modules/checkout/CheckoutProvider.js

@@ -1,132 +0,0 @@
-import React, { createContext, useContext, useState, useRef, useEffect, useCallback, useMemo } from 'react';
-import { api, useTranslation, isNumeric } from '@weareconceptstudio/core';
-import { useAccountContext } from '../../AccountProvider';
-const CheckoutContext = createContext(null);
-export const useCheckoutContext = () => {
-    const context = useContext(CheckoutContext);
-    return context;
-};
-export const CheckoutProvider = ({ children }) => {
-    const { selectedLang } = useTranslation();
-    const { useCart, useUser } = useAccountContext();
-    const { getCart, setCart, itemsCount, mergeCart, items } = useCart();
-    const { user, isLoggedIn } = useUser();
-    const form = useRef();
-    const [checkoutData, setCheckoutData] = useState({
-        addressId: null,
-        useBalance: null,
-        note: '',
-        paymentType: user?.payment_method || 'cash_on_delivery',
-        checkGift: {},
-    });
-    const [idramForm, setIdramForm] = useState();
-    //! Has gift from data
-    useMemo(() => {
-        items.length &&
-            setCheckoutData((prev) => {
-                const checkGift = {};
-                items?.forEach((item) => {
-                    if (item.is_gift) {
-                        const productId = item.product.id * -1;
-                        checkGift[productId] = (checkGift[productId] || 0) + item.qty;
-                    }
-                });
-                return { ...prev, checkGift };
-            });
-    }, [items]);
-    //! Set gift Select
-    const setCheckGift = useCallback(({ productId, qty } = {}) => {
-        setCheckoutData((prev) => ({ ...prev, checkGift: { ...prev.checkGift, [productId]: qty } }));
-    }, []);
-    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 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 (!itemsCount) {
-            isDisabled = true;
-        }
-        return isDisabled;
-    }, [checkoutData.paymentType, user, isCheckoutPage, itemsCount]);
-    const fillCheckoutData = (key, value) => {
-        setCheckoutData((prev) => ({
-            ...prev,
-            [key]: value,
-        }));
-    };
-    const fillCart = useCallback((key, value) => {
-        setCheckoutData((prev) => {
-            const updatedData = { ...prev, [key]: value };
-            getCart(updatedData);
-            return updatedData;
-        });
-    }, [checkoutData]);
-    const handleCheckout = async () => {
-        let data = { ...checkoutData };
-        //! Check gift
-        if (data.checkGift) {
-            data.checkGift = Object.entries(data.checkGift)
-                .filter(([key, value]) => value)
-                .map(([key, value]) => ({
-                id: key,
-                qty: value,
-            }));
-            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);
-            }
-        });
-    };
-    const idram = (res) => {
-        let lang = selectedLang === 'en' ? 'EN' : selectedLang === 'ru' ? 'RU' : 'AM';
-        const idramForm = (React.createElement("form", { action: res.url, method: 'POST', ref: form },
-            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);
-    };
-    useEffect(() => {
-        if (form.current) {
-            form.current.submit();
-        }
-    }, [idramForm, form]);
-    useEffect(() => {
-        setCart((prev) => ({ ...prev, loading: true }));
-        getCart(checkoutData);
-        if (isLoggedIn) {
-            mergeCart();
-        }
-    }, [isCartPage, isCheckoutPage, selectedLang, isLoggedIn]);
-    return (React.createElement(CheckoutContext.Provider, { value: {
-            checkoutData,
-            setCheckoutData,
-            fillCheckoutData,
-            handleCheckout,
-            fillCart,
-            setCheckGift,
-            checkoutBtnDisabled,
-            isCheckoutPage,
-        } },
-        children,
-        idramForm));
-};