@weareconceptstudio/account 0.5.4 → 0.5.6

package/dist/components/Loader/index.js

@@ -19,6 +19,7 @@ const Loader = ({ className, pathname }) => {
             setLoaderState('initial');
         }, 2200);
         return () => {
+            setLoaderState(false);
             clearTimeout(intervalStart.current);
             clearTimeout(intervalEnd.current);
             clearTimeout(intervalRerender.current);

package/dist/components/Pagination/index.js

@@ -1,4 +1,4 @@
-import React, { memo, useMemo } from 'react';
+import React, { memo, useEffect, useMemo, useRef } from 'react';
 //* Icons
 const left_arrow = (React.createElement("svg", { xmlns: 'http://www.w3.org/2000/svg', version: '1.1', viewBox: '0 0 32 32' },
     React.createElement("path", { d: 'M24.015 31.254c0.261 0.001 0.519-0.057 0.756-0.167s0.446-0.272 0.613-0.473c0.15-0.18 0.262-0.387 0.332-0.61s0.094-0.458 0.073-0.691c-0.021-0.233-0.089-0.459-0.198-0.666s-0.258-0.39-0.438-0.539l-14.382-11.876 14.222-12.284c0.185-0.15 0.337-0.336 0.448-0.547s0.179-0.441 0.2-0.678c0.021-0.237-0.007-0.476-0.080-0.703s-0.192-0.436-0.348-0.616c-0.156-0.18-0.346-0.327-0.56-0.431s-0.446-0.166-0.684-0.179-0.476 0.022-0.7 0.102c-0.224 0.081-0.43 0.205-0.605 0.367l-15.84 13.653c-0.197 0.169-0.355 0.379-0.463 0.615s-0.162 0.494-0.159 0.753c0.004 0.26 0.065 0.515 0.179 0.748s0.277 0.439 0.479 0.603l16 13.209c0.32 0.278 0.733 0.424 1.156 0.409z' })));
@@ -7,10 +7,25 @@ const right_arrow = (React.createElement("svg", { xmlns: 'http://www.w3.org/2000
 //* Style
 import PaginationStyle from './style';
 import { getParamsByKey } from '@weareconceptstudio/core';
-const Pagination = memo(({ total, pageSize, onChange, activePageState, left_icon = false, right_icon = false }) => {
+const Pagination = memo(({ total, pageSize, onChange, activePageState, left_icon = false, right_icon = false, parentElement }) => {
+    //! Ref
+    const paginationRef = useRef();
+    useEffect(() => {
+        if ((parentElement || paginationRef.current) && activePageState) {
+            const parentElements = parentElement || paginationRef.current.parentElement;
+            const getHeader = document.querySelector('header');
+            const distance = parentElements.getBoundingClientRect().top;
+            const sizeScroll = (Math.floor(Math.abs(distance)) == 0 ? 0 : Math.floor(distance)) + window.scrollY - (getHeader ? getHeader.clientHeight : 0);
+            if (sizeScroll) {
+                requestAnimationFrame(() => {
+                    window.scrollTo({ top: sizeScroll, behavior: 'smooth' });
+                });
+            }
+        }
+    }, [activePageState, parentElement]);
     const maxPage = useMemo(() => Math.ceil(total / pageSize), [total, pageSize]);
     const activePage = useMemo(() => Number(getParamsByKey(new URLSearchParams(window.location.search), 'page')) || activePageState || 1, [window.location.search, activePageState]);
-    return (total > pageSize && (React.createElement(PaginationStyle, { className: `pg-container account-primary-color1` },
+    return (total > pageSize && (React.createElement(PaginationStyle, { ref: paginationRef, className: `pg-container account-primary-color1` },
         React.createElement("div", { className: `pg-icon ${activePage === 1 ? 'disabled-icon' : ''}`, onClick: () => activePage > 1 && onChange(activePage - 1 >= 1 ? activePage - 1 : activePage) }, left_icon || left_arrow),
         React.createElement("span", { className: `pg-numbers account-p account-p4 account-font-bold` }, `${activePage} / ${maxPage}`),
         React.createElement("div", { onClick: () => activePage < maxPage && onChange(activePage + 1), className: `pg-icon ${activePage === maxPage ? 'disabled-icon' : ''}` }, right_icon || right_arrow))));

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { handlePriceCheckFunc, useTranslation } from '@weareconceptstudio/core';
 import { useAccountContext } from '../../../AccountProvider';
 import { useCheckoutContext } from '../../../modules';
@@ -8,11 +8,24 @@ const FreeShippingComp = () => {
     const { translate } = useTranslation();
     const { useCart } = useAccountContext();
     const { isCheckoutPage } = useCheckoutContext();
-    const { shippingCostValue, freeShippingRange, shippingCost, currency } = useCart();
+    const { shippingCostValue, freeShippingRange, shippingCost, items, currency } = useCart();
+    const [freeShow, setFreeShow] = useState(items?.length);
+    useEffect(() => {
+        let timeoutID;
+        if (typeof shippingCost != 'number' && typeof freeShippingRange != 'number') {
+            timeoutID = setTimeout(() => {
+                setFreeShow(false);
+            }, 3000);
+        }
+        else {
+            clearTimeout(timeoutID);
+            setFreeShow(true);
+        }
+    }, [shippingCost, freeShippingRange]);
     return !isCheckoutPage ? (freeShippingRange ? (React.createElement(FreeShippingCompStyle, null,
         React.createElement("svg", { fill: 'none', viewBox: '0 0 24 24', xmlns: 'http://www.w3.org/2000/svg', className: 'free-shipping-comp-icon' },
             React.createElement("path", { d: 'M21.675 14.475V9.9L17.925 6.15H15.375V4.125H2.85C2.325 4.725 2.025 5.025 1.5 5.55V16.65H3.3C3.3 18.375 4.725 19.8 6.45 19.8C8.175 19.8 9.6 18.375 9.6 16.65H13.35C13.35 18.375 14.775 19.8 16.5 19.8C18.225 19.8 19.65 18.375 19.65 16.65H22.35V14.475H21.675ZM6.45 18.6C5.475 18.6 4.65 17.775 4.65 16.8C4.65 15.825 5.475 15 6.45 15C7.425 15 8.25 15.825 8.25 16.8C8.25 17.775 7.5 18.6 6.45 18.6ZM16.575 18.6C15.6 18.6 14.775 17.775 14.775 16.8C14.775 15.825 15.6 15 16.575 15C17.55 15 18.375 15.825 18.375 16.8C18.375 17.775 17.625 18.6 16.575 18.6ZM19.575 11.1H15.375V7.95H17.025L19.575 10.5V11.1Z' })),
-        React.createElement("span", { className: 'free-shipping-comp-attr' }, translate('account.notifications_messages.freeShippingNote', { price: React.createElement("span", { className: 'range-value' }, handlePriceCheckFunc(freeShippingRange, currency)) })))) : typeof shippingCost != 'number' ? (React.createElement(FreeShippingCompStyle, null,
+        React.createElement("span", { className: 'free-shipping-comp-attr' }, translate('account.notifications_messages.freeShippingNote', { price: React.createElement("span", { className: 'range-value' }, handlePriceCheckFunc(freeShippingRange, currency)) })))) : typeof shippingCost != 'number' && freeShow ? (React.createElement(FreeShippingCompStyle, null,
         React.createElement("svg", { fill: 'none', viewBox: '0 0 16 16', xmlns: 'http://www.w3.org/2000/svg', className: 'free-shipping-comp-icon' },
             React.createElement("path", { d: 'M13.901 5.06321C13.835 5.1324 13.754 5.167 13.658 5.167C13.562 5.167 13.481 5.1324 13.415 5.06321L13.388 5.03491C13.2081 4.84621 12.9981 4.74871 12.7611 4.74242C12.5241 4.73613 12.3111 4.83363 12.1191 5.03491L8.90036 8.40947C8.83437 8.47866 8.75337 8.51326 8.65738 8.51326C8.56139 8.51326 8.48039 8.47866 8.4144 8.40947C8.3484 8.34028 8.3154 8.25537 8.3154 8.15473C8.3154 8.05409 8.3484 7.96917 8.4144 7.89998L11.5912 4.56945C11.8941 4.25181 12.2811 4.08827 12.7461 4.08512C13.2111 4.07883 13.595 4.23608 13.901 4.55687C13.967 4.62606 14 4.71097 14 4.81161C14 4.91225 13.967 4.99717 13.901 5.06636V5.06321ZM6.17655 3.19509C6.24255 3.1259 6.32354 3.09131 6.41954 3.09131C6.51553 3.09131 6.59652 3.1259 6.66252 3.19509L6.79151 3.33033C7.12449 3.67942 7.28648 4.11343 7.28348 4.63864C7.27748 5.16071 7.10949 5.59786 6.77651 5.94695L6.63552 6.09477C6.56953 6.16396 6.48853 6.19855 6.39254 6.19855C6.29655 6.19855 6.21555 6.16396 6.14956 6.09477C6.08356 6.02558 6.05056 5.94066 6.05056 5.84002C6.05056 5.73938 6.08356 5.65447 6.14956 5.58528L6.33554 5.39029C6.55453 5.16071 6.65652 4.89967 6.64152 4.60719C6.62652 4.31471 6.52453 4.06625 6.33554 3.86812L6.17955 3.70458C6.11356 3.63539 6.08056 3.55048 6.08056 3.44984C6.08056 3.3492 6.11356 3.26428 6.17955 3.19509H6.17655ZM8.58538 2.10378C8.65138 2.03459 8.73237 2 8.82837 2C8.92436 2 9.00535 2.03459 9.07135 2.10378L9.7253 2.78939C10.0193 3.10703 10.1723 3.50959 10.1813 3.99077C10.1903 4.4751 10.0433 4.87451 9.7403 5.19216L7.78744 7.23954C7.72145 7.30873 7.64045 7.34332 7.54446 7.34332C7.44846 7.34332 7.36747 7.30873 7.30147 7.23954C7.23548 7.17035 7.20248 7.08543 7.20248 6.9848C7.20248 6.88416 7.23548 6.79924 7.30147 6.73005L9.22434 4.71412C9.40433 4.52542 9.49132 4.28326 9.48832 3.99077C9.48232 3.69829 9.39233 3.45613 9.20934 3.26743L8.58238 2.61013C8.51639 2.54094 8.48339 2.45602 8.48339 2.35538C8.48339 2.25474 8.51639 2.16983 8.58238 2.10064L8.58538 2.10378ZM12.8601 9.64859C12.7941 9.71778 12.7131 9.75238 12.6171 9.75238C12.5211 9.75238 12.4401 9.71778 12.3741 9.64859L11.8761 9.12653C11.6572 8.89694 11.4292 8.78372 11.1922 8.78372C10.9552 8.78372 10.7272 8.89694 10.5082 9.12653L10.0373 9.62029C9.97129 9.68948 9.89029 9.72407 9.7943 9.72407C9.6983 9.72407 9.61731 9.68948 9.55131 9.62029C9.48532 9.5511 9.45232 9.46619 9.45232 9.36555C9.45232 9.26491 9.48532 9.17999 9.55131 9.1108L9.97728 8.66422C10.3103 8.31512 10.7092 8.13586 11.1742 8.12642C11.6392 8.11699 12.0381 8.28682 12.3711 8.63277L12.8541 9.13911C12.9201 9.2083 12.9531 9.29321 12.9531 9.39385C12.9531 9.49449 12.9201 9.5794 12.8541 9.64859H12.8601ZM2.36082 13.9855L9.01435 11.501C9.20034 11.4318 9.25434 11.1802 9.11335 11.0355L4.81765 6.6074C4.67666 6.46273 4.44268 6.51934 4.37668 6.71433L2.01585 13.6239C1.94085 13.8471 2.14484 14.0641 2.35783 13.9824L2.36082 13.9855Z' })),
         React.createElement("span", { className: 'free-shipping-comp-attr' }, translate('account.notifications_messages.freeShippingSuccessText', { price: React.createElement("span", { className: 'range-value' }, handlePriceCheckFunc(shippingCostValue, currency)) })))) : null) : null;

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

@@ -9,7 +9,7 @@ const FreeShippingCompStyle = styled.div `
 	display: flex;
 	gap: var(--account_freeShippingAttrGap);
 
-	margin: var(--account_freeShippingBlockDistance) 0;
+	margin: var(--account_commentMarginTop) 0;
 	margin-bottom: 0;
 	background-color: var(--account_surfaceColor);
 	padding: var(--account_freeShippingBlockPadTB) var(--account_freeShippingBlockPadLR);

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

@@ -1,18 +1,32 @@
-import React from 'react';
-import { handlePriceCheckFunc, useTranslation } from '@weareconceptstudio/core';
+import React, { useEffect, useState } from 'react';
+import { useCheckoutContext } from '../../../modules';
 import { useAccountContext } from '../../../AccountProvider';
+import { handlePriceCheckFunc, useTranslation } from '@weareconceptstudio/core';
 //* Style
 import GiftCompStyle from './style';
 const GiftComp = () => {
     const { translate } = useTranslation();
     const { useCart } = useAccountContext();
     const { hasFreeGift, giftThresholdRemaining, currency } = useCart();
-    return giftThresholdRemaining && !hasFreeGift ? (React.createElement(GiftCompStyle, null,
+    const { isCheckoutPage } = useCheckoutContext();
+    const [show, setShow] = useState(true);
+    useEffect(() => {
+        if (hasFreeGift) {
+            const timer = setTimeout(() => {
+                setShow(false);
+            }, 5000);
+            return () => clearTimeout(timer);
+        }
+        else {
+            setShow(true);
+        }
+    }, [hasFreeGift]);
+    return !isCheckoutPage ? (giftThresholdRemaining && !hasFreeGift ? (React.createElement(GiftCompStyle, null,
         React.createElement("svg", { fill: 'none', viewBox: '0 0 24 23', className: 'gift-comp-icon', xmlns: 'http://www.w3.org/2000/svg' },
             React.createElement("path", { d: 'M20.25 5.75003H16.9613C16.9978 5.71909 17.0353 5.68909 17.0709 5.65628C17.3557 5.40332 17.5851 5.09433 17.745 4.74864C17.9049 4.40295 17.9917 4.02799 18 3.64721C18.0123 3.23066 17.9394 2.81598 17.7856 2.42864C17.6319 2.0413 17.4006 1.68947 17.106 1.39474C16.8113 1.10002 16.4596 0.86863 16.0723 0.714771C15.685 0.560913 15.2703 0.487836 14.8538 0.500027C14.4728 0.508232 14.0977 0.594982 13.7518 0.754846C13.406 0.91471 13.0968 1.14425 12.8438 1.42909C12.4936 1.83493 12.2089 2.29294 12 2.78659C11.7911 2.29294 11.5064 1.83493 11.1562 1.42909C10.9032 1.14425 10.594 0.91471 10.2482 0.754846C9.90232 0.594982 9.52718 0.508232 9.14625 0.500027C8.72969 0.487836 8.31503 0.560913 7.92774 0.714771C7.54044 0.86863 7.18868 1.10002 6.89405 1.39474C6.59941 1.68947 6.36812 2.0413 6.21438 2.42864C6.06064 2.81598 5.98768 3.23066 6 3.64721C6.00833 4.02799 6.09514 4.40295 6.255 4.74864C6.41486 5.09433 6.64434 5.40332 6.92906 5.65628C6.96469 5.68721 7.00219 5.71721 7.03875 5.75003H3.75C3.35218 5.75003 2.97064 5.90806 2.68934 6.18937C2.40804 6.47067 2.25 6.8522 2.25 7.25003V10.25C2.25 10.6479 2.40804 11.0294 2.68934 11.3107C2.97064 11.592 3.35218 11.75 3.75 11.75V17.75C3.75 18.1479 3.90804 18.5294 4.18934 18.8107C4.47064 19.092 4.85218 19.25 5.25 19.25H10.875C10.9745 19.25 11.0698 19.2105 11.1402 19.1402C11.2105 19.0699 11.25 18.9745 11.25 18.875V10.25H3.75V7.25003H11.25V10.25H12.75V7.25003H20.25V10.25H12.75V18.875C12.75 18.9745 12.7895 19.0699 12.8598 19.1402C12.9302 19.2105 13.0255 19.25 13.125 19.25H18.75C19.1478 19.25 19.5294 19.092 19.8107 18.8107C20.092 18.5294 20.25 18.1479 20.25 17.75V11.75C20.6478 11.75 21.0294 11.592 21.3107 11.3107C21.592 11.0294 21.75 10.6479 21.75 10.25V7.25003C21.75 6.8522 21.592 6.47067 21.3107 6.18937C21.0294 5.90806 20.6478 5.75003 20.25 5.75003ZM7.92281 4.53128C7.79168 4.41253 7.68651 4.26795 7.61391 4.10661C7.54131 3.94528 7.50285 3.77068 7.50094 3.59378C7.4962 3.3865 7.53287 3.18036 7.60881 2.98743C7.68476 2.79451 7.79844 2.61868 7.9432 2.47025C8.08796 2.32182 8.26089 2.20378 8.45186 2.12304C8.64282 2.04229 8.84798 2.00047 9.05531 2.00003H9.10125C9.27815 2.00194 9.45275 2.0404 9.61409 2.113C9.77542 2.1856 9.92 2.29077 10.0388 2.4219C10.8253 3.31065 11.1028 4.7844 11.2003 5.69565C10.2853 5.59909 8.8125 5.32159 7.92281 4.53128ZM16.0791 4.53128C15.1894 5.31878 13.7128 5.59628 12.7978 5.69378C12.9094 4.70846 13.2188 3.26565 13.9688 2.42284C14.0875 2.2917 14.2321 2.18653 14.3934 2.11393C14.5547 2.04133 14.7293 2.00287 14.9062 2.00096H14.9522C15.1595 2.00226 15.3645 2.04493 15.5552 2.12647C15.7458 2.20801 15.9183 2.32678 16.0624 2.47582C16.2066 2.62487 16.3195 2.80118 16.3947 2.99444C16.4698 3.18769 16.5056 3.394 16.5 3.60128C16.4969 3.77698 16.4578 3.95019 16.3851 4.11016C16.3124 4.27013 16.2076 4.41347 16.0772 4.53128H16.0791Z' })),
-        React.createElement("span", { className: 'gift-comp-attr' }, translate('account.notifications_messages.giftNote', { price: React.createElement("span", { className: 'range-value' }, handlePriceCheckFunc(giftThresholdRemaining, currency)) })))) : hasFreeGift ? (React.createElement(GiftCompStyle, null,
+        React.createElement("span", { className: 'gift-comp-attr' }, translate('account.notifications_messages.giftNote', { price: React.createElement("span", { className: 'range-value' }, handlePriceCheckFunc(giftThresholdRemaining, currency)) })))) : hasFreeGift && show ? (React.createElement(GiftCompStyle, null,
         React.createElement("svg", { fill: 'none', viewBox: '0 0 16 16', className: 'gift-comp-icon', xmlns: 'http://www.w3.org/2000/svg' },
             React.createElement("path", { d: 'M13.901 5.06321C13.835 5.1324 13.754 5.167 13.658 5.167C13.562 5.167 13.481 5.1324 13.415 5.06321L13.388 5.03491C13.2081 4.84621 12.9981 4.74871 12.7611 4.74242C12.5241 4.73613 12.3111 4.83363 12.1191 5.03491L8.90036 8.40947C8.83437 8.47866 8.75337 8.51326 8.65738 8.51326C8.56139 8.51326 8.48039 8.47866 8.4144 8.40947C8.3484 8.34028 8.3154 8.25537 8.3154 8.15473C8.3154 8.05409 8.3484 7.96917 8.4144 7.89998L11.5912 4.56945C11.8941 4.25181 12.2811 4.08827 12.7461 4.08512C13.2111 4.07883 13.595 4.23608 13.901 4.55687C13.967 4.62606 14 4.71097 14 4.81161C14 4.91225 13.967 4.99717 13.901 5.06636V5.06321ZM6.17655 3.19509C6.24255 3.1259 6.32354 3.09131 6.41954 3.09131C6.51553 3.09131 6.59652 3.1259 6.66252 3.19509L6.79151 3.33033C7.12449 3.67942 7.28648 4.11343 7.28348 4.63864C7.27748 5.16071 7.10949 5.59786 6.77651 5.94695L6.63552 6.09477C6.56953 6.16396 6.48853 6.19855 6.39254 6.19855C6.29655 6.19855 6.21555 6.16396 6.14956 6.09477C6.08356 6.02558 6.05056 5.94066 6.05056 5.84002C6.05056 5.73938 6.08356 5.65447 6.14956 5.58528L6.33554 5.39029C6.55453 5.16071 6.65652 4.89967 6.64152 4.60719C6.62652 4.31471 6.52453 4.06625 6.33554 3.86812L6.17955 3.70458C6.11356 3.63539 6.08056 3.55048 6.08056 3.44984C6.08056 3.3492 6.11356 3.26428 6.17955 3.19509H6.17655ZM8.58538 2.10378C8.65138 2.03459 8.73237 2 8.82837 2C8.92436 2 9.00535 2.03459 9.07135 2.10378L9.7253 2.78939C10.0193 3.10703 10.1723 3.50959 10.1813 3.99077C10.1903 4.4751 10.0433 4.87451 9.7403 5.19216L7.78744 7.23954C7.72145 7.30873 7.64045 7.34332 7.54446 7.34332C7.44846 7.34332 7.36747 7.30873 7.30147 7.23954C7.23548 7.17035 7.20248 7.08543 7.20248 6.9848C7.20248 6.88416 7.23548 6.79924 7.30147 6.73005L9.22434 4.71412C9.40433 4.52542 9.49132 4.28326 9.48832 3.99077C9.48232 3.69829 9.39233 3.45613 9.20934 3.26743L8.58238 2.61013C8.51639 2.54094 8.48339 2.45602 8.48339 2.35538C8.48339 2.25474 8.51639 2.16983 8.58238 2.10064L8.58538 2.10378ZM12.8601 9.64859C12.7941 9.71778 12.7131 9.75238 12.6171 9.75238C12.5211 9.75238 12.4401 9.71778 12.3741 9.64859L11.8761 9.12653C11.6572 8.89694 11.4292 8.78372 11.1922 8.78372C10.9552 8.78372 10.7272 8.89694 10.5082 9.12653L10.0373 9.62029C9.97129 9.68948 9.89029 9.72407 9.7943 9.72407C9.6983 9.72407 9.61731 9.68948 9.55131 9.62029C9.48532 9.5511 9.45232 9.46619 9.45232 9.36555C9.45232 9.26491 9.48532 9.17999 9.55131 9.1108L9.97728 8.66422C10.3103 8.31512 10.7092 8.13586 11.1742 8.12642C11.6392 8.11699 12.0381 8.28682 12.3711 8.63277L12.8541 9.13911C12.9201 9.2083 12.9531 9.29321 12.9531 9.39385C12.9531 9.49449 12.9201 9.5794 12.8541 9.64859H12.8601ZM2.36082 13.9855L9.01435 11.501C9.20034 11.4318 9.25434 11.1802 9.11335 11.0355L4.81765 6.6074C4.67666 6.46273 4.44268 6.51934 4.37668 6.71433L2.01585 13.6239C1.94085 13.8471 2.14484 14.0641 2.35783 13.9824L2.36082 13.9855Z' })),
-        React.createElement("span", { className: 'gift-comp-attr' }, translate('account.notifications_messages.giftSuccessText')))) : null;
+        React.createElement("span", { className: 'gift-comp-attr' }, translate('account.notifications_messages.giftSuccessText')))) : null) : null;
 };
 export default GiftComp;

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

@@ -9,7 +9,7 @@ const GiftCompStyle = styled.div `
 	display: flex;
 	gap: var(--account_giftAttrGap);
 
-	margin: var(--account_giftBlockDistance) 0;
+	margin: var(--account_commentMarginTop) 0;
 	margin-bottom: 0;
 	background-color: var(--account_surfaceColor);
 	padding: var(--account_giftBlockPadTB) var(--account_giftBlockPadLR);

package/dist/components/TotalCheckout/index.js

@@ -12,12 +12,12 @@ import GiftComp from './GiftComp';
 import TotalCheckoutStyle from './style';
 //* Skeleton
 import SkeletonTotalCheckout from './Skeleton';
-const TotalCheckout = memo(({ isShipping, children, confirmation, buttonProps }) => {
+const TotalCheckout = memo(({ isShipping, children, confirmation, buttonProps, loading }) => {
     const { useCart, useUser } = useAccountContext();
     const { checkoutBtnDisabled } = useCheckoutContext();
     const { addressLoading } = useAddressContext();
     const { user } = useUser();
-    const { itemsCount, shippingCost, total, subtotal, useBalance, loading, discount, currency } = useCart();
+    const { itemsCount, shippingCost, total, subtotal, useBalance, discount, currency } = useCart();
     return (React.createElement(TotalCheckoutStyle, null,
         React.createElement("div", { className: `cart-main-wrap` },
             React.createElement("div", { className: `left-panel-wrap panel` }, children),
@@ -39,15 +39,15 @@ const TotalCheckout = memo(({ isShipping, children, confirmation, buttonProps })
                             React.createElement("div", { className: `od-item-wrap` },
                                 React.createElement(Text, { className: `account-p account-p2 account-font-regular account-primary-color1 sticky-wrap-shipping`, text: `account.address_management.shipping` }),
                                 React.createElement(Text, { className: `account-p account-p2 account-font-regular account-primary-color1 sticky-wrap-shipping-cost`, text: `${String(shippingCost).toLowerCase() === 'free' ? `account.general_actions.${shippingCost}` : shippingCost === '-' ? shippingCost : `${numToLocalString(shippingCost)} ${currency}`}` })),
-                            React.createElement("div", { className: `od-item-wrap` },
+                            React.createElement("div", { className: `od-item-wrap total-block` },
                                 React.createElement(Text, { className: `account-p account-p2 account-font-bold account-primary-color1 sticky-wrap-total`, text: `account.order_balance.total` }),
                                 React.createElement(Text, { className: `account-p account-p2 account-font-bold account-primary-color1 sticky-wrap-currency2`, text: itemsCount ? handlePriceCheckFunc(total, currency) : `0 ${currency}` })),
                             React.createElement(GiftComp, null),
                             React.createElement(FreeShippingComp, null),
                             user ? (React.createElement(CollapseContainer, { className: 'collapse-container-wrapper' },
-                                React.createElement(BalanceComp, null),
-                                React.createElement(PromoCodeComp, null))) : null,
-                            React.createElement(CommentComp, { isShipping: isShipping }),
-                            React.createElement(AccountButton, { url: buttonProps.url, btnType: `full-width`, text: buttonProps.text, type: buttonProps.type, disabled: checkoutBtnDisabled, loading: buttonProps.loadingButton, className: `sticky-wrap-btn text-center`, onClick: () => buttonProps.handleClick && buttonProps.handleClick() })))))) : (React.createElement(SkeletonTotalCheckout, null))))));
+                                React.createElement(PromoCodeComp, null),
+                                React.createElement(BalanceComp, null))) : null,
+                            React.createElement(CommentComp, { isShipping: isShipping }))),
+                    React.createElement(AccountButton, { url: buttonProps.url, btnType: `full-width`, text: buttonProps.text, type: buttonProps.type, disabled: checkoutBtnDisabled, loading: buttonProps.loadingButton, className: `sticky-wrap-btn text-center`, onClick: () => buttonProps.handleClick && buttonProps.handleClick() })))) : (React.createElement(SkeletonTotalCheckout, null))))));
 });
 export default TotalCheckout;

package/dist/components/TotalCheckout/style.js

@@ -53,6 +53,10 @@ const TotalCheckoutStyle = styled.section `
 					justify-content: space-between;
 					align-items: center;
 
+					&.total-block {
+						margin-bottom: var(--account_collapseLargeDistance);
+					}
+
 					&:not(:first-child) {
 						margin-top: var(--account_itemMTop);
 					}
@@ -196,10 +200,12 @@ const TotalCheckoutStyle = styled.section `
 	}
 
 	/* //! Scroll logic */
-	/* .scroll-block {
+	--account_rightPanelScrollSize: var(--sp50x);
+
+	.scroll-block {
 		overflow-x: hidden;
 		overflow-y: auto;
-		max-height: calc(100vh - var(--sp27x));
+		max-height: calc(100vh - var(--account_rightPanelScrollSize));
 
 		scrollbar-width: none;
 		-ms-overflow-style: none;
@@ -207,7 +213,7 @@ const TotalCheckoutStyle = styled.section `
 		&::-webkit-scrollbar {
 			display: none;
 		}
-	} */
+	}
 
 	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXLMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeL}) {
 		--account_distance: var(--sp8x);
@@ -283,6 +289,9 @@ const TotalCheckoutStyle = styled.section `
 		/* //!  Collapse Sizes */
 		--account_collapseLargeDistance: var(--sp4x);
 		--account_collapseSmallDistance: var(--sp3x);
+
+		/* //! Scroll logic */
+		--account_rightPanelScrollSize: var(--sp45x);
 	}
 
 	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXSMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_TabletSize}) {
@@ -302,6 +311,9 @@ const TotalCheckoutStyle = styled.section `
 		/* //!  Collapse Sizes */
 		--account_collapseLargeDistance: var(--sp3x);
 		--account_collapseSmallDistance: var(--sp3x);
+
+		/* //! Scroll logic */
+		--account_rightPanelScrollSize: var(--sp40x);
 	}
 
 	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeS}) {
@@ -322,6 +334,22 @@ const TotalCheckoutStyle = styled.section `
 		--account_collapseLargeDistance: var(--sp3x);
 		--account_collapseSmallDistance: var(--sp2-5x);
 
+		/* //! Scroll logic */
+		--account_rightPanelScrollSize: 0;
+
+		.scroll-block {
+			overflow-x: unset;
+			overflow-y: unset;
+			max-height: unset;
+
+			scrollbar-width: unset;
+			-ms-overflow-style: unset;
+
+			&::-webkit-scrollbar {
+				display: unset;
+			}
+		}
+
 		.cart-main-wrap {
 			.right-panel-wrap {
 				margin-top: var(--sp12x);
@@ -347,6 +375,22 @@ const TotalCheckoutStyle = styled.section `
 		--account_collapseLargeDistance: var(--sp3x);
 		--account_collapseSmallDistance: var(--sp2x);
 
+		/* //! Scroll logic */
+		--account_rightPanelScrollSize: 0;
+
+		.scroll-block {
+			overflow-x: unset;
+			overflow-y: unset;
+			max-height: unset;
+
+			scrollbar-width: unset;
+			-ms-overflow-style: unset;
+
+			&::-webkit-scrollbar {
+				display: unset;
+			}
+		}
+
 		.cart-main-wrap {
 			.right-panel-wrap {
 				margin-top: var(--sp8x);

package/dist/modules/account/AccountBalanceTemplate/HistoryBalance/index.js

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { api, Link, Text, useTranslation } from '@weareconceptstudio/core';
 //* Styles
 import HistoryBalanceStyle from './style';
@@ -8,6 +8,8 @@ import { Pagination } from '../../../../components';
 const dataCategoryName = ['account.balance_promotions.balanceCategoryDate', 'account.balance_promotions.balanceCategoryActivity', 'account.balance_promotions.balanceCategoryAmount'];
 const HistoryBalance = ({ linkEarnPage }) => {
     const { translate, selectedLang } = useTranslation();
+    //! Ref
+    const containerRef = useRef();
     const [currentPage, setCurrentPage] = useState(1);
     const [pagination, setPagination] = useState({
         total: 0,
@@ -25,7 +27,7 @@ const HistoryBalance = ({ linkEarnPage }) => {
     useEffect(() => {
         getHistory(currentPage);
     }, [currentPage]);
-    return data?.length > 0 ? (React.createElement(HistoryBalanceStyle, null,
+    return data?.length > 0 ? (React.createElement(HistoryBalanceStyle, { ref: containerRef },
         React.createElement("div", { className: 'wrapper-title-section-history' },
             React.createElement("div", { className: 'wrapper-history-link' },
                 React.createElement(Text, { className: 'account-primary-color1 account-font-medium account-p account-p1 first-letter title-section-history', text: 'account.balance_promotions.balanceRecentActivity' }),
@@ -40,6 +42,6 @@ const HistoryBalance = ({ linkEarnPage }) => {
                 React.createElement("div", { className: 'line-info first-line' }),
                 data &&
                     data.map((item, i) => (React.createElement(ItemHistory, { key: i, ...item }))),
-                React.createElement(Pagination, { activePageState: currentPage, ...pagination, onChange: (page) => setCurrentPage(page) }))))) : null;
+                React.createElement(Pagination, { parentElement: containerRef.current, activePageState: currentPage, ...pagination, onChange: (page) => setCurrentPage(page) }))))) : null;
 };
 export default HistoryBalance;

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

@@ -1,5 +1,5 @@
 import React, { memo } from 'react';
-import { handlePriceCheckFunc, Image, Text } from '@weareconceptstudio/core';
+import { handlePriceCheckFunc, Image, Text, useTranslation } from '@weareconceptstudio/core';
 import { AccountButton, AccountCounter } from '../../../../components';
 import { useAccountContext } from '../../../../AccountProvider';
 import { useCheckoutContext } from '../../../checkout';
@@ -7,7 +7,8 @@ import { defaultIconGift } from '../util';
 const Item = memo(({ data, remove, select, isLast, actions }) => {
     const { checkoutData, setCheckGift } = useCheckoutContext();
     const { currency, handleProductClick } = useAccountContext();
-    return (React.createElement("div", { className: `item-wrap` },
+    const { translate } = useTranslation();
+    return (React.createElement("div", { className: `item-wrap user-select-none` },
         React.createElement("div", { className: 'line' }),
         React.createElement("div", { className: `item-inner-wrapper` },
             React.createElement("div", { className: `col-item tl-col-1 col-item-1` },
@@ -15,22 +16,32 @@ const Item = memo(({ data, remove, select, isLast, actions }) => {
                     data.is_gift ? React.createElement("div", { className: 'wrapper-gift-icon' }, defaultIconGift) : null,
                     React.createElement(Image, { src: data.product.image.src, alt: data.product.image.alt })),
                 React.createElement("div", { className: `col-1-right-wrap` },
-                    React.createElement(AccountButton, { text: data.product?.name, btnType: `green-large-text`, className: `capitalize title-btn`, onClick: () => handleProductClick(data.product) }),
-                    data.product.short_info_1 ? (React.createElement("div", { className: `right-first-item-wrap` },
+                    React.createElement(AccountButton, { text: data.product.name, btnType: `green-large-text`, className: `capitalize title-btn`, onClick: () => handleProductClick(data.product) }),
+                    data.color ? (React.createElement("div", { className: `right-first-item-wrap` },
+                        React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color1`, text: `account.general_actions.color` }),
+                        "\u00A0",
+                        React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color1 capitalize`, text: data.color }))) : data.product.short_info_1 ? (React.createElement("div", { className: `right-first-item-wrap` },
                         React.createElement(Text, { className: `account-p account-p3 account-font-regular account-primary-color1`, text: data.product.short_info_1 }))) : null,
-                    data.product.short_info_2 ? (React.createElement("div", { className: `right-second-item-wrap` },
+                    data.size ? (React.createElement("div", { className: `right-second-item-wrap` },
+                        React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color1`, text: `account.general_actions.size` }),
+                        "\u00A0",
+                        React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color1`, text: data.size }))) : data.product.short_info_2 ? (React.createElement("div", { className: `right-second-item-wrap` },
                         React.createElement(Text, { className: `account-p account-p3 account-font-bold account-primary-color1`, text: data.product.short_info_2 }))) : null)),
             React.createElement("div", { className: `col-item tl-col-2` }, select && !data.is_gift ? (React.createElement("div", { className: `select-and-out-of-stock-wrap` }, !data.product.out_of_stock ? (React.createElement(AccountCounter, { productId: data.product.id })) : (React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color1`, text: 'account.general_actions.outOfStock' })))) : data.is_gift ? (React.createElement("div", { className: 'wrapper-gift-button' }, checkoutData.checkGift ? (React.createElement(AccountCounter, { maxQty: 1, productId: -1, isGift: data.is_gift })) : (React.createElement(AccountButton, { className: `button-gift`, text: 'account.general_actions.restore', onClick: () => {
                     setCheckGift();
                 } })))) : (React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color1`, text: data.qty }))),
             React.createElement("div", { className: `col-item tl-col-3 col-item-3 nowrap` }, data.product.sale_price && !data.is_gift ? (React.createElement("div", null,
                 React.createElement(Text, { className: `account-p account-p3 account-font-bold account-secondary-color2 align-right cart-sale-price`, text: handlePriceCheckFunc(data.product.sale_price, currency) }),
-                React.createElement(Text, { className: `account-p account-p3 account-font-regular account-primary-color2 line-through value align-right cart-price1`, text: handlePriceCheckFunc(data.product.price, currency) }))) : (React.createElement(Text, { className: `account-p account-p3 account-font-bold account-primary-color1 align-right cart-price2`, text: handlePriceCheckFunc(data.is_gift ? 0 : data.product.price, currency) }))),
+                React.createElement("div", { className: 'wrapper-discount' },
+                    data.discount ? React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color2 discount-text` }, translate('account.order_balance.discountWithSymbol', { discount: data.discount })) : null,
+                    React.createElement(Text, { className: `account-p account-p3 account-font-regular account-primary-color2 line-through value align-right cart-price1`, text: handlePriceCheckFunc(data.product.price, currency) })))) : (React.createElement(Text, { className: `account-p account-p3 account-font-bold account-primary-color1 align-right cart-price2`, text: handlePriceCheckFunc(data.is_gift ? 0 : data.product.price, currency) }))),
             React.createElement("div", { className: `col-item tl-col-4 col-item-4 nowrap` },
                 React.createElement("div", { className: `col-item-inner-wrap` },
                     React.createElement("div", { className: `flex-end-wrap` }, data.sale_total && !data.is_gift ? (React.createElement("div", null,
                         React.createElement(Text, { className: `account-p account-p3 account-font-bold account-secondary-color2 align-right cart-sale-total`, text: handlePriceCheckFunc(data.sale_total, currency) }),
-                        React.createElement(Text, { className: `account-p account-p3 account-font-regular account-primary-color2 line-through value align-right cart-total1`, text: `${data.total} ${currency}` }))) : (React.createElement(Text, { className: `account-p account-p3 account-font-bold account-primary-color1 align-right cart-total2`, text: `${data.is_gift ? 0 : data.total} ${currency}` }))),
+                        React.createElement("div", { className: 'wrapper-discount' },
+                            data.discount ? React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color2 discount-text` }, translate('account.order_balance.discountWithSymbol', { discount: data.discount })) : null,
+                            React.createElement(Text, { className: `account-p account-p3 account-font-regular account-primary-color2 line-through value align-right cart-total1`, text: handlePriceCheckFunc(data.total, currency) })))) : (React.createElement(Text, { className: `account-p account-p3 account-font-bold account-primary-color1 align-right cart-total2`, text: handlePriceCheckFunc(data.is_gift ? 0 : data.total, currency) }))),
                     React.createElement("div", { className: `favorite-and-remove-wrap` }, remove && !data.is_gift && (React.createElement("div", { className: `remove-btn-wrap` },
                         React.createElement(AccountButton, { btnType: `green-small-text`, className: 'cart-remove-btn', text: 'account.general_actions.remove', onClick: () => actions.delete({ productId: data.product.id }) }))))))),
         isLast ? React.createElement("div", { className: 'line' }) : null));

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

@@ -16,14 +16,22 @@ const ItemMobile = memo(({ data, select }) => {
                     React.createElement(Image, { src: data.product.image.src, alt: data.product.image.alt })),
                 React.createElement("div", { className: `mobile-info-wrap` },
                     React.createElement(AccountButton, { text: data.product.name, btnType: `green-large-text`, className: `capitalize mobile-info-wrap-title`, onClick: () => handleProductClick(data.product) }),
-                    data.product.short_info_1 ? (React.createElement("div", { className: 'mobile-info-item' },
-                        React.createElement(Text, { className: `account-p account-p3 account-font-regular account-primary-color1 mobile-short-info1`, text: data.product.short_info_1 }))) : null,
-                    data.product.short_info_2 ? (React.createElement("div", { className: 'mobile-info-item' },
-                        React.createElement(Text, { className: `account-p account-p3 account-font-regular account-primary-color1 mobile-short-info2`, text: data.product.short_info_2 }))) : null,
+                    data.color ? (React.createElement("div", { className: `mobile-info-item` },
+                        React.createElement(Text, { className: `account-p account-p3 account-font-bold account-primary-color1`, text: `account.general_actions.color` }),
+                        "\u00A0",
+                        React.createElement(Text, { className: `account-p account-p3 account-font-regular account-primary-color1 capitalize`, text: data.color }))) : data.product.short_info_1 ? (React.createElement("div", { className: 'mobile-info-item' },
+                        React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color1 mobile-short-info1`, text: data.product.short_info_1 }))) : null,
+                    data.size ? (React.createElement("div", { className: `mobile-info-item` },
+                        React.createElement(Text, { className: `account-p account-p3 account-font-bold account-primary-color1`, text: `account.general_actions.size` }),
+                        "\u00A0",
+                        React.createElement(Text, { className: `account-p account-p3 account-font-regular account-primary-color1`, text: data.size }))) : data.product.short_info_2 ? (React.createElement("div", { className: 'mobile-info-item' },
+                        React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color1 mobile-short-info2`, text: data.product.short_info_2 }))) : null,
                     React.createElement("div", { className: `mobile-total-price-wrap flex-box` },
                         data.sale_total && !data.is_gift ? (React.createElement("div", { className: 'mobile-total-price-flex-block' },
-                            React.createElement(Text, { className: `account-p account-p3 account-font-bold account-secondary-color2 mobile-total-discounted-price`, text: handlePriceCheckFunc(data.sale_total, currency) }),
-                            React.createElement(Text, { className: `account-p account-p3 account-font-regular account-primary-color2 line-through mobile-total-price`, text: `${data.total} ${currency}` }))) : (React.createElement(Text, { className: `account-p account-p3 account-font-bold account-primary-color1 mobile-total-price2`, text: `${data.is_gift ? 0 : data.total} ${currency}` })),
+                            React.createElement(Text, { className: `account-p account-p3 account-font-medium account-secondary-color2 mobile-total-discounted-price`, text: handlePriceCheckFunc(data.sale_total, currency) }),
+                            React.createElement("div", { className: 'wrapper-discount' },
+                                data.discount ? React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color2 discount-text` }, translate('account.order_balance.discountWithSymbol', { discount: data.discount })) : null,
+                                React.createElement(Text, { className: `account-p account-p3 account-font-regular account-primary-color2 line-through mobile-total-price price-discount`, text: handlePriceCheckFunc(data.total, currency) })))) : (React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color1 mobile-total-price2`, text: handlePriceCheckFunc(data.is_gift ? 0 : data.total, currency) })),
                         select ? (React.createElement("div", { className: `inner-container` }, !data.product.out_of_stock && !data.is_gift ? (React.createElement(AccountCounter, { productId: data.product.id })) : data.is_gift ? (React.createElement("div", { className: 'wrapper-gift-button' }, checkoutData.checkGift ? (React.createElement(AccountCounter, { maxQty: 1, productId: -1, isGift: data.is_gift })) : (React.createElement(AccountButton, { className: `capitalize button-gift`, text: 'account.general_actions.restore', onClick: () => {
                                 setCheckGift();
                             } })))) : (React.createElement("div", { className: `in-block` },

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

@@ -33,7 +33,7 @@ const CartItems = memo(({ data, className, title, smallFontSize, additionalParam
     return (React.createElement(CartItemsStyle, { className: className || '' },
         additionalParameters.edit.list ? (React.createElement("div", { className: `title-edit-wrapper` },
             React.createElement(Text, { className: `account-p ${smallFontSize ? 'account-p2' : 'account-p1'} account-font-bold account-primary-color1 cart-items-title2-version`, text: title }),
-            React.createElement(AccountButton, { url: '/cart/', btnType: `green-small-text`, className: 'cart-items-edit-btn', text: `account.cart_checkout.editCart` }))) : (React.createElement(Text, { className: `account-p ${smallFontSize ? 'account-p2' : 'account-p1'} account-font-bold account-primary-color1 cart-items-title1-version`, text: title })),
+            React.createElement(AccountButton, { url: '/cart/', btnType: `green-small-text`, text: `account.cart_checkout.editCart`, className: 'cart-items-edit-btn align-right' }))) : (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: `cart-items-line` }) : null,
         itemsStore));
 });

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

@@ -51,6 +51,13 @@ const CartItemsStyle = styled.section `
 	--account_giftButtonTB: calc(var(--sp2x) - var(--sp0-5x) / 2);
 	--account_giftButtonLR: var(--sp2x);
 
+	.wrapper-discount {
+		display: flex;
+		flex-direction: column;
+		align-items: flex-end;
+		column-gap: var(--sp1x);
+	}
+
 	.mobile-info-wrap-title {
 		a,
 		button {
@@ -647,6 +654,10 @@ const CartItemsStyle = styled.section `
 			--account_spaceLineMTop: var(--sp2x);
 			--account_spaceLineMBot: var(--sp3x);
 		}
+
+		.wrapper-discount {
+			column-gap: var(--sp0-5x);
+		}
 	}
 
 	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeSMin}) {
@@ -705,15 +716,24 @@ const CartItemsStyle = styled.section `
 						.mobile-price-wrap,
 						.mobile-total-price-wrap {
 							margin-top: var(--sp2x);
+							align-items: flex-end;
 						}
 
 						.mobile-price-flex-block,
 						.mobile-total-price-flex-block {
 							display: flex;
-							align-items: center;
+							flex-direction: column;
+
+							align-items: flex-start;
 							gap: var(--sp0-5x);
 						}
 
+						.wrapper-discount {
+							flex-direction: row;
+							column-gap: var(--sp0-5x);
+							align-items: center;
+						}
+
 						.select-and-out-of-stock-mobile-wrap {
 							width: var(--account_cartItemSelectFixedWidth);
 

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

@@ -1,7 +1,6 @@
 export default CartTemplate;
-declare function CartTemplate({ children, actions, checkoutUrl, moreMenu, emptyCartIcon }: {
+declare function CartTemplate({ children, checkoutUrl, moreMenu, emptyCartIcon }: {
     children: any;
-    actions: any;
     checkoutUrl?: string;
     moreMenu: any;
     emptyCartIcon: any;

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
 import { Page, useTranslation } from '@weareconceptstudio/core';
 import { CartItems, EmptyCart } from '..';
 import { TotalCheckout, AccountButton } from '../../../components';
@@ -12,21 +12,31 @@ const leftArrow = (React.createElement("svg", { fill: 'none', viewBox: '0 0 16 1
 import CartTemplateStyle from './style';
 //* Skeleton
 import SkeletonCartTemplate from './Skeleton';
-const CartTemplate = ({ children, actions, checkoutUrl = '/checkout/', moreMenu, emptyCartIcon }) => {
-    const { shopUrl, useCart } = useAccountContext();
+const CartTemplate = ({ children, checkoutUrl = '/checkout/', moreMenu, emptyCartIcon }) => {
     const { translate } = useTranslation();
-    const { items, itemsCount, shippingCost, loading, subtotal, total, freeShippingRange, shippingCostValue } = useCart();
+    const { shopUrl, useCart } = useAccountContext();
+    const { items, itemsCount, loading, toggleCartItem, deleteCartItem } = useCart();
+    const isFirstRender = useRef(true);
+    useEffect(() => {
+        if (isFirstRender.current) {
+            isFirstRender.current = false;
+            return;
+        }
+    }, [loading]);
     return (React.createElement(Page, { className: 'cart use-account' },
         React.createElement(AccountContainer, { className: `second-version` },
             React.createElement(CartTemplateStyle, null,
-                React.createElement(TotalCheckout, { total: total, loading: loading, subtotal: subtotal, itemsCount: itemsCount, shippingCost: shippingCost, freeShippingRange: freeShippingRange, shippingCostValue: shippingCostValue, buttonProps: {
+                React.createElement(TotalCheckout, { loading: isFirstRender.current, buttonProps: {
                         url: checkoutUrl,
                         text: 'account.cart_checkout.proceedToCheckout',
-                    } }, !loading ? (itemsCount > 0 ? (React.createElement(React.Fragment, null,
+                    } }, !isFirstRender.current ? (itemsCount > 0 ? (React.createElement(React.Fragment, null,
                     shopUrl ? (React.createElement(AccountButton, { url: shopUrl, btnType: `purple-text`, className: `back-to-shop` },
                         leftArrow,
                         translate('account.general_actions.backToShop'))) : null,
-                    React.createElement(CartItems, { data: items, smallFontSize: true, actions: actions, className: `cart-st-wrap`, title: 'account.cart_checkout.myCart', additionalParameters: {
+                    React.createElement(CartItems, { data: items, smallFontSize: true, className: `cart-st-wrap`, title: 'account.cart_checkout.myCart', actions: {
+                            add: toggleCartItem,
+                            delete: deleteCartItem,
+                        }, additionalParameters: {
                             remove: true,
                             select: true,
                             horizontalLine: true,

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

@@ -20,6 +20,13 @@ const CheckoutTemplate = () => {
     const { handleCheckout } = useCheckoutContext();
     const { items, itemsCount, loading } = useCart();
     const { user } = useUser();
+    const isFirstRender = useRef(true);
+    useEffect(() => {
+        if (isFirstRender.current) {
+            isFirstRender.current = false;
+            return;
+        }
+    }, [loading]);
     const checkStep = {
         isShipping: !hasCheckoutAddress,
         isReview: hasCheckoutAddress,
@@ -47,18 +54,19 @@ const CheckoutTemplate = () => {
         }
     }, [itemsCount, loading]);
     return (React.createElement(Page, { className: 'checkout use-account' },
-        React.createElement(AccountContainer, { className: `second-version` }, itemsCount && user ? (React.createElement(CheckoutTemplateStyle, null,
-            React.createElement(TotalCheckout, { isShipping: checkStep.isShipping, buttonProps: {
-                    url: false,
-                    handleClick: handleCheckoutBtn,
-                    type: checkStep.isShipping ? 'submit' : 'button',
-                    text: checkStep.isShipping ? 'account.cart_checkout.proceedToCheckout' : 'account.cart_checkout.proceedToPayment',
-                    loadingButton: loadingProcessToPayment,
-                } }, !addressLoading && itemsCount ? (React.createElement(React.Fragment, null,
-                React.createElement(Sequence, { step: checkStep.isShipping ? 'shipping' : 'review' }),
-                checkStep.isShipping ? React.createElement(StepShipping, { firstStepFormRef: firstStepFormRef }) : React.createElement(StepReview, { items: items }))) : (React.createElement(React.Fragment, null,
-                React.createElement(SequenceSkeleton, { className: 'sequence-checkout-template' }),
-                React.createElement(SkeletonAddressSelect, { className: 'address-checkout-template' }),
-                React.createElement(SkeletonCartTemplate, null)))))) : null)));
+        React.createElement(AccountContainer, { className: `second-version` },
+            React.createElement(CheckoutTemplateStyle, null,
+                React.createElement(TotalCheckout, { loading: isFirstRender.current, isShipping: checkStep.isShipping, buttonProps: {
+                        url: false,
+                        handleClick: handleCheckoutBtn,
+                        type: checkStep.isShipping ? 'submit' : 'button',
+                        text: checkStep.isShipping ? 'account.cart_checkout.proceedToCheckout' : 'account.cart_checkout.proceedToPayment',
+                        loadingButton: loadingProcessToPayment,
+                    } }, !addressLoading && itemsCount && user ? (React.createElement(React.Fragment, null,
+                    React.createElement(Sequence, { step: checkStep.isShipping ? 'shipping' : 'review' }),
+                    checkStep.isShipping ? React.createElement(StepShipping, { firstStepFormRef: firstStepFormRef }) : React.createElement(StepReview, { items: items }))) : (React.createElement(React.Fragment, null,
+                    React.createElement(SequenceSkeleton, { className: 'sequence-checkout-template' }),
+                    React.createElement(SkeletonAddressSelect, { className: 'address-checkout-template' }),
+                    React.createElement(SkeletonCartTemplate, null))))))));
 };
 export default CheckoutTemplate;

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

@@ -3,7 +3,7 @@ import { handlePriceCheckFunc, Text, useTranslation } from '@weareconceptstudio/
 import { useAccountContext } from '../../../AccountProvider';
 import OrderStatus from '../OrderStatus';
 import OrderDetailsStyle from './style';
-const OrderDetails = memo(({ className, status, date, orderNumber, itemsCount, total, shippingCost, usedBalance, discounts = [] }) => {
+const OrderDetails = memo(({ className, status, date, orderNumber, itemsCount, total, subtotal, shippingCost, usedBalance, discounts = [] }) => {
     const { translate } = useTranslation();
     const { currency } = useAccountContext();
     return (React.createElement(OrderDetailsStyle, { className: `${className || ''}` },
@@ -29,20 +29,33 @@ const OrderDetails = memo(({ className, status, date, orderNumber, itemsCount, t
                 translate('account.order_management.totalItems'),
                 ":"),
             React.createElement(Text, { className: `account-p account-p3 account-font-regular account-primary-color1 value`, text: itemsCount })),
+        React.createElement("div", { className: `order-detail-item-wrap` },
+            React.createElement(Text, { className: `account-p account-p3 account-font-bold account-primary-color1` },
+                translate('account.cart_checkout.subtotal'),
+                ":"),
+            React.createElement(Text, { className: `account-p account-p3 account-font-regular account-primary-color1 value` }, handlePriceCheckFunc(subtotal, currency))),
         discounts?.length > 0
-            ? discounts.map((item, index) => (React.createElement("div", { key: index, className: `order-detail-item-wrap` },
-                React.createElement(Text, { className: `account-p account-p3 account-font-bold account-primary-color1` },
-                    translate('account.order_balance.discount'),
-                    " (",
-                    item.title,
-                    "):"),
-                React.createElement(Text, { className: `account-p account-p3 account-font-regular account-primary-color1 value` }, handlePriceCheckFunc(item.discount, currency)))))
+            ? discounts.map((item, index) => {
+                if (item.discount != 0) {
+                    return (React.createElement("div", { key: index, className: `order-detail-item-wrap` },
+                        React.createElement(Text, { className: `account-p account-p3 account-font-bold discount-color` },
+                            translate('account.order_balance.discount'),
+                            " (",
+                            item.title,
+                            "):"),
+                        React.createElement(Text, { className: `account-p account-p3 account-font-regular value discount-color` },
+                            "-",
+                            handlePriceCheckFunc(item.discount, currency))));
+                }
+            })
             : null,
         usedBalance ? (React.createElement("div", { className: `order-detail-item-wrap` },
-            React.createElement(Text, { className: `account-p account-p3 account-font-bold account-primary-color1` },
+            React.createElement(Text, { className: `account-p account-p3 account-font-bold balance-color` },
                 translate('account.balance_promotions.usedBalance'),
                 ":"),
-            React.createElement(Text, { className: `account-p account-p3 account-font-regular account-primary-color1 value` }, handlePriceCheckFunc(usedBalance, currency)))) : null,
+            React.createElement(Text, { className: `account-p account-p3 account-font-regular balance-color value` },
+                "-",
+                handlePriceCheckFunc(usedBalance, currency)))) : null,
         shippingCost ? (React.createElement("div", { className: `order-detail-item-wrap` },
             React.createElement(Text, { className: `account-p account-p3 account-font-bold account-primary-color1` },
                 translate('account.order_balance.shippingCost'),

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

@@ -6,6 +6,14 @@ const OrderDetailsStyle = styled.section `
 	--account_statusItemPadLR: var(--sp2-5x);
 	--account_orderDetailItemWrapMTop: var(--sp2x);
 
+	.discount-color {
+		color: var(--account_statusCanceledColor);
+	}
+
+	.balance-color {
+		color: var(--account_statusPaymentFailedColor);
+	}
+
 	.info-space-line {
 		width: 100%;
 		border-bottom: 2px solid var(--account_primaryColor1);

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

@@ -1,10 +1,11 @@
 import React, { memo } from 'react';
-import { handlePriceCheckFunc, Image, Text } from '@weareconceptstudio/core';
+import { handlePriceCheckFunc, Image, Text, useTranslation } from '@weareconceptstudio/core';
 import { useAccountContext } from '../../../../AccountProvider';
 import { AccountButton } from '../../../../components';
 import { defaultIconGift } from '../util';
 const Item = memo(({ data }) => {
     const { handleProductClick, currency } = useAccountContext();
+    const { translate } = useTranslation();
     return (React.createElement("div", { className: `item-wrap` },
         React.createElement("div", { className: `item-inner-wrapper` },
             React.createElement("div", { className: `col-item tl-col-1 col-item-1 first-col` },
@@ -12,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,12 +27,16 @@ const Item = memo(({ data }) => {
             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(Text, { className: `account-p account-p3 account-font-bold account-secondary-color2 align-right`, text: handlePriceCheckFunc(data.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.price, currency) }))) : (React.createElement(Text, { className: `account-p account-p3 account-font-bold account-primary-color1 align-right`, text: handlePriceCheckFunc(data.is_gift ? 0 : data.price, currency) }))),
+                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.discount ? React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color2 discount-text` }, translate('account.order_balance.discountWithSymbol', { discount: data.discount })) : null,
+                    React.createElement(Text, { className: `account-p account-p3 account-font-regular account-primary-color2 line-through value align-right 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("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(Text, { className: `account-p account-p3 account-font-bold account-secondary-color2 align-right`, text: handlePriceCheckFunc(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.total, currency) }))) : (React.createElement(Text, { className: `account-p account-p3 account-font-bold account-primary-color1 align-right `, text: `${handlePriceCheckFunc(data.is_gift ? 0 : data.total, currency)}` }))))))));
+                        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.discount ? React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color2 discount-text` }, translate('account.order_balance.discountWithSymbol', { discount: data.discount })) : null,
+                            React.createElement(Text, { className: `account-p account-p3 account-font-regular account-primary-color2 line-through value align-right 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)}` }))))))));
 });
 export default Item;

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

@@ -12,16 +12,16 @@ 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-medium account-primary-color1`, text: `account.general_actions.color` }),
+                    React.createElement(Text, { className: `account-p account-p3 account-font-bold account-primary-color1`, text: `account.general_actions.color` }),
                     "\u00A0",
-                    React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color1 capitalize`, text: data.color }))) : data.product?.short_info_1 ? (React.createElement("div", { className: `mobile-info-item` },
+                    React.createElement(Text, { className: `account-p account-p3 account-font-regular account-primary-color1 capitalize`, text: data.color }))) : data.product?.short_info_1 ? (React.createElement("div", { className: `mobile-info-item` },
                     React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color1`, text: data.product.short_info_1 }))) : null,
                 data.size ? (React.createElement("div", { className: `mobile-info-item` },
-                    React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color1`, text: `account.general_actions.size` }),
+                    React.createElement(Text, { className: `account-p account-p3 account-font-bold account-primary-color1`, text: `account.general_actions.size` }),
                     "\u00A0",
-                    React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color1`, text: data.size }))) : data.product?.short_info_2 ? (React.createElement("div", { className: `mobile-info-item` },
+                    React.createElement(Text, { className: `account-p account-p3 account-font-regular account-primary-color1`, text: data.size }))) : data.product?.short_info_2 ? (React.createElement("div", { className: `mobile-info-item` },
                     React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color1`, text: data.product.short_info_2 }))) : null,
                 React.createElement("div", { className: `mobile-info-item` },
                     React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color1` },
@@ -31,9 +31,17 @@ 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` }),
-                    React.createElement(Text, { className: `account-p account-p3 account-font-bold account-primary-color1`, text: handlePriceCheckFunc(data.is_gift ? 0 : data.price, currency) })),
+                    data.sale_price && !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.discount ? React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color2 discount-text-mobile` }, translate('account.order_balance.discountWithSymbol', { discount: data.discount })) : null,
+                            React.createElement(Text, { className: `account-p account-p3 account-font-regular account-primary-color2 line-through 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("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` }),
-                    React.createElement(Text, { className: `account-p account-p3 account-font-bold account-primary-color1`, text: handlePriceCheckFunc(data.is_gift ? 0 : data.total, currency) }))))));
+                    data.sale_total && !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.discount ? React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color2 discount-text-mobile` }, translate('account.order_balance.discountWithSymbol', { discount: data.discount })) : null,
+                            React.createElement(Text, { className: `account-p account-p3 account-font-regular account-primary-color2 line-through 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) })))))));
 });
 export default ItemMobile;

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

@@ -366,6 +366,13 @@ const OrderedItemsStyle = styled.div `
 		}
 	}
 
+	.wrapper-discount {
+		display: flex;
+		flex-direction: column;
+		align-items: flex-end;
+		column-gap: var(--sp1x);
+	}
+
 	@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);
@@ -605,7 +612,7 @@ const OrderedItemsStyle = styled.div `
 
 		//! Col's width
 		--account_col1Width: 44%;
-		--account_col2Width: 16%;
+		--account_col2Width: 13%;
 		--account_col3Width: 20%;
 
 		//! Col's distance
@@ -637,6 +644,10 @@ const OrderedItemsStyle = styled.div `
 		--account_giftWrapperBorder: var(--sp0-5x);
 		--account_giftButtonTB: var(--sp1x);
 		--account_giftButtonLR: var(--sp2x);
+
+		.wrapper-discount {
+			column-gap: var(--sp0-5x);
+		}
 	}
 
 	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeSMin}) {
@@ -713,6 +724,12 @@ const OrderedItemsStyle = styled.div `
 					.mobile-price-wrap,
 					.mobile-total-price-wrap {
 						margin-top: var(--sp3x);
+
+						.wrapper-discount {
+							flex-direction: row;
+							align-items: center;
+							gap: var(--sp0-5x);
+						}
 					}
 				}
 			}

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

@@ -17,6 +17,6 @@ const OrderItem = memo(({ data }) => {
         React.createElement("div", { className: `col-item od-col-5 nowrap` },
             React.createElement(Text, { className: `account-p account-p4 account-font-medium account-primary-color1`, text: handlePriceCheckFunc(data.total, currency) })),
         React.createElement("div", { className: `col-item od-col-6 nowrap` },
-            React.createElement(AccountButton, { text: 'account.order_management.viewOrder', btnType: `green-small-text`, url: `/account/order-history/${data.id}` }))));
+            React.createElement(AccountButton, { btnType: `green-small-text`, url: `/account/order-history/${data.id}`, text: 'account.order_management.viewOrder' }))));
 });
 export default OrderItem;

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

@@ -6,7 +6,7 @@ import OrderStatus from '../../OrderStatus';
 const ItemMobile = memo(({ data }) => {
     const { currency } = useAccountContext();
     const { translate } = useTranslation();
-    return (React.createElement("div", { className: `mobile-order-item-wrap` },
+    return (React.createElement("div", { className: `mobile-orders-list-wrap` },
         React.createElement("div", { className: `first-col-wrap` },
             React.createElement("div", { className: `left-wrap` },
                 React.createElement("div", { className: `left-item-wrap` },

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

@@ -1,4 +1,4 @@
-import React, { useMemo, useState, useEffect, useCallback } from 'react';
+import React, { useMemo, useState, useEffect, useCallback, useRef } from 'react';
 import { Text, useUi, api } from '@weareconceptstudio/core';
 //* Components
 import Item from './Item';
@@ -9,6 +9,8 @@ import { Pagination } from '../../../components';
 import OrdersListStyle from './style';
 const OrdersList = () => {
     const { winWidth } = useUi();
+    //! Ref
+    const containerRef = useRef();
     const [loading, setLoading] = useState(true);
     const [data, setData] = useState([]);
     const [currentPage, setCurrentPage] = useState(1);
@@ -47,11 +49,11 @@ const OrdersList = () => {
             return (React.createElement(ItemMobile, { key: index, data: item }));
         }))) : null;
     }, [winWidth, data]);
-    return !loading && data?.length > 0 ? (React.createElement(OrdersListStyle, null,
+    return !loading && data?.length > 0 ? (React.createElement(OrdersListStyle, { ref: containerRef },
         React.createElement(Text, { className: `account-p account-p1 account-font-bold account-primary-color1`, text: 'account.account_info.orderHistory' }),
         React.createElement("div", { className: `order-history-line` }),
         listStore,
         React.createElement("div", { className: `pagination-wrap` },
-            React.createElement(Pagination, { activePageState: currentPage, ...pagination, onChange: (page) => setCurrentPage(page) })))) : !loading ? (React.createElement(EmptyOrders, null)) : null;
+            React.createElement(Pagination, { activePageState: currentPage, parentElement: containerRef.current, onChange: (page) => setCurrentPage(page), ...pagination })))) : !loading ? (React.createElement(EmptyOrders, null)) : null;
 };
 export default OrdersList;

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

@@ -138,7 +138,7 @@ const OrdersListStyle = styled.section `
 
 		//! Coll width
 		--account_orderDateWidth: 16%;
-		--account_totalItemsWidth: 12.7%;
+		--account_totalItemsWidth: 11.7%;
 		--account_orderNumberWidth: 16%;
 		--account_orderStatusWidth: 16.7%;
 		--account_totalPriceWidth: 22%;
@@ -316,7 +316,7 @@ const OrdersListStyle = styled.section `
 		--account_paginationWrapMTop: var(--sp3x);
 
 		.mobile-orders-wrap {
-			.mobile-order-item-wrap {
+			.mobile-orders-list-wrap {
 				padding-bottom: var(--sp3x);
 				border-bottom: 2px solid var(--account_primaryColor5);
 

package/dist/styles/helperClass.js

@@ -234,6 +234,38 @@ const AccountHelperClass = createGlobalStyle `${css `
 		}
 	}
 
+	.account-secondary-color10 {
+		color: var(--account_secondaryColor10);
+
+		&-bg {
+			background-color: var(--account_secondaryColor10);
+		}
+	}
+
+	.account-secondary-color11 {
+		color: var(--account_secondaryColor11);
+
+		&-bg {
+			background-color: var(--account_secondaryColor11);
+		}
+	}
+
+	.account-secondary-color12 {
+		color: var(--account_secondaryColor12);
+
+		&-bg {
+			background-color: var(--account_secondaryColor12);
+		}
+	}
+
+	.account-secondary-color13 {
+		color: var(--account_secondaryColor13);
+
+		&-bg {
+			background-color: var(--account_secondaryColor13);
+		}
+	}
+
 	//! Background color
 	.account-background-color {
 		color: var(--account_backgroundColor);

package/dist/translations/en.d.ts

@@ -213,6 +213,7 @@ declare const _default: {
             reorder: string;
             comment: string;
             discount: string;
+            discountWithSymbol: string;
             note: string;
         };
         balance_promotions: {

package/dist/translations/en.js

@@ -139,7 +139,7 @@ export default {
             save: 'Save',
             done: 'Done',
             shopNow: 'Shop now',
-            add: 'add',
+            add: 'Add',
             backToShop: 'Back to shop',
             backToLoginPAge: 'Back to log in page',
             continueShopping: 'Continue shopping',
@@ -213,6 +213,7 @@ export default {
             reorder: 'Reorder',
             comment: 'Comment',
             discount: 'Discount',
+            discountWithSymbol: '{discount}% off',
             note: 'Note',
         },
         balance_promotions: {

package/dist/translations/hy.d.ts

@@ -213,6 +213,7 @@ declare const _default: {
             reorder: string;
             comment: string;
             discount: string;
+            discountWithSymbol: string;
             note: string;
         };
         balance_promotions: {

package/dist/translations/hy.js

@@ -213,6 +213,7 @@ export default {
             reorder: 'Կրկին պատվիրել',
             comment: 'Մեկնաբանություն',
             discount: 'Զեղչ',
+            discountWithSymbol: '{discount}% զեղչ',
             note: 'Նշում',
         },
         balance_promotions: {

package/dist/translations/index.d.ts

@@ -214,6 +214,7 @@ declare const _default: {
                 reorder: string;
                 comment: string;
                 discount: string;
+                discountWithSymbol: string;
                 note: string;
             };
             balance_promotions: {
@@ -453,6 +454,7 @@ declare const _default: {
                 reorder: string;
                 comment: string;
                 discount: string;
+                discountWithSymbol: string;
                 note: string;
             };
             balance_promotions: {
@@ -693,6 +695,7 @@ declare const _default: {
                 reorder: string;
                 comment: string;
                 discount: string;
+                discountWithSymbol: string;
                 note: string;
             };
             balance_promotions: {

package/dist/translations/ru.d.ts

@@ -214,6 +214,7 @@ declare const _default: {
             reorder: string;
             comment: string;
             discount: string;
+            discountWithSymbol: string;
             note: string;
         };
         balance_promotions: {

package/dist/translations/ru.js

@@ -214,6 +214,7 @@ export default {
             reorder: 'Повторить заказ',
             comment: 'Комментарий',
             discount: 'Скидка',
+            discountWithSymbol: '{discount}% скидка',
             note: 'Примечание',
         },
         balance_promotions: {

package/package.json

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