@weareconceptstudio/account 0.4.6 → 0.4.7

package/dist/components/AccountButton/icons.d.ts

@@ -0,0 +1,2 @@
+export const googleIcon: React.JSX.Element;
+import React from 'react';

package/dist/components/AccountButton/icons.js

@@ -0,0 +1,3 @@
+import React from 'react';
+export const googleIcon = (React.createElement("svg", { fill: 'none', viewBox: '0 0 28 28', xmlns: 'http://www.w3.org/2000/svg' },
+    React.createElement("path", { d: 'M27.5725 11.8425L27.4312 11.2431H14.4037V16.7569H22.1875C21.3794 20.5944 17.6294 22.6144 14.5662 22.6144C12.3375 22.6144 9.98812 21.6769 8.43312 20.17C7.61271 19.3623 6.95966 18.4006 6.51137 17.3402C6.06308 16.2797 5.82835 15.1413 5.82062 13.99C5.82062 11.6675 6.86438 9.34437 8.38313 7.81625C9.90188 6.28813 12.1956 5.43313 14.4762 5.43313C17.0881 5.43313 18.96 6.82 19.66 7.4525L23.5781 3.555C22.4287 2.545 19.2712 0 14.35 0C10.5531 0 6.9125 1.45438 4.25125 4.10687C1.625 6.71875 0.265625 10.4956 0.265625 14C0.265625 17.5044 1.55188 21.0925 4.09688 23.725C6.81625 26.5325 10.6675 28 14.6331 28C18.2413 28 21.6612 26.5863 24.0987 24.0212C26.495 21.4963 27.7344 18.0025 27.7344 14.34C27.7344 12.7981 27.5794 11.8825 27.5725 11.8425Z', fill: 'var(--account_primaryColor1)' })));

package/dist/components/AccountButton/index.js

@@ -1,9 +1,10 @@
-import React, { memo, useCallback, useMemo } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import classNames from 'classnames';
 import { Link, useTranslation } from '@weareconceptstudio/core';
+import { googleIcon } from './icons';
 import AccountButtonStyle from './style';
 const AccountButton = (props) => {
-    const { btnType, text, className, onClick, children, url, customLinkProps, target, type = 'button', disabled = false, svg_icon, loading = false } = props;
+    const { btnType, text, className, onClick, children, url, customLinkProps, target, type = 'button', disabled = false, svg_icon, loading = false, isGoogleAuth = false } = props;
     const { translate } = useTranslation();
     const Component = useMemo(() => (url ? Link : 'button'), [url]);
     const customProps = useMemo(() => (url ? { ...customLinkProps, url, target } : { type, disabled }), [url, type, disabled]);
@@ -12,14 +13,17 @@ const AccountButton = (props) => {
         [className]: className,
         'loading': loading,
         'disabled': disabled,
+        'account-google-btn': isGoogleAuth,
     });
     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 },
             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)))));
+            React.createElement("div", { className: `content-button ${loading ? 'loading' : ''}` }, isGoogleAuth ? (React.createElement("div", { className: `google-content-block` },
+                googleIcon,
+                React.createElement("span", { className: `google-text` }, "google"))) : (svg_icon || children || translate(text))))));
 };
 export default AccountButton;

package/dist/components/AccountButton/style.js

@@ -14,6 +14,10 @@ const AccountButtonStyle = styled.div `
 	--account_promoCodeVersionPadTB: var(--sp2x);
 	--account_promoCodeVersionPadLR: var(--sp7x);
 
+	/* //! Google Auth */
+	--account_googleAuthIconSize: var(--sp4x);
+	--account_googleAuthContentGap: var(--sp1x);
+
 	display: inline-flex;
 
 	button,
@@ -242,6 +246,49 @@ const AccountButtonStyle = styled.div `
 		height: calc(100% - var(--account_btnPadTB) * 2);
 	}
 
+	&.account-google-btn {
+		a,
+		button {
+			background-color: var(--account_backgroundColor);
+
+			svg {
+				width: var(--account_googleAuthIconSize);
+				height: var(--account_googleAuthIconSize);
+
+				path {
+					transition: fill var(--account_trTime) ease-out;
+				}
+			}
+
+			.google-content-block {
+				display: flex;
+				align-items: center;
+				gap: var(--account_googleAuthContentGap);
+			}
+
+			.google-text {
+				color: var(--account_primaryColor1);
+				transition: color var(--account_trTime) ease-out;
+			}
+
+			@media (pointer: fine) {
+				@media (hover: hover) {
+					&:hover {
+						svg {
+							path {
+								fill: var(--account_secondaryColor9);
+							}
+						}
+
+						.google-text {
+							color: var(--account_secondaryColor9);
+						}
+					}
+				}
+			}
+		}
+	}
+
 	.loader {
 		/* width: var(--sp4x); */
 		height: 100%;
@@ -290,6 +337,9 @@ const AccountButtonStyle = styled.div `
 		/* //! Promo Code Version */
 		--account_promoCodeVersionPadTB: var(--sp2x);
 		--account_promoCodeVersionPadLR: var(--sp7x);
+
+		/* //! Google Auth */
+		--account_googleAuthIconSize: var(--sp3-5x);
 	}
 
 	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeLMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeM}) {
@@ -305,6 +355,9 @@ const AccountButtonStyle = styled.div `
 		/* //! Promo Code Version */
 		--account_promoCodeVersionPadTB: var(--sp2x);
 		--account_promoCodeVersionPadLR: var(--sp4x);
+
+		/* //! Google Auth */
+		--account_googleAuthIconSize: var(--sp3x);
 	}
 
 	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeMMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeS}) {
@@ -320,6 +373,9 @@ const AccountButtonStyle = styled.div `
 		/* //! Promo Code Version */
 		--account_promoCodeVersionPadTB: var(--sp2x);
 		--account_promoCodeVersionPadLR: var(--sp4x);
+
+		/* //! Google Auth */
+		--account_googleAuthIconSize: var(--sp3x);
 	}
 
 	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeSMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXS}) {
@@ -335,6 +391,9 @@ const AccountButtonStyle = styled.div `
 		/* //! Promo Code Version */
 		--account_promoCodeVersionPadTB: var(--sp2x);
 		--account_promoCodeVersionPadLR: var(--sp4x);
+
+		/* //! Google Auth */
+		--account_googleAuthIconSize: var(--sp3x);
 	}
 
 	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXSMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_TabletSize}) {
@@ -350,6 +409,9 @@ const AccountButtonStyle = styled.div `
 		/* //! Promo Code Version */
 		--account_promoCodeVersionPadTB: var(--sp2x);
 		--account_promoCodeVersionPadLR: var(--sp4x);
+
+		/* //! Google Auth */
+		--account_googleAuthIconSize: var(--sp3x);
 	}
 
 	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeS}) {
@@ -365,6 +427,9 @@ const AccountButtonStyle = styled.div `
 		/* //! Promo Code Version */
 		--account_promoCodeVersionPadTB: var(--sp2x);
 		--account_promoCodeVersionPadLR: var(--sp4x);
+
+		/* //! Google Auth */
+		--account_googleAuthIconSize: var(--sp3x);
 	}
 
 	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeSMin}) {
@@ -380,6 +445,9 @@ const AccountButtonStyle = styled.div `
 		/* //! Promo Code Version */
 		--account_promoCodeVersionPadTB: var(--sp2x);
 		--account_promoCodeVersionPadLR: var(--sp4x);
+
+		/* //! Google Auth */
+		--account_googleAuthIconSize: var(--sp3x);
 	}
 `;
 export default AccountButtonStyle;

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

@@ -20,7 +20,7 @@ const BalanceComp = ({ isBalance = true, currency, balance, useBalance, balanceH
                     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 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-color1 account-font-medium balance-text' }, `${translate('useYourMoney')} (${handlePriceCheckFunc(balance, currency)} ${translate('balance')})`)), 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);

package/dist/components/TotalCheckout/BalanceComp/utils.js

@@ -2,9 +2,7 @@ export const balanceFields = [
     {
         fieldType: 'input',
         labelProps: {
-            // label: 'muramoneyCodeLabel',
             name: 'balance',
-            // required: false,
             errorKey: 'balance',
         },
         fieldProps: {

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

@@ -1,8 +1,8 @@
 export default PromoCodeComp;
-declare function PromoCodeComp({ isPromoCode, promoCodeHandler, usePromoCode, getItemCount }: {
+declare function PromoCodeComp({ isPromoCode, promotionHandler, usePromotion, getItemCount }: {
     isPromoCode?: boolean;
-    promoCodeHandler: any;
-    usePromoCode: any;
+    promotionHandler: any;
+    usePromotion: any;
     getItemCount: any;
 }): React.JSX.Element;
 import React from 'react';

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

@@ -5,14 +5,14 @@ import AccountButton from '../../AccountButton';
 import { promoCodeFields } from './utils';
 //* Style
 import PromoCodeCompStyle from './style';
-const PromoCodeComp = ({ isPromoCode = true, promoCodeHandler, usePromoCode, getItemCount }) => {
+const PromoCodeComp = ({ isPromoCode = true, promotionHandler, usePromotion, getItemCount }) => {
     //! States
     const [couponCode, setCouponCode] = useState(false);
     const [disable, setDisable] = useState(false);
     //! On Finish
     const onFinish = (values) => {
         setDisable(true);
-        promoCodeHandler(values.promo_code);
+        promotionHandler(values.promo_code);
     };
     return isPromoCode ? (React.createElement(PromoCodeCompStyle, { className: `collapse-distance ${getItemCount ? '' : 'disable'}` },
         React.createElement(CollapseItem, { disable: disable, title: React.createElement(React.Fragment, null,
@@ -20,10 +20,10 @@ const PromoCodeComp = ({ isPromoCode = true, promoCodeHandler, usePromoCode, get
                     React.createElement("svg", { xmlns: 'http://www.w3.org/2000/svg', width: '12', height: '12', viewBox: '0 0 12 12', fill: 'none' },
                         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 promo-code-text', text: 'gotPromotionCode' })), description: React.createElement(React.Fragment, null, usePromoCode ? (React.createElement("div", { className: `promo-code-success-block` },
-                React.createElement(Text, { className: 'account-p account-p4 account-primary-color2 account-font-medium promo-code-success-text' }, usePromoCode),
+                React.createElement(Text, { className: 'account-p account-p4 account-primary-color1 account-font-medium promo-code-text', text: 'gotPromotionCode' })), description: React.createElement(React.Fragment, null, usePromotion ? (React.createElement("div", { className: `promo-code-success-block` },
+                React.createElement(Text, { className: 'account-p account-p4 account-primary-color2 account-font-medium promo-code-success-text' }, usePromotion),
                 React.createElement(Text, { text: 'remove', className: 'account-p account-p4 account-primary-color2 account-font-medium promo-code-remove-text', onClick: () => {
-                        promoCodeHandler(null);
+                        promotionHandler(null);
                         setDisable(false);
                     } }))) : (React.createElement(FormBuilder, { onSubmit: onFinish, fields: promoCodeFields, className: `promo-code-block`, formOptions: {
                     className: 'promo-code-container',

package/dist/components/TotalCheckout/index.js

@@ -16,12 +16,12 @@ const TotalCheckout = memo(({ isShipping, children, confirmation, buttonProps })
     const { fillCheckoutData, fillCart, checkoutBtnDisabled, isCheckoutPage } = useCheckoutContext();
     const { addressLoading } = useAddressContext();
     const { user } = useUser();
-    const { itemsCount, shippingCost, freeShippingRange, shippingCostValue, total, subtotal, useBalance, loading, usePromoCode, discountTotal } = useCart();
+    const { itemsCount, shippingCost, freeShippingRange, shippingCostValue, total, subtotal, useBalance, loading, usePromotion, discount } = useCart();
     const handleBalance = (amount) => {
         fillCart('useBalance', amount);
     };
-    const handlePromoCode = (code) => {
-        fillCart('promoCode', code);
+    const handlePromotion = (promotion) => {
+        fillCart('usePromotion', promotion);
     };
     const innerCollapseRef = useRef(null);
     //! disable keypress on input
@@ -68,9 +68,9 @@ const TotalCheckout = memo(({ isShipping, children, confirmation, buttonProps })
                 user && useBalance ? (React.createElement("div", { className: `od-item-wrap` },
                     React.createElement(Text, { className: `account-p account-p2 account-font-regular account-primary-color1`, text: `muramoney` }),
                     React.createElement(Text, { className: `account-p account-p2 account-font-regular account-primary-color1 balance-text-block`, text: `-${handlePriceCheckFunc(useBalance, currency)}` }))) : null,
-                user && discountTotal ? (React.createElement("div", { className: `od-item-wrap` },
+                user && discount ? (React.createElement("div", { className: `od-item-wrap` },
                     React.createElement(Text, { className: `account-p account-p2 account-font-regular account-primary-color1`, text: `discount` }),
-                    React.createElement(Text, { className: `account-p account-p2 account-font-regular account-primary-color1 balance-text-block`, text: `-${handlePriceCheckFunc(discountTotal, currency)}` }))) : null,
+                    React.createElement(Text, { className: `account-p account-p2 account-font-regular account-primary-color1 balance-text-block`, text: `-${handlePriceCheckFunc(discount, currency)}` }))) : null,
                 React.createElement("div", { className: `od-item-wrap` },
                     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}` })),
@@ -78,7 +78,7 @@ const TotalCheckout = memo(({ isShipping, children, confirmation, buttonProps })
                 React.createElement(CollapseContainer, { className: 'collapse-container-wrapper' },
                     React.createElement("div", { ref: innerCollapseRef },
                         React.createElement(BalanceComp, { getItemCount: itemsCount, balance: user?.balance || 0, currency: currency, balanceHandler: handleBalance, useBalance: useBalance }),
-                        React.createElement(PromoCodeComp, { getItemCount: itemsCount, promoCodeHandler: handlePromoCode, usePromoCode: usePromoCode }))),
+                        React.createElement(PromoCodeComp, { getItemCount: itemsCount, promotionHandler: handlePromotion, usePromotion: usePromotion }))),
                 isCheckoutPage && typeof isShipping === 'boolean' && !isShipping ? React.createElement(CommentComp, { fillCheckoutData: fillCheckoutData }) : null,
                 React.createElement(AccountButton, { loading: buttonProps.loadingButton, url: buttonProps.url, btnType: `full-width`, text: buttonProps.text, type: buttonProps.type, className: `sticky-wrap-btn`, disabled: checkoutBtnDisabled, onClick: () => buttonProps.handleClick && buttonProps.handleClick() }))) : (React.createElement(SkeletonTotalCheckout, null))))));
 });

package/dist/modules/account/AccountBalanceTemplate/HeroBalance/ProgressBalance/index.d.ts

@@ -1,9 +1,10 @@
 export default ProgressBalance;
-declare function ProgressBalance({ progress, balance, nextStatusValue, nextStatusTitle, iconValue }: {
+declare function ProgressBalance({ progress, balance, nextStatusValue, nextStatusTitle, iconValue, currency }: {
     progress: any;
     balance: any;
     nextStatusValue: any;
     nextStatusTitle: any;
     iconValue: any;
+    currency: any;
 }): React.JSX.Element;
 import React from 'react';

package/dist/modules/account/AccountBalanceTemplate/HeroBalance/ProgressBalance/index.js

@@ -4,14 +4,14 @@ import { handlePriceCheckFunc, Text, useTranslation } from '@weareconceptstudio/
 import ProgressComponent from './ProgressComponent';
 //* Styles
 import ProgressBalanceStyle from './style';
-const ProgressBalance = ({ progress, balance, nextStatusValue, nextStatusTitle, iconValue }) => {
+const ProgressBalance = ({ progress, balance, nextStatusValue, nextStatusTitle, iconValue, currency }) => {
     const { translate } = useTranslation();
     return (React.createElement(ProgressBalanceStyle, null,
         React.createElement("div", { className: 'wrapper-progress-inner-info' },
             React.createElement(ProgressComponent, { className: 'circular-progress', percent: progress, animated: true, round: true }),
             balance || balance == 0 ? (React.createElement("div", { className: 'wrapper-progress-text' },
-                React.createElement(Text, { className: 'account-primary-color1 account-p account-p4 first-letter balance-title' }, translate('progressBalanceTitle')),
-                React.createElement(Text, { className: 'account-primary-color1  account-h5 first-letter balance-value' }, typeof balance == 'number' ? handlePriceCheckFunc(balance, translate('priceValue')) : balance))) : null),
+                React.createElement(Text, { className: 'account-primary-color1 account-p account-p4 first-letter balance-title', text: 'balance' }),
+                React.createElement(Text, { className: 'account-primary-color1  account-h5 first-letter balance-value' }, typeof balance == 'number' ? handlePriceCheckFunc(balance, currency) : balance))) : null),
         nextStatusValue ? (React.createElement("div", { className: 'wrapper-next-status' },
             React.createElement(Text, { className: 'account-primary-color1 account-p account-p4 text-center next-status-text' },
                 translate('balanceNextStatusDescription1'),
@@ -22,6 +22,6 @@ const ProgressBalance = ({ progress, balance, nextStatusValue, nextStatusTitle,
                 ' ',
                 translate('balanceNextStatusDescription2'),
                 ' ',
-                React.createElement(Text, { className: 'account-secondary-color9 account-font-medium next-status-title', tag: 'span' }, nextStatusTitle)))) : null));
+                React.createElement(Text, { tag: 'span', className: 'account-secondary-color9 account-font-medium next-status-title', text: nextStatusTitle })))) : null));
 };
 export default ProgressBalance;

package/dist/modules/account/AccountBalanceTemplate/HeroBalance/ProgressBalance/style.js

@@ -31,6 +31,10 @@ const ProgressBalanceStyle = styled.div `
 		padding: 0 var(--account_next_status_padLR);
 	}
 
+	.next-status-title {
+		text-transform: capitalize;
+	}
+
 	/* //! 1920 */
 	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXLMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeL}) {
 		/* --sizeProgress: var(--sp51x); */

package/dist/modules/account/AccountBalanceTemplate/HeroBalance/index.d.ts

@@ -1,5 +1,5 @@
 export default HeroBalance;
-declare function HeroBalance({ iconValue, balance, cashback, progress, totalSpent, nextStatusValue, description, title, nextStatusTitle }: {
+declare function HeroBalance({ iconValue, balance, cashback, progress, totalSpent, nextStatusValue, description, title, nextStatusTitle, currency }: {
     iconValue: any;
     balance: any;
     cashback: any;
@@ -9,5 +9,6 @@ declare function HeroBalance({ iconValue, balance, cashback, progress, totalSpen
     description: any;
     title: any;
     nextStatusTitle: any;
+    currency: any;
 }): React.JSX.Element;
 import React from 'react';

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

@@ -4,30 +4,30 @@ import { handlePriceCheckFunc, Text, useTranslation } from '@weareconceptstudio/
 import HeroBalanceStyle from './style';
 //* Component
 import ProgressBalance from './ProgressBalance';
-const HeroBalance = ({ iconValue, balance, cashback, progress, totalSpent, nextStatusValue, description, title, nextStatusTitle }) => {
+const HeroBalance = ({ iconValue, balance, cashback, progress, totalSpent, nextStatusValue, description, title, nextStatusTitle, currency }) => {
     const { translate } = useTranslation();
     const dataInformation = [cashback, totalSpent, balance];
-    const dataInformationTitle = ['balanceCashback', 'balanceTotalSpent', 'specialNameBalance'];
+    const dataInformationTitle = ['balanceCashback', 'balanceTotalSpent', 'balance'];
     return (React.createElement(HeroBalanceStyle, { className: 'account-hero-balance' },
         React.createElement("div", { className: 'inner-wrapper' },
             React.createElement("div", { className: 'left-bar-account-balance' },
                 React.createElement("div", { className: 'inner-wrapper-left-bar' },
                     React.createElement(Text, { className: 'account-primary-color1 account-font-medium account-p account-p3 first-letter status-title', text: 'balanceStatus' }),
-                    React.createElement(Text, { className: 'account-primary-color1 account-font-medium account-h5 first-letter text-title' }, title),
+                    React.createElement(Text, { className: 'account-primary-color1 account-font-medium account-h5 first-letter text-title', text: title }),
                     description && (React.createElement(Text, { className: 'account-primary-color1  account-p account-p2 first-letter description-status' },
-                        description.description1,
+                        translate(description.description1),
                         " ",
                         cashback + '%',
                         " ",
-                        description.description2)),
+                        translate(description.description2))),
                     React.createElement("div", { className: 'wrapper-information-payment' }, dataInformation.map((item, i, arr) => {
                         return ((item || item == 0) && (React.createElement(Text, { key: i, className: 'account-primary-color1  account-p account-p3 first-letter account-font-medium info-text' },
                             translate(dataInformationTitle[i]),
                             ":",
                             ' ',
-                            React.createElement(Text, { tag: 'span', className: 'account-primary-color1  account-p account-p3 first-letter account-font-regular info-value-text' }, arr[0] == item ? item + '%' : typeof item == 'number' ? handlePriceCheckFunc(item, translate('priceValue')) : item))));
+                            React.createElement(Text, { tag: 'span', className: 'account-primary-color1  account-p account-p3 first-letter account-font-regular info-value-text' }, arr[0] == item ? item + '%' : typeof item == 'number' ? handlePriceCheckFunc(item, currency) : item))));
                     })))),
             React.createElement("div", { className: 'empty' }),
-            React.createElement(ProgressBalance, { iconValue: iconValue, balance: balance, progress: progress, nextStatusValue: nextStatusValue, nextStatusTitle: nextStatusTitle }))));
+            React.createElement(ProgressBalance, { balance: balance, progress: progress, currency: currency, iconValue: iconValue, nextStatusValue: nextStatusValue, nextStatusTitle: nextStatusTitle }))));
 };
 export default HeroBalance;

package/dist/modules/account/AccountBalanceTemplate/StatusBalance/ItemStatus/index.d.ts

@@ -1,8 +1,9 @@
 export default ItemStatus;
-declare function ItemStatus({ title, cashback, value, className }: {
+declare function ItemStatus({ title, cashback, value, className, currency }: {
     title: any;
     cashback: any;
     value: any;
     className: any;
+    currency: any;
 }): React.JSX.Element;
 import React from 'react';

package/dist/modules/account/AccountBalanceTemplate/StatusBalance/ItemStatus/index.js

@@ -1,6 +1,6 @@
 import { handlePriceCheckFunc, Text, useTranslation } from '@weareconceptstudio/core';
 import React from 'react';
-const ItemStatus = ({ title, cashback, value, className }) => {
+const ItemStatus = ({ title, cashback, value, className, currency }) => {
     const { translate } = useTranslation();
     return (React.createElement("div", { className: `wrapper-item-status ${className}` },
         React.createElement("div", { className: 'title' },
@@ -16,6 +16,6 @@ const ItemStatus = ({ title, cashback, value, className }) => {
             React.createElement(Text, { className: 'account-primary-color1 account-p account-p4 first-letter text-progress-value' }, value ? (React.createElement(React.Fragment, null,
                 translate('balanceStarting'),
                 " ",
-                handlePriceCheckFunc(value, translate('priceValue')))) : (translate('balanceFirstOrderStatus'))))));
+                handlePriceCheckFunc(value, currency))) : (translate('balanceFirstOrderStatus'))))));
 };
 export default ItemStatus;

package/dist/modules/account/AccountBalanceTemplate/StatusBalance/index.d.ts

@@ -1,6 +1,7 @@
 export default StatusBalance;
-declare function StatusBalance({ allItem, activeStatus }: {
+declare function StatusBalance({ allItem, activeStatus, currency }: {
     allItem: any;
     activeStatus: any;
+    currency: any;
 }): React.JSX.Element;
 import React from 'react';

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

@@ -4,7 +4,7 @@ import { Text, useResizeObserver, useUi } from '@weareconceptstudio/core';
 import StatusBalanceStyle from './style';
 //* Component
 import ItemStatus from './ItemStatus';
-const StatusBalance = ({ allItem, activeStatus }) => {
+const StatusBalance = ({ allItem, activeStatus, currency }) => {
     const { winWidth } = useUi();
     //! Refs
     const wrapperStatusRef = useRef();
@@ -45,7 +45,7 @@ const StatusBalance = ({ allItem, activeStatus }) => {
                 React.createElement("div", { ref: wrapperStatusRef, className: 'wrapper-status' }, allItem.length &&
                     statusActiveItem.current !== false &&
                     allItem.map((item, i, arr) => {
-                        return (React.createElement(ItemStatus, { className: `${i == 0 ? 'start-item' : i == arr.length - 1 ? 'end-item' : ''} ${i <= statusActiveItem.current ? 'active-status' : ''}`, key: i, title: item.name, cashback: item.cashback, value: item.value }));
+                        return (React.createElement(ItemStatus, { key: i, title: item.name, value: item.value, currency: currency, cashback: item.cashback, className: `${i == 0 ? 'start-item' : i == arr.length - 1 ? 'end-item' : ''} ${i <= statusActiveItem.current ? 'active-status' : ''}` }));
                     })),
                 React.createElement("div", { className: 'wrapper-line-all' }, allItem.length &&
                     statusActiveItem.current !== false &&

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

@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import { api, useTranslation } from '@weareconceptstudio/core';
+import { useAccountContext } from '../../../AccountProvider';
 //* Style
 import AccountBalanceTemplateStyle from './style';
 //* Component
@@ -8,6 +9,7 @@ import HistoryBalance from './HistoryBalance';
 import StatusBalance from './StatusBalance';
 const AccountBalanceTemplate = ({ iconValue, dataItem, linkEarnPage, className }) => {
     const { selectedLang } = useTranslation();
+    const { currency } = useAccountContext();
     //! State
     const [dataBalance, setDataBalance] = useState(false);
     useEffect(() => {
@@ -16,7 +18,7 @@ const AccountBalanceTemplate = ({ iconValue, dataItem, linkEarnPage, className }
         });
     }, []);
     return dataBalance ? (React.createElement(AccountBalanceTemplateStyle, { className: className || '' },
-        React.createElement(HeroBalance, { cashback: dataBalance.cashback, balance: dataBalance.balance, title: dataBalance.info.status, totalSpent: dataBalance.info.spent.current, nextStatusValue: dataBalance.info.spent.next, progress: dataBalance.info.timeline, nextStatusTitle: 'Resident', iconValue: iconValue, description: (() => {
+        React.createElement(HeroBalance, { currency: currency, iconValue: iconValue, nextStatusTitle: 'resident', balance: dataBalance.balance, title: dataBalance.info.status, cashback: dataBalance.cashback, progress: dataBalance.info.timeline, totalSpent: dataBalance.info.spent.current, nextStatusValue: dataBalance.info.spent.next, description: (() => {
                 if (dataItem) {
                     const { description1, description2 } = dataItem.find((item) => item.name?.toLowerCase() === dataBalance.info.status?.toLowerCase()) || {};
                     return { description1, description2 };
@@ -25,7 +27,7 @@ const AccountBalanceTemplate = ({ iconValue, dataItem, linkEarnPage, className }
                     return false;
                 }
             })() }),
-        React.createElement(StatusBalance, { activeStatus: dataBalance.info.status, allItem: dataItem }),
+        React.createElement(StatusBalance, { allItem: dataItem, currency: currency, activeStatus: dataBalance.info.status }),
         React.createElement(HistoryBalance, { linkEarnPage: linkEarnPage }))) : null;
 };
 export default AccountBalanceTemplate;

package/dist/modules/account/AccountSettingsTemplate/AccountInfo/index.js

@@ -1,11 +1,12 @@
 import React, { useState, useCallback } from 'react';
-import { Text, useUi } from '@weareconceptstudio/core';
+import { Text, useTranslation, useUi } from '@weareconceptstudio/core';
 import { FormBuilder } from '@weareconceptstudio/form';
 import { AccountButton, WarningMessageForPopup } from '../../../../components';
 import AccountInfoStyle from './style';
 import { defaultDisplayFields, defaultFormFields } from './utils';
 const AccountInfo = ({ user, onAccountUpdate, displayFields = defaultDisplayFields, formFields = defaultFormFields }) => {
     const { openPopup } = useUi();
+    const { translate } = useTranslation();
     //! State
     const [edit, setEdit] = useState(false);
     //! Handle Popup
@@ -26,7 +27,9 @@ const AccountInfo = ({ user, onAccountUpdate, displayFields = defaultDisplayFiel
         React.createElement(Text, { text: `accountInformation`, className: `account-p account-p1 account-font-bold account-primary-color1` }),
         !edit ? (React.createElement(React.Fragment, null,
             React.createElement("div", { className: `info-wrap` }, displayFields.map((displayField, index) => (React.createElement("div", { key: index, className: `info-item-wrap` },
-                React.createElement(Text, { className: `account-p account-p3 account-font-bold account-primary-color1`, text: `${displayField.label}` }),
+                React.createElement(Text, { className: `account-p account-p3 account-font-bold account-primary-color1` },
+                    `${translate(displayField.label)}`,
+                    ":"),
                 "\u00A0",
                 React.createElement(Text, { className: `account-p account-p3 account-font-regular account-primary-color1`, text: user[displayField.value] || '-' }))))),
             React.createElement(AccountButton, { text: `edit`, btnType: `green-large-text`, onClick: () => setEdit(true) }))) : (React.createElement(React.Fragment, null,

package/dist/modules/account/AccountSettingsTemplate/AccountInfo/utils.js

@@ -1,8 +1,8 @@
 export const defaultDisplayFields = [
-    { label: 'first_name', value: 'first_name' },
-    { label: 'last_name', value: 'last_name' },
-    { label: 'phone_', value: 'phone' },
-    { label: 'email_', value: 'email' },
+    { label: 'firstName', value: 'first_name' },
+    { label: 'lastName', value: 'last_name' },
+    { label: 'phone', value: 'phone' },
+    { label: 'email', value: 'email' },
 ];
 export const defaultFormFields = [
     {
@@ -28,7 +28,7 @@ export const defaultFormFields = [
     {
         fieldType: 'phone',
         labelProps: {
-            label: 'phone_input',
+            label: 'phone',
             name: 'phone',
         },
     },

package/dist/modules/account/AccountSettingsTemplate/AccountPassword/index.js

@@ -23,10 +23,10 @@ const AccountPassword = ({ formFields = defaultFormFields, onPasswordUpdate }) =
         });
     }, []);
     return (React.createElement(AccountPasswordStyle, { className: `account-password` },
-        React.createElement(Text, { className: `account-p account-p1 account-font-bold account-primary-color1`, text: `password_title` }),
+        React.createElement(Text, { className: `account-p account-p1 account-font-bold account-primary-color1`, text: `password` }),
         !edit ? (React.createElement(React.Fragment, null,
             React.createElement("div", { className: `info-item-wrap` },
-                React.createElement(Text, { className: `account-p account-p3 account-font-bold account-primary-color1`, text: `password_` }),
+                React.createElement(Text, { className: `account-p account-p3 account-font-bold account-primary-color1`, text: `password` }),
                 "\u00A0",
                 React.createElement(Text, { className: `account-p account-p3 account-font-regular account-primary-color1`, text: '****************' })),
             React.createElement(AccountButton, { text: `edit`, btnType: `green-large-text`, onClick: () => setEdit(true) }))) : (React.createElement(FormBuilder, { formOptions: {

package/dist/modules/address/AddressWrap/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import classNames from 'classnames';
 import { useAddressContext } from '../AddressProvider';
-import { Text, useUi } from '@weareconceptstudio/core';
+import { Text, useTranslation, useUi } from '@weareconceptstudio/core';
 import AccountButton from '../../../components/AccountButton';
 import EmptyAddress from '../EmptyAddress';
 import AddressItem from '../AddressItem';
@@ -9,6 +9,7 @@ import AddressForm from '../AddressForm';
 const AddressWrap = ({ title = 'addresses', addNewText = 'addNewAdd', type, className }) => {
     const { openPopup } = useUi();
     const { addresses } = useAddressContext();
+    const { translate } = useTranslation();
     const classString = classNames('address-wrap', {
         [className]: className,
     });
@@ -20,7 +21,7 @@ const AddressWrap = ({ title = 'addresses', addNewText = 'addNewAdd', type, clas
     return (React.createElement("div", { className: classString },
         React.createElement("div", { className: `address-title-container` },
             React.createElement(Text, { className: `account-p account-p1 account-font-bold account-primary-color1`, text: title }),
-            React.createElement(AccountButton, { text: addNewText, btnType: `purple-text`, onClick: handleAddNewAddressPopup })),
+            React.createElement(AccountButton, { btnType: `purple-text`, onClick: handleAddNewAddressPopup, text: `+ ${translate(addNewText)}` })),
         addresses.length > 0 ? (React.createElement("div", { className: `flex-wrapper` }, addresses.map((item, index) => (React.createElement(AddressItem, { key: index, type: type, data: item }))))) : (React.createElement(EmptyAddress, null))));
 };
 export default AddressWrap;