@weareconceptstudio/account 0.3.4 → 0.3.6

package/dist/AccountProvider.js

@@ -18,6 +18,28 @@ export const useAccountContext = () => {
 export const AccountProvider = ({ fontFamily = 'core_Font', shopUrl = '/', children, maxQty = 99, currency, addressType, addressFormFields, useUser, useCart, productPopup, productUrlPrefix }) => {
     const { addTranslation } = useTranslation();
     const { openPopup } = useUi();
+    const paymentOptions = [
+        {
+            label: 'Cash',
+            value: 'cash_on_delivery',
+        },
+        {
+            label: 'Idram',
+            value: 'idram',
+        },
+        {
+            label: 'POS TERMINAL',
+            value: 'pos_terminal',
+        },
+        {
+            label: 'Telcell',
+            value: 'telcell',
+        },
+        {
+            label: 'Inecopay',
+            value: 'inecopay',
+        },
+    ];
     useEffect(() => {
         addTranslation(translations, 'prepend');
     }, []);
@@ -29,7 +51,7 @@ export const AccountProvider = ({ fontFamily = 'core_Font', shopUrl = '/', child
             openPopup(productPopup, { ...product, className: 'popup-product-block' });
         }
     }, [productUrlPrefix, productPopup]);
-    return (React.createElement(AccountContext.Provider, { value: { currency, maxQty, shopUrl, useUser, useCart, handleProductClick } },
+    return (React.createElement(AccountContext.Provider, { value: { currency, maxQty, shopUrl, useUser, useCart, handleProductClick, paymentOptions } },
         React.createElement(CheckoutProvider, null,
             React.createElement(AddressProvider, { useUser: useUser, useCart: useCart, addressType: addressType, addressFormFields: addressFormFields },
                 React.createElement(ThemeProvider, { theme: theme },

package/dist/components/AccountButton/index.js

@@ -3,21 +3,23 @@ import classNames from 'classnames';
 import { Link, useTranslation } from '@weareconceptstudio/core';
 import AccountButtonStyle from './style';
 const AccountButton = (props) => {
-    const { btnType, text, className, onClick, children, url, customLinkProps, target, type = 'button', disabled = false, svg_icon } = props;
+    const { btnType, text, className, onClick, children, url, customLinkProps, target, type = 'button', disabled = false, svg_icon, loading = false } = props;
     const { translate } = useTranslation();
     const Component = useMemo(() => (url ? Link : 'button'), [url]);
     const customProps = useMemo(() => (url ? { ...customLinkProps, url, target } : { type, disabled }), [url, type, disabled]);
     const classString = classNames('btn-wrap', {
         [btnType]: btnType,
         [className]: className,
+        'loading': loading,
         'disabled': disabled,
     });
     const handleClick = useCallback(() => {
         return !disabled && onClick?.();
     }, [onClick, disabled]);
-    return (React.createElement(AccountButtonStyle, { onClick: handleClick, className: classString },
+    return (React.createElement(AccountButtonStyle, { onClick: handleClick, className: `${classString} ` },
         React.createElement(Component, { ...customProps },
-            svg_icon || children || translate(text),
-            " ")));
+            loading ? (React.createElement("div", { className: 'outside-wrapper-loader' },
+                React.createElement("div", { className: 'loader' }))) : null,
+            React.createElement("div", { className: `content-button ${loading ? 'loading' : ''}` }, svg_icon || children || translate(text)))));
 };
 export default AccountButton;

package/dist/components/AccountButton/style.js

@@ -18,6 +18,7 @@ const AccountButtonStyle = styled.div `
 
 	button,
 	a {
+		position: relative;
 		width: 100%;
 		cursor: pointer;
 		font-size: var(--account_p2);
@@ -182,7 +183,7 @@ const AccountButtonStyle = styled.div `
 	}
 
 	&.promo-code-version,
-	&.muramoney-version {
+	&.balance-version {
 		width: fit-content;
 
 		a,
@@ -217,6 +218,65 @@ const AccountButtonStyle = styled.div `
 		}
 	}
 
+	.content-button {
+		transition: opacity 0.3s ease-out;
+	}
+
+	&.loading {
+		pointer-events: none;
+		cursor: default;
+
+		.content-button {
+			&.loading {
+				opacity: 0;
+			}
+		}
+	}
+
+	.outside-wrapper-loader {
+		position: absolute;
+		width: 100%;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		height: calc(100% - var(--account_btnPadTB) * 2);
+	}
+
+	.loader {
+		/* width: var(--sp4x); */
+		height: 100%;
+		aspect-ratio: 1;
+		display: grid;
+		border-radius: 50%;
+		background:
+			linear-gradient(0deg, rgb(255 255 255/50%) 30%, transparent 0 70%, rgb(255 255 255/100%) 0) 50%/8% 100%,
+			linear-gradient(90deg, rgb(255 255 255/25%) 30%, transparent 0 70%, rgb(255 255 255/75%) 0) 50%/100% 8%;
+		background-repeat: no-repeat;
+		animation: l23 1s infinite steps(12);
+		z-index: 7;
+
+		&::before,
+		&::after {
+			content: '';
+			grid-area: 1/1;
+			border-radius: 50%;
+			background: inherit;
+			opacity: 0.915;
+			transform: rotate(30deg);
+		}
+
+		&::after {
+			opacity: 0.83;
+			transform: rotate(60deg);
+		}
+	}
+
+	@keyframes l23 {
+		100% {
+			transform: rotate(1turn);
+		}
+	}
+
 	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXLMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeL}) {
 		--account_btnPadTB: var(--sp2x);
 		--account_btnPadLR: var(--sp7x);

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

@@ -1,2 +1,5 @@
 export default Loader;
-declare function Loader(): import("react").JSX.Element;
+declare function Loader({ className }: {
+    className: any;
+}): React.JSX.Element;
+import React from 'react';

package/dist/components/Loader/index.js

@@ -1,7 +1,23 @@
+'use client';
+import React, { useState, useEffect } from 'react';
 //* Styles
 import LoaderStyle from './style';
-//* Component
-const Loader = () => {
-    return React.createElement(LoaderStyle, null);
+const Loader = ({ className }) => {
+    //! State
+    const [loaderState, setLoaderState] = useState('');
+    useEffect(() => {
+        setTimeout(() => {
+            setLoaderState('start');
+        }, 100);
+        setTimeout(() => {
+            setLoaderState('end');
+        }, 2000);
+    }, []);
+    return (React.createElement(LoaderStyle, { className: `${loaderState || ''}` },
+        React.createElement("div", { className: `loader  ${className || ''}` },
+            React.createElement("div", { className: 'cont' },
+                React.createElement("span", { className: 'line-top' }),
+                React.createElement("div", { className: 'circle' }),
+                React.createElement("span", { className: 'line-bottom' })))));
 };
 export default Loader;

package/dist/components/Loader/style.js

@@ -1,3 +1,154 @@
 import styled from 'styled-components';
-const LoaderStyle = styled.div ``;
+const LoaderStyle = styled.div `
+	--sizeCircle: calc(var(--sp12x) + var(--sp0-5x));
+	--sizeLine: var(--sp2-5x);
+
+	&:before {
+		content: '';
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		background-color: var(--account_backgroundColor);
+		z-index: 1;
+		transition: 1s linear;
+	}
+
+	.loader {
+		position: absolute;
+		top: 0;
+		left: 0;
+		bottom: 0;
+		right: 0;
+		width: 100%;
+		height: 100vh;
+		z-index: 10;
+		pointer-events: none;
+
+		&:before {
+			background-color: var(--account_backgroundColor);
+		}
+
+		&:before {
+			content: '';
+			position: absolute;
+			top: 0;
+			left: 0;
+			width: 100%;
+			height: 100%;
+			transition: 1s linear 1.8s;
+		}
+
+		.cont {
+			position: absolute;
+			top: 50%;
+			left: 50%;
+			transform: translate(-50%, -50%);
+			width: var(--sizeCircle);
+			height: var(--sizeCircle);
+			transition: 0.5s linear 1.5s;
+
+			span {
+				background-color: var(--account_primaryColor1);
+				height: var(--sizeLine);
+				width: 0;
+				position: absolute;
+				transition: 0.5s ease-out 1s;
+
+				&.line-top {
+					bottom: calc(100% + var(--sizeLine));
+					left: 0;
+				}
+
+				&.line-bottom {
+					top: calc(100% + var(--sizeLine));
+					right: 0;
+				}
+			}
+
+			.circle {
+				border-radius: 100%;
+				overflow: hidden;
+				width: 100%;
+				height: 100%;
+				position: relative;
+				background-color: var(--account_primaryColor5);
+
+				&:before {
+					content: '';
+					position: absolute;
+					top: 100%;
+					left: 0;
+					width: 100%;
+					height: 100%;
+					background: linear-gradient(45deg, rgba(167, 0, 222, 1) 0%, rgba(254, 0, 133, 1) 100%);
+					transition: 0.5s ease-in-out;
+				}
+			}
+		}
+	}
+
+	&.start {
+		&:before {
+			opacity: 0;
+		}
+
+		.loader {
+			&:before {
+				opacity: 0;
+			}
+
+			.cont {
+				transform: translate(-50%, -50%) scale(0);
+
+				span {
+					width: 100%;
+				}
+
+				.circle {
+					&:before {
+						top: 0;
+					}
+				}
+			}
+		}
+	}
+
+	&.end {
+		&:before,
+		.loader {
+			opacity: 0;
+			visibility: hidden;
+		}
+	}
+
+	.loader {
+		&.account {
+			top: calc(-1 * var(--headerFixedHeight) - var(--headerBannerHeight) - var(--account_accountPadT) - var(--account_stickyMarTop));
+		}
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeS}) {
+		--sizeCircle: calc(var(--sp6x) + var(--sp0-5x));
+		--sizeLine: calc(var(--sp1x) + var(--sp0-5x) / 2);
+
+		.loader {
+			&.account {
+				top: 0;
+			}
+		}
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeSMin}) {
+		--sizeCircle: calc(var(--sp6x) + var(--sp0-5x));
+		--sizeLine: calc(var(--sp1x) + var(--sp0-5x) / 2);
+
+		.loader {
+			&.account {
+				top: 0;
+			}
+		}
+	}
+`;
 export default LoaderStyle;

package/dist/components/TotalCheckout/BalanceComp/index.d.ts

@@ -0,0 +1,10 @@
+export default BalanceComp;
+declare function BalanceComp({ isBalance, currency, balance, useBalance, balanceHandler, getItemCount }: {
+    isBalance?: boolean;
+    currency: any;
+    balance: any;
+    useBalance: any;
+    balanceHandler: any;
+    getItemCount: any;
+}): React.JSX.Element;
+import React from 'react';

package/dist/components/TotalCheckout/{MuramoneyComp → BalanceComp}/index.js

@@ -4,8 +4,8 @@ import { FormBuilder } from '@weareconceptstudio/form';
 import AccountButton from '../../AccountButton';
 import { balanceFields } from './utils';
 //* Style
-import MuramoneyCompStyle from './style';
-const MuramoneyComp = ({ isMuramoney = true, currency, balance, useBalance, balanceHandler, getItemCount }) => {
+import BalanceCompStyle from './style';
+const BalanceComp = ({ isBalance = true, currency, balance, useBalance, balanceHandler, getItemCount }) => {
     const { translate } = useTranslation();
     //! States
     const [disable, setDisable] = useState(false);
@@ -14,7 +14,7 @@ const MuramoneyComp = ({ isMuramoney = true, currency, balance, useBalance, bala
         setDisable(true);
         balanceHandler(values.balance);
     };
-    return isMuramoney ? (React.createElement(MuramoneyCompStyle, { className: `collapse-distance ${getItemCount && balance ? ' ' : 'disable'}` },
+    return isBalance ? (React.createElement(BalanceCompStyle, { className: `collapse-distance ${getItemCount && balance ? ' ' : 'disable'}` },
         React.createElement(CollapseItem, { disable: disable, 
             // status={'open'}
             title: React.createElement(React.Fragment, null,
@@ -22,14 +22,14 @@ const MuramoneyComp = ({ isMuramoney = true, currency, balance, useBalance, bala
                     React.createElement("svg", { width: '12', height: '12', fill: 'none', viewBox: '0 0 12 12', xmlns: 'http://www.w3.org/2000/svg' },
                         React.createElement("path", { d: 'M0 6H12', stroke: 'black', strokeWidth: '2' }),
                         React.createElement("path", { d: 'M6 12L6 0', stroke: 'black', strokeWidth: '2' }))),
-                React.createElement(Text, { className: 'account-p account-p4 account-primary-color1 account-font-medium muramoney-text' }, `${translate('useYourMoney')} (${handlePriceCheckFunc(balance, currency)} ${translate('balanceLowercase')})`)), description: React.createElement(React.Fragment, null, useBalance ? (React.createElement("div", { className: `muramoney-success-block` },
-                React.createElement(Text, { className: 'account-p account-p4 account-primary-color2 account-font-medium muramoney-success-text' }, handlePriceCheckFunc(useBalance, currency)),
-                React.createElement(Text, { text: 'remove', className: 'account-p account-p4 account-primary-color2 account-font-medium muramoney-remove-text', onClick: () => {
+                React.createElement(Text, { className: 'account-p account-p4 account-primary-color1 account-font-medium balance-text' }, `${translate('useYourMoney')} (${handlePriceCheckFunc(balance, currency)} ${translate('balanceLowercase')})`)), description: React.createElement(React.Fragment, null, useBalance ? (React.createElement("div", { className: `balance-success-block` },
+                React.createElement(Text, { className: 'account-p account-p4 account-primary-color2 account-font-medium balance-success-text' }, handlePriceCheckFunc(useBalance, currency)),
+                React.createElement(Text, { text: 'remove', className: 'account-p account-p4 account-primary-color2 account-font-medium balance-remove-text', onClick: () => {
                         balanceHandler(null);
                         setDisable(false);
-                    } }))) : (React.createElement(FormBuilder, { onSubmit: onFinish, fields: balanceFields, className: `muramoney-block`, formOptions: {
-                    className: 'muramoney-container',
+                    } }))) : (React.createElement(FormBuilder, { onSubmit: onFinish, fields: balanceFields, className: `balance-block`, formOptions: {
+                    className: 'balance-container',
                 } },
-                React.createElement(AccountButton, { text: `add`, type: 'submit', btnType: `muramoney-version` })))) }))) : null;
+                React.createElement(AccountButton, { text: `add`, type: 'submit', btnType: `balance-version` })))) }))) : null;
 };
-export default MuramoneyComp;
+export default BalanceComp;

package/dist/{modules/payment/PaymentComp → components/TotalCheckout/BalanceComp}/style.d.ts

@@ -1,2 +1,2 @@
-export default PaymentCompStyle;
-declare const PaymentCompStyle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export default BalanceCompStyle;
+declare const BalanceCompStyle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/dist/components/TotalCheckout/{MuramoneyComp → BalanceComp}/style.js

@@ -1,51 +1,51 @@
 import styled from 'styled-components';
-const MuramoneyCompStyle = styled.div `
-	--account_muramoneyCompDistance: var(--sp5x);
+const BalanceCompStyle = styled.div `
+	--account_balanceCompDistance: var(--sp5x);
 
-	--account_muramoneyInputPadTB: var(--sp2x);
-	--account_muramoneyInputPadLR: var(--sp2x);
-	--account_muramoneyContainerGap: var(--sp2x);
+	--account_balanceInputPadTB: var(--sp2x);
+	--account_balanceInputPadLR: var(--sp2x);
+	--account_balanceContainerGap: var(--sp2x);
 
 	border-top: 1px solid rgba(0, 0, 0, 0.4);
 
-	.muramoney-container {
+	.balance-container {
 		display: flex;
 		justify-content: space-between;
-		gap: var(--account_muramoneyContainerGap);
+		gap: var(--account_balanceContainerGap);
 	}
 
-	.muramoney-version {
+	.balance-version {
 		width: fit-content !important;
 		height: fit-content !important;
 		margin-top: unset !important;
 	}
 
-	.muramoney-block {
+	.balance-block {
 		flex: 1;
 
 		.base-input {
-			padding: var(--account_muramoneyInputPadTB) var(--account_muramoneyInputPadLR) !important;
+			padding: var(--account_balanceInputPadTB) var(--account_balanceInputPadLR) !important;
 			border: 2px solid var(--account_primaryColor2) !important;
 		}
 	}
 
-	.muramoney-text {
+	.balance-text {
 		width: fit-content;
 		transition: color var(--account_trTime) ease-out;
 		cursor: pointer;
 	}
 
-	.muramoney-success-block {
+	.balance-success-block {
 		display: flex;
-		gap: var(--account_muramoneyContainerGap);
+		gap: var(--account_balanceContainerGap);
 		justify-content: space-between;
-		padding: var(--account_muramoneyInputPadTB) var(--account_muramoneyInputPadLR);
+		padding: var(--account_balanceInputPadTB) var(--account_balanceInputPadLR);
 		border-radius: var(--sp1x);
 		border: 2px solid var(--account_surfaceColor);
 		background-color: var(--account_surfaceColor);
 	}
 
-	.muramoney-remove-text {
+	.balance-remove-text {
 		text-decoration-line: underline;
 		text-decoration-style: solid;
 		text-decoration-skip-ink: none;
@@ -67,51 +67,51 @@ const MuramoneyCompStyle = styled.div `
 
 	/* //! 1920 */
 	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXLMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeL}) {
-		--account_muramoneyCompDistance: var(--sp3-5x);
+		--account_balanceCompDistance: var(--sp3-5x);
 
-		--account_muramoneyContainerGap: var(--sp2x);
+		--account_balanceContainerGap: var(--sp2x);
 	}
 
 	/* //! 1510 */
 	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeLMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeM}) {
-		--account_muramoneyCompDistance: var(--sp4x);
+		--account_balanceCompDistance: var(--sp4x);
 
-		--account_muramoneyContainerGap: var(--sp2x);
+		--account_balanceContainerGap: var(--sp2x);
 	}
 
 	/* //! 1440 */
 	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeMMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeS}) {
-		--account_muramoneyCompDistance: var(--sp3x);
+		--account_balanceCompDistance: var(--sp3x);
 
-		--account_muramoneyContainerGap: var(--sp2x);
+		--account_balanceContainerGap: var(--sp2x);
 	}
 
 	/* //! 1280 */
 	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeSMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXS}) {
-		--account_muramoneyCompDistance: var(--sp3x);
+		--account_balanceCompDistance: var(--sp3x);
 
-		--account_muramoneyContainerGap: var(--sp1x);
+		--account_balanceContainerGap: var(--sp1x);
 	}
 
 	/* //! 1024 */
 	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXSMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_TabletSize}) {
-		--account_muramoneyCompDistance: var(--sp3x);
+		--account_balanceCompDistance: var(--sp3x);
 
-		--account_muramoneyContainerGap: var(--sp1x);
+		--account_balanceContainerGap: var(--sp1x);
 	}
 
 	/* //! 768 */
 	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeS}) {
-		--account_muramoneyCompDistance: var(--sp3x);
+		--account_balanceCompDistance: var(--sp3x);
 
-		--account_muramoneyContainerGap: var(--sp1x);
+		--account_balanceContainerGap: var(--sp1x);
 	}
 
 	/* //! Mobile */
 	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeSMin}) {
-		--account_muramoneyCompDistance: var(--sp3x);
+		--account_balanceCompDistance: var(--sp3x);
 
-		--account_muramoneyContainerGap: var(--sp1x);
+		--account_balanceContainerGap: var(--sp1x);
 	}
 `;
-export default MuramoneyCompStyle;
+export default BalanceCompStyle;

package/dist/components/TotalCheckout/index.js

@@ -5,7 +5,7 @@ import { useAddressContext, useCheckoutContext } from '../../modules';
 import AccountButton from '../AccountButton';
 import FreeShippingComp from './FreeShippingComp';
 import PromoCodeComp from './PromoCodeComp';
-import MuramoneyComp from './MuramoneyComp';
+import BalanceComp from './BalanceComp';
 import CommentComp from './CommentComp';
 //* Style
 import TotalCheckoutStyle from './style';
@@ -30,11 +30,11 @@ const TotalCheckout = memo(({ isShipping, children, confirmation, buttonProps, i
                 event.preventDefault();
             }
         };
-        if ((!itemsCount || !user.balance) && innerCollapseRef.current) {
+        if ((!itemsCount || !user?.balance) && innerCollapseRef.current) {
             let inputField = innerCollapseRef.current.querySelectorAll('.base-input');
             if (inputField.length) {
                 [...inputField].forEach((item, i) => {
-                    if (!user.balance && itemsCount && i == 1) {
+                    if (!user?.balance && itemsCount && i == 1) {
                         return;
                     }
                     else {
@@ -44,7 +44,7 @@ const TotalCheckout = memo(({ isShipping, children, confirmation, buttonProps, i
             }
         }
         return () => {
-            if ((!itemsCount || !user.balance) && innerCollapseRef.current) {
+            if ((!itemsCount || !user?.balance) && innerCollapseRef.current) {
                 const inputField = innerCollapseRef.current.querySelectorAll('.base-input');
                 [...inputField].map((item) => {
                     item.removeEventListener('keydown', handleKeyDown);
@@ -71,11 +71,11 @@ const TotalCheckout = memo(({ isShipping, children, confirmation, buttonProps, i
                     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-currency2`, text: itemsCount ? handlePriceCheckFunc(total, currency) : `0 ${currency}` })),
                 !isCheckout ? (React.createElement(FreeShippingComp, { currency: currency, shippingCost: shippingCost, shippingCostValue: shippingCostValue, freeShippingRange: freeShippingRange })) : null,
-                user ? (React.createElement(CollapseContainer, { className: 'collapse-container-wrapper' },
+                React.createElement(CollapseContainer, { className: 'collapse-container-wrapper' },
                     React.createElement("div", { ref: innerCollapseRef },
-                        React.createElement(MuramoneyComp, { getItemCount: itemsCount, balance: user.balance, currency: currency, balanceHandler: handleBalance, useBalance: useBalance }),
-                        React.createElement(PromoCodeComp, { getItemCount: itemsCount, promo_code: promo_code })))) : null,
+                        React.createElement(BalanceComp, { getItemCount: itemsCount, balance: user?.balance || 0, currency: currency, balanceHandler: handleBalance, useBalance: useBalance }),
+                        React.createElement(PromoCodeComp, { getItemCount: itemsCount, promo_code: promo_code }))),
                 isCheckout && typeof isShipping === 'boolean' && !isShipping ? React.createElement(CommentComp, { fillCheckoutData: fillCheckoutData }) : null,
-                React.createElement(AccountButton, { url: buttonProps.url, btnType: `full-width`, text: buttonProps.text, type: buttonProps.type, className: `sticky-wrap-btn`, disabled: buttonProps.disabled, onClick: () => buttonProps.handleClick && buttonProps.handleClick() }))) : (React.createElement(SkeletonTotalCheckout, null))))));
+                React.createElement(AccountButton, { loading: buttonProps.loadingButton, url: buttonProps.url, btnType: `full-width`, text: buttonProps.text, type: buttonProps.type, className: `sticky-wrap-btn`, disabled: buttonProps.disabled, onClick: () => buttonProps.handleClick && buttonProps.handleClick() }))) : (React.createElement(SkeletonTotalCheckout, null))))));
 });
 export default TotalCheckout;

package/dist/components/TotalCheckout/style.js

@@ -72,7 +72,7 @@ const TotalCheckoutStyle = styled.section `
 	}
 
 	.promo-code-text,
-	.muramoney-text,
+	.balance-text,
 	.comment-text {
 		font-size: var(--account_textSize) !important;
 		line-height: var(--account_lineHeight) !important;
@@ -151,7 +151,7 @@ const TotalCheckoutStyle = styled.section `
 		@media (pointer: fine) {
 			@media (hover: hover) {
 				&:hover {
-					.muramoney-text,
+					.balance-text,
 					.promo-code-text,
 					.comment-text {
 						color: var(--account_primaryColor3);
@@ -184,8 +184,8 @@ const TotalCheckoutStyle = styled.section `
 		}
 	}
 
-	.muramoney-container,
-	.muramoney-success-block,
+	.balance-container,
+	.balance-success-block,
 	.promo-code-container,
 	.promo-code-success-block {
 		margin-top: var(--account_commentMarginTop);

package/dist/modules/account/AccountTemplate/index.js

@@ -2,6 +2,7 @@ import React, { useMemo } from 'react';
 import { Text, Link, useUi, Page } from '@weareconceptstudio/core';
 import AccountStyle from './style';
 import { useAccountContext } from '../../../AccountProvider';
+import Loader from '../../../components/Loader';
 const AccountTemplate = ({ isFullWidth = true, menuOptions = [], children }) => {
     const { winWidth } = useUi();
     const { useUser } = useAccountContext();
@@ -29,6 +30,7 @@ const AccountTemplate = ({ isFullWidth = true, menuOptions = [], children }) =>
                         React.createElement(Text, { text: 'signOut', onClick: signOut, className: 'account-p account-p1 account-error-color account-font-bold sign-out' }))),
                 lineStore,
                 React.createElement("div", { className: `right-bar` },
+                    React.createElement(Loader, { className: 'account' }),
                     React.createElement("div", { className: `max-width-wrap ${isFullWidth ? 'full-max-width' : ''}` }, children)))))) : null;
 };
 export default AccountTemplate;