@weareconceptstudio/account 0.0.8 → 0.0.9

package/dist/components/TotalCheckout/index.js

@@ -1,36 +1,31 @@
-import React, { memo, useState, useEffect } from 'react';
-import { Text, useUi } from '@weareconceptstudio/core';
+import React, { memo, useState } from 'react';
+import { Text } from '@weareconceptstudio/core';
 import { useAccountContext } from '../../AccountProvider';
 import AccountButton from '../ui/AccountButton';
 //* Utils
 import { handlePriceCheckFunc, numToLocalString } from '../../utils/_functions';
 //* Style
 import TotalCheckoutStyle from './style';
-const TotalCheckout = memo(({ isShipping, children, confirmation, buttonProps, itemsCount, subtotal, total, loading, shippingCost }) => {
-    const { winWidth } = useUi();
+// TODO: Note
+const TotalCheckout = memo(({ isShipping, children, confirmation, buttonProps, itemsCount, subtotal, total, shippingCost }) => {
     const { currency } = useAccountContext();
     //! States
-    const [headerHeight, setHeaderHeight] = useState();
     const [note, setNote] = useState();
-    //! useEffect
-    useEffect(() => {
-        setHeaderHeight(document.getElementsByTagName('header')[0]?.clientHeight);
-    }, [winWidth]);
-    return (React.createElement(TotalCheckoutStyle, { "$headerHeight": headerHeight },
+    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 && (React.createElement("div", { className: `max-width-wrapper sticky-wrap` },
-                React.createElement(Text, { className: `account-p account-p2 account-font-bold account-primary-color1`, text: `orderSummary` }),
+                React.createElement(Text, { className: `account-p account-p2 account-font-bold account-primary-color1 sticky-wrap-title`, text: `orderSummary` }),
                 React.createElement("div", { className: `od-line` }),
                 React.createElement("div", { className: `od-item-wrap` },
-                    React.createElement(Text, { className: `account-p account-p2 account-font-regular account-primary-color1`, text: `subtotal` }),
-                    React.createElement(Text, { className: `account-p account-p2 account-font-regular account-primary-color1`, text: itemsCount ? handlePriceCheckFunc(subtotal, currency) : `0 ${currency}` })),
+                    React.createElement(Text, { className: `account-p account-p2 account-font-regular account-primary-color1 sticky-wrap-subtotal`, text: `subtotal` }),
+                    React.createElement(Text, { className: `account-p account-p2 account-font-regular account-primary-color1 sticky-wrap-currency`, text: itemsCount ? handlePriceCheckFunc(subtotal, currency) : `0 ${currency}` })),
                 React.createElement("div", { className: `od-item-wrap` },
-                    React.createElement(Text, { className: `account-p account-p2 account-font-regular account-primary-color1`, text: `shipping` }),
-                    React.createElement(Text, { className: `account-p account-p2 account-font-regular account-primary-color1`, text: `${String(shippingCost).toLowerCase() === 'free' || shippingCost === '-' ? shippingCost : `${numToLocalString(shippingCost)} ${currency}`}` })),
+                    React.createElement(Text, { className: `account-p account-p2 account-font-regular account-primary-color1 sticky-wrap-shipping`, text: `shipping` }),
+                    React.createElement(Text, { className: `account-p account-p2 account-font-regular account-primary-color1 sticky-wrap-shipping-cost`, text: `${String(shippingCost).toLowerCase() === 'free' || shippingCost === '-' ? shippingCost : `${numToLocalString(shippingCost)} ${currency}`}` })),
                 React.createElement("div", { className: `od-item-wrap` },
-                    React.createElement(Text, { className: `account-p account-p2 account-font-bold account-primary-color1`, text: `total` }),
-                    React.createElement(Text, { className: `account-p account-p2 account-font-bold account-primary-color1`, text: itemsCount ? handlePriceCheckFunc(total, currency) : `0 ${currency}` })),
+                    React.createElement(Text, { className: `account-p account-p2 account-font-bold account-primary-color1 sticky-wrap-total`, text: `total` }),
+                    React.createElement(Text, { className: `account-p account-p2 account-font-bold account-primary-color1 sticky-wrap-currnecy2`, text: itemsCount ? handlePriceCheckFunc(total, currency) : `0 ${currency}` })),
                 typeof isShipping === 'boolean' && !isShipping ? (
                 // <Input.TextArea
                 // 	value={note}
@@ -43,6 +38,6 @@ const TotalCheckout = memo(({ isShipping, children, confirmation, buttonProps, i
                         textAlign: 'center',
                         margin: '16px 0',
                     }, className: 'account-p account-p3 account-font-regular account-primary-color1' }, "Input Filed Textarea")) : null,
-                React.createElement(AccountButton, { url: buttonProps.url, btnType: `full-width`, text: buttonProps.text, type: buttonProps.type, onClick: () => buttonProps.handleClick && buttonProps.handleClick(note), className: `${!itemsCount || loading || buttonProps.disabled ? 'disabled' : ''}` })))))));
+                React.createElement(AccountButton, { url: buttonProps.url, btnType: `full-width`, text: buttonProps.text, type: buttonProps.type, disabled: buttonProps.disabled, onClick: () => buttonProps.handleClick && buttonProps.handleClick(note), className: `sticky-wrap-btn ${buttonProps.disabled ? 'disabled' : ''}` })))))));
 });
 export default TotalCheckout;

package/dist/components/TotalCheckout/style.js

@@ -82,13 +82,6 @@ const TotalCheckoutStyle = styled.section `
 					margin-top: var(--account_btnMTop);
 				}
 			}
-
-			//! Sticky Wrapper
-			.sticky-wrap {
-				position: sticky;
-				height: fit-content;
-				top: calc(${(props) => props.$headerHeight}px + var(--account_cartMainWrapPadTop));
-			}
 		}
 	}
 

package/dist/components/cart/EmptyCart/index.js

@@ -6,8 +6,8 @@ import EmptyCartStyle from './style';
 const EmptyCart = ({ shoppingUrl }) => {
     return (React.createElement(EmptyCartStyle, null,
         React.createElement("div", { className: `empty-cart-wrap` },
-            React.createElement(Text, { tag: `h4`, className: `account-h4 account-font-bold account-primary-color1`, text: `cartEmpty` }),
-            React.createElement(Text, { className: `account-p account-p2 account-font-regular account-primary-color1 description`, text: `cartEmptyDesc` }),
-            shoppingUrl ? (React.createElement(AccountButton, { btnType: 'purple-text', text: `shopNow`, url: shoppingUrl })) : null)));
+            React.createElement(Text, { tag: `h4`, className: `account-h4 account-font-bold account-primary-color1 empty-cart-title`, text: `cartEmpty` }),
+            React.createElement(Text, { className: `account-p account-p2 account-font-regular account-primary-color1 empty-cart-description`, text: `cartEmptyDesc` }),
+            shoppingUrl ? (React.createElement(AccountButton, { text: `shopNow`, url: shoppingUrl, btnType: 'purple-text', className: 'empty-cart-btn' })) : null)));
 };
 export default EmptyCart;

package/dist/components/cart/EmptyCart/style.js

@@ -8,7 +8,7 @@ const EmptyCartStyle = styled.section `
 		max-width: var(--account_emptyCartWrapMaxWidth);
 		width: 100%;
 
-		.description {
+		.empty-cart-description {
 			margin-top: var(--account_descriptionMTop);
 		}
 

package/dist/components/cart/Items/Simple/Item/index.js

@@ -1,12 +1,11 @@
 import React, { memo, useMemo } from 'react';
 import { Image, Text } from '@weareconceptstudio/core';
 import { Select } from '@weareconceptstudio/form';
-import { useAccountContext } from '../../../../../AccountProvider';
 import { handlePriceCheckFunc } from '../../../../../utils/_functions';
 import Button from '../../../../ui/AccountButton';
+//TODO: Fake
 const pathname = '/cart/';
-const Item = memo(({ data, remove, select, isLast, actions }) => {
-    const { currency, maxQty } = useAccountContext();
+const Item = memo(({ data, remove, select, isLast, actions, maxQty, currency }) => {
     const selectionList = useMemo(() => {
         if (select) {
             const selectList = [];
@@ -23,7 +22,7 @@ const Item = memo(({ data, remove, select, isLast, actions }) => {
                 React.createElement("div", { className: `image-wrapper` },
                     React.createElement(Image, { src: data?.product?.image?.src, alt: data?.product?.image?.alt })),
                 React.createElement("div", { className: `col-1-right-wrap` },
-                    React.createElement(Button, { url: data.product?.url, className: `capitalize`, text: data.product?.name, btnType: `green-large-text`, target: pathname === '/cart/' || pathname === '/checkout' ? '_blank' : '_self' }),
+                    React.createElement(Button, { url: data.product?.url, text: data.product?.name, btnType: `green-large-text`, className: `capitalize title-btn`, target: pathname === '/cart/' || pathname === '/checkout' ? '_blank' : '_self' }),
                     React.createElement("div", { className: `right-first-item-wrap` },
                         React.createElement(Text, { className: `account-p account-p3 account-font-regular account-primary-color1 capitalize`, text: data.product.short_info_1 })),
                     React.createElement("div", { className: `right-second-item-wrap` },
@@ -33,15 +32,15 @@ const Item = memo(({ data, remove, select, isLast, actions }) => {
                     qty: val,
                 }) })) : (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: `col-item tl-col-3 col-item-3 nowrap` }, data?.product?.sale_price ? (React.createElement("div", null,
-                React.createElement(Text, { className: `account-p account-p3 account-font-bold account-secondary-color2 alignRight`, text: handlePriceCheckFunc(data?.product?.sale_price, currency) }),
-                React.createElement(Text, { className: `account-p account-p3 account-font-regular account-primary-color2 line-through value align-right`, text: handlePriceCheckFunc(data.product?.price, currency) }))) : (React.createElement(Text, { className: `account-p account-p3 account-font-bold account-primary-color1 alignRight`, text: handlePriceCheckFunc(data.product?.price, currency) }))),
+                React.createElement(Text, { className: `account-p account-p3 account-font-bold account-secondary-color2 align-right cart-sale-price`, text: handlePriceCheckFunc(data?.product?.sale_price, currency) }),
+                React.createElement(Text, { className: `account-p account-p3 account-font-regular account-primary-color2 line-through value align-right cart-price1`, text: handlePriceCheckFunc(data.product?.price, currency) }))) : (React.createElement(Text, { className: `account-p account-p3 account-font-bold account-primary-color1 align-right cart-price2`, text: handlePriceCheckFunc(data.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?.product.sale_price ? (React.createElement("div", null,
-                        React.createElement(Text, { className: `account-p account-p3 account-font-bold account-secondary-color2 align-right`, text: `${data.sale_total} ${currency}` }),
-                        React.createElement(Text, { className: `account-p account-p3 account-font-regular account-primary-color2 line-through value align-right`, text: handlePriceCheckFunc(data.product?.price * data.qty, currency) }))) : (React.createElement(Text, { className: `account-p account-p3 account-font-bold account-primary-color1 align-right`, text: `${data.total} ${currency}` }))),
+                        React.createElement(Text, { className: `account-p account-p3 account-font-bold account-secondary-color2 align-right cart-sale-total`, text: `${data.sale_total} ${currency}` }),
+                        React.createElement(Text, { className: `account-p account-p3 account-font-regular account-primary-color2 line-through value align-right cart-total1`, text: handlePriceCheckFunc(data.product?.price * data.qty, currency) }))) : (React.createElement(Text, { className: `account-p account-p3 account-font-bold account-primary-color1 align-right cart-total2`, text: `${data.total} ${currency}` }))),
                     React.createElement("div", { className: `favorite-and-remove-wrap` }, remove && (React.createElement("div", { className: `remove-btn-wrap` },
-                        React.createElement(Button, { text: 'remove', btnType: `green-small-text`, onClick: () => actions.delete({ productId: data.product?.id }) }))))))),
+                        React.createElement(Button, { text: 'remove', btnType: `green-small-text`, className: 'cart-remove-btn', onClick: () => actions.delete({ productId: data.product?.id }) }))))))),
         isLast ? React.createElement("div", { className: 'line' }) : null));
 });
 export default Item;

package/dist/components/cart/Items/Simple/ItemMobile/index.js

@@ -1,26 +1,20 @@
 import React, { memo, useMemo } from 'react';
-import { Image, Text, useUi } from '@weareconceptstudio/core';
+import { Image, Text } from '@weareconceptstudio/core';
 import { Select } from '@weareconceptstudio/form';
 import Button from '../../../../ui/AccountButton';
-import { useAccountContext } from '../../../../../AccountProvider';
 import { handlePriceCheckFunc } from '../../../../../utils/_functions';
-// import ProductIndividual from '@/components/common/ProductIndividual';
 //TODO: Fake
 const pathname = '/cart/';
-const addToCart = () => { };
-const removeCart = () => { };
-const ItemMobile = memo(({ data, additionalParameters, isLast }) => {
-    const { openPopup } = useUi();
-    const { currency } = useAccountContext();
+const ItemMobile = memo(({ data, remove, select, isLast, actions, maxQty, currency }) => {
     const selectionList = useMemo(() => {
-        if (additionalParameters.select) {
+        if (select) {
             const selectList = [];
-            for (let index = 1; index <= data.qty; index++) {
+            for (let index = 1; index <= maxQty; index++) {
                 selectList.push({ id: index, name: index });
             }
             return selectList;
         }
-    }, [data]);
+    }, [data, select, maxQty]);
     return (React.createElement(React.Fragment, null,
         isLast ? React.createElement("div", { className: 'line' }) : null,
         React.createElement("div", { className: `mobile-order-item-wrap` },
@@ -28,18 +22,14 @@ const ItemMobile = memo(({ data, additionalParameters, isLast }) => {
                 React.createElement("div", { className: `mobile-image-wrap` },
                     React.createElement(Image, { src: data?.images?.[0].src, alt: data?.images?.[0].alt })),
                 React.createElement("div", { className: `mobile-info-wrap` },
-                    React.createElement(Button, { className: `capitalize`, url: data.product?.url, btnType: `green-large-text`, text: data.product?.name || data.name, target: pathname === '/cart/' || pathname === '/checkout/' ? '_blank' : '_self' }),
-                    additionalParameters.select ? (React.createElement("div", { className: `select-and-out-of-stock-mobile-wrap` }, !data.product?.out_of_stock ? (
-                    // <FormSelect
-                    // 	list={selectionList}
-                    // 	selectedValue={data.qty}
-                    // 	className={`quantity-select-mobile-wrap`}
-                    // 	onChange={(val) => addToCart({ productId: data.product.id, variantId: data.selectedVariant.id, optionId: data.selectedOption.id, qty: val, update: true })}
-                    // />
-                    React.createElement(Select, { allowSearch: false, options: selectionList, value: 1, onChange: () => { } })) : (React.createElement("div", { className: `mobile-info-item` },
+                    React.createElement(Button, { url: data.product?.url, btnType: `green-large-text`, text: data.product?.name || data.name, className: `capitalize mobile-info-wrap-title`, target: pathname === '/cart/' || pathname === '/checkout/' ? '_blank' : '_self' }),
+                    select ? (React.createElement("div", { className: `select-and-out-of-stock-mobile-wrap` }, !data.product?.out_of_stock ? (React.createElement(Select, { allowSearch: false, options: selectionList, value: data.qty, onChange: (val) => actions.add({
+                            productId: data.product.id,
+                            qty: val,
+                        }) })) : (React.createElement("div", { className: `mobile-info-item` },
                         React.createElement(Text, { className: `account-p account-p3 account-font-medium primaryColor1`, text: `quantityWithSymbol` }),
                         "\u00A0",
-                        React.createElement(Text, { className: `account-p account-p3 account-font-medium primaryColor1`, text: data.qty }))))) : (React.createElement("div", { className: `mobile-info-item` },
+                        React.createElement(Text, { className: `account-p account-p3 account-font-medium primaryColor1`, text: data.qty || data.quantity }))))) : (React.createElement("div", { className: `mobile-info-item` },
                         React.createElement(Text, { className: `account-p account-p3 account-font-medium primaryColor1`, text: `quantityWithSymbol` }),
                         "\u00A0",
                         React.createElement(Text, { className: `account-p account-p3 account-font-medium primaryColor1`, text: data.qty || data.quantity }))),
@@ -54,7 +44,7 @@ const ItemMobile = memo(({ data, additionalParameters, isLast }) => {
                             React.createElement(Text, { className: `account-p account-p3 account-font-bold secondaryColor2`, text: handlePriceCheckFunc(data.product?.discountedPrice * data.qty, currency) }),
                             React.createElement(Text, { className: `account-p account-p3 account-font-regular primaryColor2 lineThrough`, text: handlePriceCheckFunc(data.product?.price * data.qty, currency) }))) : (React.createElement(Text, { className: `account-p account-p3 account-font-bold primaryColor1`, text: handlePriceCheckFunc(data.product?.price * data.qty || data.total, currency || currency) }))))),
             pathname === '/cart/' && (React.createElement("div", { className: `edit-remove-favorite-mobile-wrap` },
-                React.createElement("div", { className: `favorite-remove-mobile-wrap` }, additionalParameters.remove && (React.createElement(Button, { text: 'remove', btnType: `green-small-text`, onClick: () => removeCart({ productId: data.product.id, variantId: data.selectedVariant.id, optionId: data.selectedOption.id }) })))))),
+                React.createElement("div", { className: `favorite-remove-mobile-wrap` }, remove && (React.createElement(Button, { text: 'remove', btnType: `green-small-text`, onClick: () => actions.delete({ productId: data.product?.id }) })))))),
         React.createElement("div", { className: 'line' })));
 });
 export default ItemMobile;

package/dist/components/cart/Items/Simple/index.js

@@ -3,9 +3,10 @@ import { Text, useUi } from '@weareconceptstudio/core';
 //* Components
 import Item from './Item';
 import ItemMobile from './ItemMobile';
+import Button from '../../../ui/AccountButton';
 //* Style
 import CartItemsStyle from './style';
-const CartItems = memo(({ data, className, title, smallFontSize, additionalParameters, currency, isLast, actions }) => {
+const CartItems = memo(({ data, className, title, smallFontSize, additionalParameters, actions, currency, maxQty }) => {
     const { winWidth } = useUi();
     //! Store
     const orderStore = useMemo(() => {
@@ -16,20 +17,20 @@ const CartItems = memo(({ data, className, title, smallFontSize, additionalParam
                 React.createElement("div", { className: `title-wrap tl-col-2` },
                     React.createElement(Text, { className: `account-p account-p3 account-font-bold account-primary-color1 nowrap`, text: `quantity` })),
                 React.createElement("div", { className: `title-wrap tl-col-3 title-item` },
-                    React.createElement(Text, { className: `account-p account-p3 account-font-bold account-primary-color1 nowrap alignRight`, text: `price` })),
+                    React.createElement(Text, { className: `account-p account-p3 account-font-bold account-primary-color1 nowrap align-right`, text: `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 alignRight`, text: `total` }))),
+                    React.createElement(Text, { className: `account-p account-p3 account-font-bold account-primary-color1 nowrap align-right`, text: `total` }))),
             React.createElement("div", { className: `items-wrap` }, data?.map((item, index) => {
-                return (React.createElement(Item, { key: index, data: item, currency: currency, isLast: data.length - 1 == index, select: additionalParameters.select, remove: additionalParameters.remove, edit: additionalParameters.edit.item, actions: actions }));
+                return (React.createElement(Item, { key: index, data: item, maxQty: maxQty, actions: actions, currency: currency, isLast: data.length - 1 == index, select: additionalParameters.select, remove: additionalParameters.remove, edit: additionalParameters.edit.item }));
             })))) : (React.createElement("div", { className: `mobile-order-items-table-wrap` }, data?.map((item, index) => {
-            return (React.createElement(ItemMobile, { key: index, data: item, isLast: isLast, currency: currency, additionalParameters: additionalParameters }));
+            return (React.createElement(ItemMobile, { key: index, data: item, maxQty: maxQty, actions: actions, currency: currency, isLast: data.length - 1 == index, select: additionalParameters.select, remove: additionalParameters.remove, edit: additionalParameters.edit.item }));
         })));
-    }, [winWidth, data, additionalParameters, currency]);
+    }, [winWidth, data, additionalParameters, currency, actions, maxQty]);
     return (React.createElement(CartItemsStyle, { className: className || '' },
         additionalParameters.edit.list ? (React.createElement("div", { className: `title-edit-wrapper` },
-            React.createElement(Text, { className: `p ${smallFontSize ? 'p2' : 'p1'} account-font-bold account-primary-color1`, text: title }),
-            React.createElement(Button, { url: '/cart/', text: `editCart`, btnType: `green-small-text` }))) : (React.createElement(Text, { className: `p ${smallFontSize ? 'p2' : 'p1'} account-font-bold account-primary-color1`, text: title })),
-        additionalParameters.horizontalLine && React.createElement("div", { className: `order-items-line` }),
+            React.createElement(Text, { className: `account-p ${smallFontSize ? 'account-p2' : 'account-p1'} account-font-bold account-primary-color1 cart-items-title2-version`, text: title }),
+            React.createElement(Button, { url: '/cart/', text: `editCart`, btnType: `green-small-text`, className: 'cart-items-edit-btn' }))) : (React.createElement(Text, { className: `account-p ${smallFontSize ? 'account-p2' : 'account-p1'} account-font-bold account-primary-color1 cart-items-title1-version`, text: title })),
+        additionalParameters.horizontalLine ? React.createElement("div", { className: `order-items-line` }) : null,
         orderStore));
 });
 export default CartItems;

package/dist/components/cart/Items/Simple/style.js

@@ -132,6 +132,13 @@ const CartItemsStyle = styled.section `
 				flex: 1;
 				margin-left: var(--col1RightWrapML);
 
+				.title-btn {
+					a,
+					button {
+						text-align: left;
+					}
+				}
+
 				.btn-wrap {
 					margin-bottom: 0 !important;
 				}
@@ -251,7 +258,7 @@ const CartItemsStyle = styled.section `
 		}
 	}
 
-	@media only screen and (max-width: ${(props) => props.theme.mediaQuery.DesktopSizeXLMin}) and (min-width: ${(props) => props.theme.mediaQuery.DesktopSizeL}) {
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXLMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeL}) {
 		--spaceLineMTop: var(--sp2x);
 		--spaceLineMBot: var(--sp4x);
 
@@ -295,7 +302,7 @@ const CartItemsStyle = styled.section `
 		}
 	}
 
-	@media only screen and (max-width: ${(props) => props.theme.mediaQuery.DesktopSizeLMin}) and (min-width: ${(props) => props.theme.mediaQuery.DesktopSizeM}) {
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeLMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeM}) {
 		--spaceLineMTop: var(--sp2x);
 		--spaceLineMBot: var(--sp4x);
 
@@ -339,7 +346,7 @@ const CartItemsStyle = styled.section `
 		}
 	}
 
-	@media only screen and (max-width: ${(props) => props.theme.mediaQuery.DesktopSizeMMin}) and (min-width: ${(props) => props.theme.mediaQuery.DesktopSizeS}) {
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeMMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeS}) {
 		--spaceLineMTop: var(--sp2x);
 		--spaceLineMBot: var(--sp3x);
 
@@ -383,7 +390,7 @@ const CartItemsStyle = styled.section `
 		}
 	}
 
-	@media only screen and (max-width: ${(props) => props.theme.mediaQuery.DesktopSizeSMin}) and (min-width: ${(props) => props.theme.mediaQuery.DesktopSizeXS}) {
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeSMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXS}) {
 		--spaceLineMTop: var(--sp2x);
 		--spaceLineMBot: var(--sp3x);
 
@@ -428,7 +435,7 @@ const CartItemsStyle = styled.section `
 		}
 	}
 
-	@media only screen and (max-width: ${(props) => props.theme.mediaQuery.DesktopSizeXSMin}) and (min-width: ${(props) => props.theme.mediaQuery.TabletSize}) {
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXSMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_TabletSize}) {
 		--spaceLineMTop: var(--sp2x);
 		--spaceLineMBot: var(--sp3x);
 
@@ -474,7 +481,7 @@ const CartItemsStyle = styled.section `
 		}
 	}
 
-	@media only screen and (max-width: ${(props) => props.theme.mediaQuery.TabletSizeMin}) and (min-width: ${(props) => props.theme.mediaQuery.TabletSizeS}) {
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeS}) {
 		--spaceLineMTop: var(--sp2x);
 		--spaceLineMBot: var(--sp2x);
 
@@ -519,7 +526,7 @@ const CartItemsStyle = styled.section `
 		}
 	}
 
-	@media only screen and (max-width: ${(props) => props.theme.mediaQuery.TabletSizeSMin}) {
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeSMin}) {
 		--spaceLineMTop: var(--sp2x);
 		--spaceLineMBot: 0;
 		--orderItemsMarTop: var(--sp6x);

package/dist/components/ui/AccountButton/index.js

@@ -1,4 +1,4 @@
-import React, { memo, useMemo } from 'react';
+import React, { memo, useCallback, useMemo } from 'react';
 import classNames from 'classnames';
 import { Link, useTranslation } from '@weareconceptstudio/core';
 import { useTheme } from 'styled-components';
@@ -14,7 +14,10 @@ const AccountButton = memo(({ btnType, text, className, onClick, children, url,
         [btnType]: btnType,
         [className]: className,
     });
-    return (React.createElement(AccountButtonStyle, { onClick: onClick, className: classString, theme: theme(globalTheme) },
+    const handleClick = useCallback(() => {
+        return !disabled && onClick?.();
+    }, [onClick, disabled]);
+    return (React.createElement(AccountButtonStyle, { onClick: handleClick, className: classString, theme: theme(globalTheme) },
         React.createElement(Component, { ...customProps },
             svg_icon || children || translate(text),
             " ")));

package/dist/components/ui/AccountButton/style.js

@@ -164,10 +164,12 @@ const AccountButtonStyle = styled.div `
 	}
 
 	&.disabled {
+		pointer-events: none;
+		opacity: 0.5;
+
 		button,
 		a {
 			pointer-events: none;
-			opacity: 0.5;
 		}
 	}
 

package/dist/templates/AccountTemplate/index.js

@@ -16,7 +16,7 @@ const AccountTemplate = ({ isFullWidth = false, menuOptions = [], children, onSi
             React.createElement(Text, { tag: `span`, className: `account-p account-p1 account-font-bold sidebar-item`, text: menuItem.name }))));
     }, [menuOptions]);
     return (React.createElement(Page, { className: 'account use-account' },
-        React.createElement(AccountStyle, null,
+        React.createElement(AccountStyle, { className: 'account-container' },
             React.createElement("div", { className: 'account-wrap' },
                 React.createElement("aside", { className: 'sidebar' },
                     React.createElement("div", { className: `sidebar-inner-wrap` },

package/dist/templates/AccountTemplate/style.js

@@ -33,12 +33,6 @@ const AccountStyle = styled.section `
 			width: var(--account_sidebarWidth);
 			padding: 0 calc(var(--account_colDistance) / 2);
 
-			//! Sticky Styles
-			.sidebar-inner-wrap {
-				position: sticky;
-				top: calc(var(--account_accountPadT) + ${(props) => props.$headerHeight}px);
-			}
-
 			.my-acc-wrap {
 				.account-line {
 					width: var(--account_accountLineWidth);

package/dist/templates/CartTemplate/index.js

@@ -1,25 +1,27 @@
 import React from 'react';
 import { Container, Page } from '@weareconceptstudio/core';
 import { EmptyCart, TotalCheckout, AccountButton, SimpleCartItems } from '../../components';
-import CartTemplateStyle from './style';
 import { useAccountContext } from '../../AccountProvider';
+//* Styles
+import CartTemplateStyle from './style';
 const CartTemplate = ({ items, itemsCount, shippingCost, loading, children, subtotal, total, actions, btnDisabled, checkoutUrl = '/checkout/' }) => {
     const { shopUrl } = useAccountContext();
+    const { maxQty, currency } = useAccountContext();
     return (React.createElement(Page, { className: 'cart use-account' },
         React.createElement(Container, null,
             React.createElement(CartTemplateStyle, null,
                 React.createElement(TotalCheckout, { total: total, subtotal: subtotal, itemsCount: itemsCount, shippingCost: shippingCost, buttonProps: {
                         url: checkoutUrl,
-                        text: 'proceedToCheckout',
                         disabled: btnDisabled,
+                        text: 'proceedToCheckout',
                     } }, itemsCount > 0 ? (React.createElement(React.Fragment, null,
-                    React.createElement(SimpleCartItems, { data: items, smallFontSize: true, title: 'myCart', className: `cart-st-wrap`, additionalParameters: {
-                            edit: { list: false },
+                    React.createElement(SimpleCartItems, { data: items, smallFontSize: true, maxQty: maxQty, title: 'myCart', actions: actions, currency: currency, className: `cart-st-wrap`, additionalParameters: {
                             remove: true,
-                            horizontalLine: true,
                             select: true,
-                        }, actions: actions }),
-                    shopUrl ? (React.createElement(AccountButton, { btnType: `purple-text`, text: `continueShopping`, className: `continue-shop-text`, url: shopUrl })) : null)) : (!loading && (React.createElement(EmptyCart, { data: items, shoppingUrl: shopUrl })))),
+                            horizontalLine: true,
+                            edit: { list: false },
+                        } }),
+                    shopUrl ? (React.createElement(AccountButton, { url: shopUrl, btnType: `purple-text`, text: `continueShopping`, className: `continue-shop-text` })) : null)) : (!loading && (React.createElement(EmptyCart, { data: items, shoppingUrl: shopUrl })))),
                 children))));
 };
 export default CartTemplate;

package/dist/templates/CheckoutTemplate/StepReview/index.d.ts

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

package/dist/templates/CheckoutTemplate/StepReview/index.js

@@ -1,8 +1,16 @@
 import React from 'react';
 import { SelectShippingBilling, useAddressContext } from '../../../modules';
 import SelectAddress from '../../../modules/address/SelectAddress';
-const StepReview = () => {
+import { SimpleCartItems } from '../../../components';
+const StepReview = ({ items }) => {
     const { hasAddressType } = useAddressContext();
-    return React.createElement("div", { className: 'step-review' }, hasAddressType ? React.createElement(SelectShippingBilling, null) : React.createElement(SelectAddress, { title: 'addresses' }));
+    return (React.createElement("div", { className: 'step-review' },
+        hasAddressType ? React.createElement(SelectShippingBilling, null) : React.createElement(SelectAddress, { title: 'addresses' }),
+        React.createElement(SimpleCartItems, { data: items, smallFontSize: true, title: 'orderItems', className: `checkout-mt`, additionalParameters: {
+                remove: false,
+                select: false,
+                horizontalLine: false,
+                edit: { item: false, list: true },
+            } })));
 };
 export default StepReview;

package/dist/templates/CheckoutTemplate/index.d.ts

@@ -1,6 +1,7 @@
 export default CheckoutTemplate;
-declare function CheckoutTemplate({ itemsCount, total, subtotal, shippingCost, currency }: {
+declare function CheckoutTemplate({ itemsCount, items, total, subtotal, shippingCost, currency }: {
     itemsCount: any;
+    items: any;
     total: any;
     subtotal: any;
     shippingCost: any;

package/dist/templates/CheckoutTemplate/index.js

@@ -5,7 +5,7 @@ import { Sequence, TotalCheckout } from '../../components';
 import StepShipping from './StepShipping';
 import StepReview from './StepReview';
 import CheckoutTemplateStyle from './style';
-const CheckoutTemplate = ({ itemsCount, total, subtotal, shippingCost, currency }) => {
+const CheckoutTemplate = ({ itemsCount, items, total, subtotal, shippingCost, currency }) => {
     const { hasCheckoutAddress } = useAddressContext();
     const firstStepFormRef = useRef();
     const checkStep = {
@@ -22,15 +22,14 @@ const CheckoutTemplate = ({ itemsCount, total, subtotal, shippingCost, currency
     return (React.createElement(Page, { className: 'checkout use-account' },
         React.createElement(Container, null,
             React.createElement(CheckoutTemplateStyle, null,
-                React.createElement(TotalCheckout, { total: total, subtotal: subtotal, currency: currency, shippingCost: shippingCost, isShipping: checkStep.isShipping, itemsCount: itemsCount, buttonProps: {
-                        disabled: false,
-                        loading: false,
+                React.createElement(TotalCheckout, { total: total, subtotal: subtotal, currency: currency, itemsCount: itemsCount, shippingCost: shippingCost, isShipping: checkStep.isShipping, buttonProps: {
                         url: false,
+                        disabled: false,
+                        handleClick: handleCheckoutBtn,
                         type: checkStep.isShipping ? 'submit' : 'button',
                         text: checkStep.isShipping ? 'proceedToCheckout' : 'proceedToPayment',
-                        handleClick: handleCheckoutBtn,
                     } },
                     React.createElement(Sequence, { step: checkStep.isShipping ? 'shipping' : 'review' }),
-                    checkStep.isShipping ? React.createElement(StepShipping, { firstStepFormRef: firstStepFormRef }) : React.createElement(StepReview, null))))));
+                    checkStep.isShipping ? React.createElement(StepShipping, { firstStepFormRef: firstStepFormRef }) : React.createElement(StepReview, { items: items }))))));
 };
 export default CheckoutTemplate;