@weareconceptstudio/account 0.3.5 → 0.3.6

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/components/TotalCheckout/BalanceComp/style.d.ts

@@ -0,0 +1,2 @@
+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';
@@ -73,9 +73,9 @@ const TotalCheckout = memo(({ isShipping, children, confirmation, buttonProps, i
                 !isCheckout ? (React.createElement(FreeShippingComp, { currency: currency, shippingCost: shippingCost, shippingCostValue: shippingCostValue, freeShippingRange: freeShippingRange })) : null,
                 React.createElement(CollapseContainer, { className: 'collapse-container-wrapper' },
                     React.createElement("div", { ref: innerCollapseRef },
-                        React.createElement(MuramoneyComp, { getItemCount: itemsCount, balance: user?.balance || 0, currency: currency, balanceHandler: handleBalance, useBalance: useBalance }),
+                        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;

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

@@ -90,6 +90,7 @@ const AccountStyle = styled.section `
 			width: var(--account_rightBarWidth);
 			padding: 0 calc(var(--account_colDistance) / 2);
 			margin-top: var(--account_stickyMarTop);
+			position: relative;
 
 			.max-width-wrap {
 				width: 100%;
@@ -239,6 +240,20 @@ const AccountStyle = styled.section `
 				padding: 0 var(--account_contPaddingLR);
 			}
 
+			.right-bar {
+				height: 100vh;
+				animation: heightMobile 1s ease-out 1.8s forwards;
+
+				@keyframes heightMobile {
+					0% {
+						height: 100vh;
+					}
+					100% {
+						height: auto;
+					}
+				}
+			}
+
 			.space-line {
 				width: 100%;
 				border-bottom: 1px solid var(--account_primaryColor5);
@@ -277,6 +292,20 @@ const AccountStyle = styled.section `
 				padding: 0 var(--account_contPaddingLR);
 			}
 
+			.right-bar {
+				height: 150vh;
+				animation: heightMobile 1s ease-out 1.8s forwards;
+
+				@keyframes heightMobile {
+					0% {
+						height: 100vh;
+					}
+					100% {
+						height: auto;
+					}
+				}
+			}
+
 			.space-line {
 				width: 100%;
 				border-bottom: 1px solid var(--account_primaryColor5);

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

@@ -1,5 +1,5 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { api, Page } from '@weareconceptstudio/core';
+import React, { useCallback, useRef, useState } from 'react';
+import { Page } from '@weareconceptstudio/core';
 import { Sequence, TotalCheckout } from '../../../components';
 import { useAddressContext } from '../../address';
 import { useAccountContext } from '../../../AccountProvider';
@@ -26,8 +26,19 @@ const CheckoutTemplate = () => {
     const handleCheckoutFirstStep = () => {
         firstStepFormRef.current.submit();
     };
+    const [loadingProcessToPayment, setLoadingProcessToPayment] = useState(false);
     const handleCheckoutBtn = useCallback(() => {
-        checkStep.isShipping ? handleCheckoutFirstStep() : handleCheckout();
+        if (checkStep.isShipping) {
+            handleCheckoutFirstStep();
+        }
+        else {
+            setLoadingProcessToPayment(true);
+            handleCheckout().finally(() => {
+                setTimeout(() => {
+                    setLoadingProcessToPayment(false);
+                }, 1000);
+            });
+        }
     }, [checkStep]);
     return (React.createElement(Page, { className: 'checkout use-account' },
         React.createElement(AccountContainer, { className: `second-version` },
@@ -38,6 +49,7 @@ const CheckoutTemplate = () => {
                         handleClick: handleCheckoutBtn,
                         type: checkStep.isShipping ? 'submit' : 'button',
                         text: checkStep.isShipping ? 'proceedToCheckout' : 'proceedToPayment',
+                        loadingButton: loadingProcessToPayment,
                     } }, !addressLoading ? (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,

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

@@ -4,14 +4,14 @@ import { popupCardSVG } from '../icons';
 //* Style
 import AddNewCardStyle from './style';
 const AddNewCard = ({ className, isCheckout }) => {
-    const addNew = async () => {
-        return await api.post('add-card', { backUrl: `${window.location.href}${isCheckout ? '?c=paymentMethods' : ''}` }).then((res) => {
+    const addNewCard = async () => {
+        return await api.post('add-card', { backUrl: `${window.location.href}`, isCheckout }).then((res) => {
             if (res.redirect_url) {
                 window.location.href = res.redirect_url;
             }
         });
     };
-    return (React.createElement(AddNewCardStyle, { className: `new-card-container ${className || ''}`, onClick: addNew },
+    return (React.createElement(AddNewCardStyle, { className: `new-card-container ${className || ''}`, onClick: addNewCard },
         React.createElement("div", { className: `new-card-wrap` },
             React.createElement("div", { className: 'account-card-add-icon' }, popupCardSVG),
             React.createElement(Text, { className: `account-add-card-text account-p account-p3 account-font-medium account-primary-color1`, text: 'addNewCard' }))));

package/dist/modules/payment/Card/index.d.ts

@@ -1,9 +1,10 @@
 export default Card;
-declare function Card({ cardOption, className, selectedPayment, setSelectedPayment, deleteCard }: {
+declare function Card({ cardOption, className, selectedPayment, setSelectedPayment, deleteCard, isCheckout }: {
     cardOption: any;
     className: any;
     selectedPayment: any;
     setSelectedPayment: any;
     deleteCard: any;
+    isCheckout: any;
 }): React.JSX.Element;
 import React from 'react';

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

@@ -6,13 +6,8 @@ import WarningMessageForPopup from '../../../components/WarningMessageForPopup';
 import AccountButton from '../../../components/AccountButton';
 //* Style
 import CardStyle from './style';
-const Card = ({ cardOption, className, selectedPayment, setSelectedPayment, deleteCard }) => {
+const Card = ({ cardOption, className, selectedPayment, setSelectedPayment, deleteCard, isCheckout }) => {
     const { openPopup } = useUi();
-    const formatCardNumber = (number) => {
-        if (!number)
-            return '';
-        return number.replace(/(.{4})/g, '$1 ').trim();
-    };
     //! Handle Popups
     const handleDeletePopup = useCallback(() => {
         openPopup(React.createElement(WarningMessageForPopup, { isDelete: true, title: 'deleteCardMessage', description: 'confirmDeleteCard', onRemove: () => deleteCard(cardOption.id) }), {
@@ -28,9 +23,9 @@ const Card = ({ cardOption, className, selectedPayment, setSelectedPayment, dele
                     React.createElement("path", { d: 'M13.345 30.462c-1.062 0-1.859-0.531-2.39-1.328l-9.56-16.996c-0.797-1.328-0.266-2.921 1.062-3.718 1.328-0.531 2.921 0 3.718 1.328l7.436 13.012 12.481-20.183c0.797-1.328 2.39-1.593 3.718-0.797s1.593 2.39 0.797 3.718l-14.871 23.635c-0.531 0.797-1.328 1.328-2.39 1.328z' })))) : null),
         React.createElement("div", { className: `card-wrap-center` },
             React.createElement(Text, { className: `card-full-name account-p account-p3 account-font-regular`, text: cardOption.name }),
-            React.createElement(Text, { className: `card-number account-p account-p1 account-font-regular`, text: formatCardNumber(cardOption.number) })),
+            React.createElement(Text, { className: `card-number account-p account-p1 account-font-regular`, text: cardOption.number })),
         React.createElement("div", { className: `card-wrap-bottom` },
             React.createElement(Text, { className: `account-p account-p3 account-font-regular`, text: cardOption.is_expired ? 'cardExpired' : `Exp. Date ${cardOption.exp_date}` }),
-            React.createElement(AccountButton, { text: `remove`, onClick: handleDeletePopup, btnType: `green-small-text`, className: `account-card-remove-btn account-p account-p3 account-font-regular` }))));
+            !isCheckout && selectedPayment != cardOption.id ? (React.createElement(AccountButton, { text: `remove`, onClick: handleDeletePopup, btnType: `green-small-text`, className: `account-card-remove-btn account-p account-p3 account-font-regular` })) : null)));
 };
 export default Card;

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Text } from '@weareconceptstudio/core';
+import { Text, api } from '@weareconceptstudio/core';
 import { useCheckoutContext } from '../../checkout';
 //* Components
 import AccountButton from '../../../components/AccountButton';
@@ -7,12 +7,28 @@ import PaymentMethods from '../PaymentMethods';
 import SelectedPayment from '../SelectedPayment';
 //* Style
 import PaymentStyle from './style';
+import { useAccountContext } from '../../../AccountProvider';
 const Payment = ({ title, onClick, className }) => {
+    const { useUser } = useAccountContext();
     const { checkoutData, fillCheckoutData } = useCheckoutContext();
+    const { user } = useUser();
+    const addNewCard = async () => {
+        return await api.post('add-card', { backUrl: `${window.location.href}`, isCheckout: true }).then((res) => {
+            if (res.redirect_url) {
+                window.location.href = res.redirect_url;
+            }
+        });
+    };
+    const setSelectedPayment = (value) => {
+        fillCheckoutData('paymentType', value);
+        if (value == 'card') {
+            addNewCard();
+        }
+    };
     return (React.createElement(PaymentStyle, { className: `item-container ${className || ''}` },
         React.createElement("div", { className: `change-payment-wrap` },
             React.createElement(Text, { className: `account-p account-p2 account-font-bold account-primary-color1`, text: title }),
-            checkoutData.paymentType && (React.createElement(AccountButton, { text: `change`, btnType: `green-small-text`, onClick: onClick }))),
-        checkoutData.paymentType ? (React.createElement(SelectedPayment, null)) : (React.createElement(PaymentMethods, { selectedPayment: checkoutData.paymentType, setSelectedPayment: (value) => fillCheckoutData('paymentType', value) }))));
+            user.default_payment_method && (React.createElement(AccountButton, { text: `change`, btnType: `green-small-text`, onClick: onClick }))),
+        user.default_payment_method ? (React.createElement(SelectedPayment, null)) : (React.createElement(PaymentMethods, { selectedPayment: checkoutData.paymentType, setSelectedPayment: setSelectedPayment }))));
 };
 export default Payment;

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

@@ -23,9 +23,7 @@ const PaymentMethodItem = ({ item, selectedPayment, setSelectedPayment, singlePa
                 React.createElement("svg", { version: '1.1', viewBox: '0 0 32 32', xmlns: 'http://www.w3.org/2000/svg', className: `checkbox-icon ${selectedPayment === item.value || (item.value == 'card' && isNumeric(selectedPayment)) || singlePayment ? 'selected' : 'note-selected'}` },
                     React.createElement("path", { d: 'M13.345 30.462c-1.062 0-1.859-0.531-2.39-1.328l-9.56-16.996c-0.797-1.328-0.266-2.921 1.062-3.718 1.328-0.531 2.921 0 3.718 1.328l7.436 13.012 12.481-20.183c0.797-1.328 2.39-1.593 3.718-0.797s1.593 2.39 0.797 3.718l-14.871 23.635c-0.531 0.797-1.328 1.328-2.39 1.328z' })))),
         isCardType && singlePayment && (React.createElement("div", { className: 'card-details' },
-            React.createElement("span", { className: 'card-number' }, item.card.number),
-            React.createElement("span", { className: 'card-exp-date' },
-                "Exp. Date ",
-                item.card.exp_date)))));
+            React.createElement("span", { className: 'card-number' }, item.card.short_number),
+            item.card.is_expired ? (React.createElement(Text, { tag: 'span', className: 'card-exp-date', text: 'cardExpired' })) : null))));
 };
 export default PaymentMethodItem;

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

@@ -1,11 +1,15 @@
 import React from 'react';
+import { useAccountContext } from '../../../AccountProvider';
 //* Components
 import PaymentMethodItem from '../PaymentMethodItem';
 //* Style
 import PaymentMethodsStyle from './style';
-import { useAccountContext } from '../../../AccountProvider';
 const PaymentMethods = ({ className, selectedPayment, setSelectedPayment }) => {
-    const { paymentOptions } = useAccountContext();
-    return (React.createElement(PaymentMethodsStyle, { className: `payment-item-container ${className || ''}` }, paymentOptions.map((item, index) => (React.createElement(PaymentMethodItem, { item: item, index: index, selectedPayment: selectedPayment, setSelectedPayment: setSelectedPayment })))));
+    const { paymentOptions, useUser } = useAccountContext();
+    const { user } = useUser();
+    const paymentMethods = useMemo(() => {
+        return !!user.default_payment_method ? paymentOptions : [{ label: 'Card', value: 'card' }, ...paymentOptions];
+    }, [user, paymentOptions]);
+    return (React.createElement(PaymentMethodsStyle, { className: `payment-item-container ${className || ''}` }, paymentMethods.map((item, index) => (React.createElement(PaymentMethodItem, { key: index, item: item, selectedPayment: selectedPayment, setSelectedPayment: setSelectedPayment })))));
 };
 export default PaymentMethods;

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

@@ -19,7 +19,7 @@ const PaymentWrap = ({ selectedPayment, setSelectedPayment, isCheckout = false }
     return (React.createElement(PaymentWrapStyle, null,
         React.createElement("div", { className: `flex-wrapper` },
             React.createElement(AddNewCard, { isCheckout: isCheckout }),
-            cards?.map((card, index) => (React.createElement(Card, { key: index, cardOption: card, selectedPayment: selectedPayment, setSelectedPayment: setSelectedPayment, deleteCard: deleteCard })))),
+            cards?.map((card, index) => (React.createElement(Card, { key: index, cardOption: card, selectedPayment: selectedPayment, setSelectedPayment: setSelectedPayment, deleteCard: deleteCard, isCheckout: isCheckout })))),
         React.createElement("div", { className: 'line' }),
         React.createElement(PaymentMethods, { selectedPayment: selectedPayment, setSelectedPayment: setSelectedPayment })));
 };

package/package.json

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

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

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

package/dist/components/TotalCheckout/MuramoneyComp/style.d.ts

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