@weareconceptstudio/account 0.4.6 → 0.4.8

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/CustomCheckbox/index.js

@@ -10,6 +10,6 @@ const CustomCheckbox = ({ hide, setHide, isText = true }) => {
             hide ? (React.createElement("div", { className: 'checkbox-wrap', role: 'button' },
                 React.createElement(CheckboxCheckedIcon, null))) : (React.createElement("div", { className: 'checkbox-wrap', role: 'button' },
                 React.createElement(CheckboxIcon, null))),
-            isText ? (React.createElement(Text, { className: `account-p account-p3 account-font-regular account-primary-color1 checkbox-text`, text: `useAlsoBillingAddress` })) : null)));
+            isText ? (React.createElement(Text, { className: `account-p account-p3 account-font-regular account-primary-color1 checkbox-text`, text: `account.order_balance.useAlsoBillingAddress` })) : null)));
 };
 export default CustomCheckbox;

package/dist/components/Sequence/index.js

@@ -11,55 +11,55 @@ const Sequence = ({ step }) => {
             React.createElement("div", { className: `step step-1 ${step}` },
                 React.createElement("div", { className: `circle-wrap` },
                     React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color4 step-number`, text: 1 })),
-                React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color4 step-text`, text: 'shipping' }),
+                React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color4 step-text`, text: 'account.address_management.shipping' }),
                 React.createElement("div", { className: `step-line` })),
             React.createElement("div", { className: `step step-2` },
                 React.createElement("div", { className: `circle-wrap` },
                     React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color4 step-number`, text: 2 })),
-                React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color4 step-text`, text: 'review' }),
+                React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color4 step-text`, text: 'account.order_balance.review' }),
                 React.createElement("div", { className: `step-line` })),
             React.createElement("div", { className: `step step-3` },
                 React.createElement("div", { className: `circle-wrap` },
                     React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color4 step-number`, text: 3 })),
-                React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color4 step-text`, text: 'payment' }),
+                React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color4 step-text`, text: 'account.payment_management.payment' }),
                 React.createElement("div", { className: `step-line` })),
             React.createElement("div", { className: `step step-4` },
                 React.createElement("div", { className: `circle-wrap` },
                     React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color4 step-number`, text: 4 })),
-                React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color4 step-text`, text: 'confirmation' })))) : step === 'review' ? (React.createElement(React.Fragment, null,
+                React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color4 step-text`, text: 'account.order_balance.confirmation' })))) : step === 'review' ? (React.createElement(React.Fragment, null,
             React.createElement("div", { className: `step step-1 ${step}` },
                 React.createElement("div", { className: `circle-wrap` }, checkbox),
-                React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color4 step-text`, text: 'shipping' }),
+                React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color4 step-text`, text: 'account.address_management.shipping' }),
                 React.createElement("div", { className: `step-line` })),
             React.createElement("div", { className: `step step-2 ${step}` },
                 React.createElement("div", { className: `circle-wrap` },
                     React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color4 step-number`, text: 2 })),
-                React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color4 step-text`, text: 'review' }),
+                React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color4 step-text`, text: 'account.order_balance.review' }),
                 React.createElement("div", { className: `step-line` })),
             React.createElement("div", { className: `step step-3` },
                 React.createElement("div", { className: `circle-wrap` },
                     React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color4 step-number`, text: 3 })),
-                React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color4 step-text`, text: 'payment' }),
+                React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color4 step-text`, text: 'account.payment_management.payment' }),
                 React.createElement("div", { className: `step-line` })),
             React.createElement("div", { className: `step step-4` },
                 React.createElement("div", { className: `circle-wrap` },
                     React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color4 step-number`, text: 4 })),
-                React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color4 step-text`, text: 'confirmation' })))) : (React.createElement(React.Fragment, null,
+                React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color4 step-text`, text: 'account.order_balance.confirmation' })))) : (React.createElement(React.Fragment, null,
             React.createElement("div", { className: `step step-1 ${step}` },
                 React.createElement("div", { className: `circle-wrap` }, checkbox),
-                React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color4 step-text`, text: 'shipping' }),
+                React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color4 step-text`, text: 'account.address_management.shipping' }),
                 React.createElement("div", { className: `step-line` })),
             React.createElement("div", { className: `step step-2 ${step}` },
                 React.createElement("div", { className: `circle-wrap` }, checkbox),
-                React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color4 step-text`, text: 'review' }),
+                React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color4 step-text`, text: 'account.order_balance.review' }),
                 React.createElement("div", { className: `step-line` })),
             React.createElement("div", { className: `step step-3 ${step}` },
                 React.createElement("div", { className: `circle-wrap` }, checkbox),
-                React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color4 step-text`, text: 'payment' }),
+                React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color4 step-text`, text: 'account.payment_management.payment' }),
                 React.createElement("div", { className: `step-line` })),
             React.createElement("div", { className: `step step-4 ${step}` },
                 React.createElement("div", { className: `circle-wrap` },
                     React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color4 step-number`, text: 4 })),
-                React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color4 step-text`, text: 'confirmation' })))))));
+                React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color4 step-text`, text: 'account.order_balance.confirmation' })))))));
 };
 export default Sequence;

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

@@ -20,14 +20,14 @@ 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('account.balance_promotions.useYourMoney')} (${handlePriceCheckFunc(balance, currency)} ${translate('account.balance_promotions.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: () => {
+                React.createElement(Text, { text: 'account.general_actions.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: `balance-block`, formOptions: {
                     className: 'balance-container',
                 } },
-                React.createElement(AccountButton, { text: `add`, type: 'submit', btnType: `balance-version` })))) }))) : null;
+                React.createElement(AccountButton, { text: `account.general_actions.add`, type: 'submit', btnType: `balance-version` })))) }))) : null;
 };
 export default BalanceComp;

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

@@ -2,13 +2,11 @@ export const balanceFields = [
     {
         fieldType: 'input',
         labelProps: {
-            // label: 'muramoneyCodeLabel',
             name: 'balance',
-            // required: false,
-            errorKey: 'balance',
+            errorKey: 'account.balance_promotions.balance',
         },
         fieldProps: {
-            placeholder: 'balancePlaceholder',
+            placeholder: 'account.balance_promotions.balancePlaceholder',
             type: 'number',
         },
     },

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

@@ -10,6 +10,6 @@ const CommentComp = ({ fillCheckoutData }) => {
                         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 comment-text', text: 'comment' })), description: React.createElement(Input.TextArea, { containerClassName: `comment-field`, placeholder: 'checkoutCommentPlaceholder', onChange: (e) => fillCheckoutData('note', e.target.value), className: `account-p account-p3 account-font-regular account-primary-color1` }) }))));
+                    React.createElement(Text, { className: 'account-p account-p4 account-primary-color1 account-font-medium comment-text', text: 'account.order_balance.comment' })), description: React.createElement(Input.TextArea, { containerClassName: `comment-field`, placeholder: 'account.cart_checkout.checkoutCommentPlaceholder', onChange: (e) => fillCheckoutData('note', e.target.value), className: `account-p account-p3 account-font-regular account-primary-color1` }) }))));
 };
 export default CommentComp;

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

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

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,14 +20,14 @@ 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, { text: 'remove', className: 'account-p account-p4 account-primary-color2 account-font-medium promo-code-remove-text', onClick: () => {
-                        promoCodeHandler(null);
+                React.createElement(Text, { className: 'account-p account-p4 account-primary-color1 account-font-medium promo-code-text', text: 'account.balance_promotions.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: 'account.general_actions.remove', className: 'account-p account-p4 account-primary-color2 account-font-medium promo-code-remove-text', onClick: () => {
+                        promotionHandler(null);
                         setDisable(false);
                     } }))) : (React.createElement(FormBuilder, { onSubmit: onFinish, fields: promoCodeFields, className: `promo-code-block`, formOptions: {
                     className: 'promo-code-container',
                 } },
-                React.createElement(AccountButton, { text: `add`, type: 'submit', btnType: `promo-code-version` })))) }))) : null;
+                React.createElement(AccountButton, { text: `account.general_actions.add`, type: 'submit', btnType: `promo-code-version` })))) }))) : null;
 };
 export default PromoCodeComp;

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

@@ -2,13 +2,11 @@ export const promoCodeFields = [
     {
         fieldType: 'input',
         labelProps: {
-            // label: 'promoCodeLabel',
             name: 'promo_code',
-            // required: false,
             errorKey: 'promoCode',
         },
         fieldProps: {
-            placeholder: 'promoCodePlaceholder',
+            placeholder: 'account.balance_promotions.promoCodePlaceholder',
         },
     },
 ];

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

@@ -2,7 +2,6 @@ import React from 'react';
 //* Styles
 import { skeletonTotal } from './icons';
 import SkeletonTotalCheckoutStyle from './style';
-//* Component
 const SkeletonTotalCheckout = () => {
     return (React.createElement(SkeletonTotalCheckoutStyle, null,
         React.createElement("div", { className: 'wrapper-skeleton' }, skeletonTotal)));

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
@@ -57,29 +57,29 @@ const TotalCheckout = memo(({ isShipping, children, confirmation, buttonProps })
         React.createElement("div", { className: `cart-main-wrap` },
             React.createElement("div", { className: `left-panel-wrap panel` }, children),
             React.createElement("div", { className: `right-panel-wrap panel ${confirmation ? 'display-none-wrap' : ''}` }, !confirmation && !addressLoading && !loading ? (React.createElement("div", { className: `max-width-wrapper sticky-wrap` },
-                React.createElement(Text, { className: `account-p account-p2 account-font-bold account-primary-color1 sticky-wrap-title`, text: `orderSummary` }),
+                React.createElement(Text, { className: `account-p account-p2 account-font-bold account-primary-color1 sticky-wrap-title`, text: `account.cart_checkout.orderSummary` }),
                 React.createElement("div", { className: `od-line` }),
                 React.createElement("div", { className: `od-item-wrap` },
-                    React.createElement(Text, { className: `account-p account-p2 account-font-regular account-primary-color1 sticky-wrap-subtotal`, text: `subtotal` }),
+                    React.createElement(Text, { className: `account-p account-p2 account-font-regular account-primary-color1 sticky-wrap-subtotal`, text: `account.cart_checkout.subtotal` }),
                     React.createElement(Text, { className: `account-p account-p2 account-font-regular account-primary-color1 sticky-wrap-currency`, text: itemsCount ? handlePriceCheckFunc(subtotal, currency) : `0 ${currency}` })),
                 React.createElement("div", { className: `od-item-wrap` },
-                    React.createElement(Text, { className: `account-p account-p2 account-font-regular account-primary-color1 sticky-wrap-shipping`, text: `shipping` }),
+                    React.createElement(Text, { className: `account-p account-p2 account-font-regular account-primary-color1 sticky-wrap-shipping`, text: `account.address_management.shipping` }),
                     React.createElement(Text, { className: `account-p account-p2 account-font-regular account-primary-color1 sticky-wrap-shipping-cost`, text: `${String(shippingCost).toLowerCase() === 'free' || shippingCost === '-' ? shippingCost : `${numToLocalString(shippingCost)} ${currency}`}` })),
                 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`, text: `account.balance_promotions.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` },
-                    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,
+                user && discount ? (React.createElement("div", { className: `od-item-wrap` },
+                    React.createElement(Text, { className: `account-p account-p2 account-font-regular account-primary-color1`, text: `account.order_balance.discount` }),
+                    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-total`, text: `account.order_balance.total` }),
                     React.createElement(Text, { className: `account-p account-p2 account-font-bold account-primary-color1 sticky-wrap-currency2`, text: itemsCount ? handlePriceCheckFunc(total, currency) : `0 ${currency}` })),
                 !isCheckoutPage ? (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(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))))));
+                React.createElement(AccountButton, { url: buttonProps.url, btnType: `full-width`, text: buttonProps.text, type: buttonProps.type, disabled: checkoutBtnDisabled, loading: buttonProps.loadingButton, className: `sticky-wrap-btn text-center`, onClick: () => buttonProps.handleClick && buttonProps.handleClick() }))) : (React.createElement(SkeletonTotalCheckout, null))))));
 });
 export default TotalCheckout;

package/dist/components/WarningMessageForPopup/index.js

@@ -10,8 +10,8 @@ const WarningMessageForPopup = React.memo(({ isDelete = false, isThankYou = fals
         React.createElement(Text, { tag: `h6`, className: `account-h6 account-font-bold account-primary-color1 warning-message-title`, text: title }),
         React.createElement(Text, { className: `account-p account-p2 account-font-regular account-primary-color1 confirm-delete-address-text`, text: description }),
         React.createElement("div", { className: `cancel-remove-wrap ${!isDelete ? 'mobile-margin' : ''}` }, isDelete ? (React.createElement(React.Fragment, null,
-            React.createElement(AccountButton, { text: `cancel`, onClick: closePopup, btnType: `green-large-text`, className: 'warning-message-popup-close' }),
-            React.createElement(AccountButton, { text: `remove`, btnType: `full-width`, className: 'warning-message-popup-remove', onClick: () => {
+            React.createElement(AccountButton, { onClick: closePopup, btnType: `green-large-text`, text: `account.general_actions.cancel`, className: 'warning-message-popup-close' }),
+            React.createElement(AccountButton, { text: `account.general_actions.remove`, btnType: `full-width`, className: 'warning-message-popup-remove', onClick: () => {
                     onRemove();
                     closePopup();
                 } }))) : isThankYou ? (
@@ -19,11 +19,11 @@ const WarningMessageForPopup = React.memo(({ isDelete = false, isThankYou = fals
         // 	<AccountButton
         // 		onClick={closePopup}
         // 		btnType={`full-width`}
-        // 		text={`continueToShop`}
         // 		url={globalData?.menu_bar[0]?.slug}
         // 		className={'warning-message-popup-continue'}
+        // 		text={`account.general_actions.continueToShop`}
         // 	/>
         // ) : null
-        React.createElement("div", null, "Global Data")) : (React.createElement(AccountButton, { text: `done`, onClick: closePopup, btnType: `full-width`, className: 'warning-message-popup-done' })))));
+        React.createElement("div", null, "Global Data")) : (React.createElement(AccountButton, { onClick: closePopup, btnType: `full-width`, text: `account.general_actions.done`, className: 'warning-message-popup-done' })))));
 });
 export default WarningMessageForPopup;

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,24 +4,24 @@ 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: 'account.balance_promotions.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'),
-                ' ',
+                translate('account.balance_promotions.balanceNextStatusDescription1'),
+                "\u00A0",
                 React.createElement(Text, { className: 'account-font-medium next-status-value', tag: 'span' },
                     typeof nextStatusValue == 'number' ? handlePriceCheckFunc(nextStatusValue, '').trim() : nextStatusValue,
                     iconValue || null),
-                ' ',
-                translate('balanceNextStatusDescription2'),
-                ' ',
-                React.createElement(Text, { className: 'account-secondary-color9 account-font-medium next-status-title', tag: 'span' }, nextStatusTitle)))) : null));
+                "\u00A0",
+                translate('account.balance_promotions.balanceNextStatusDescription2'),
+                "\u00A0",
+                React.createElement(Text, { tag: 'span', className: 'account-secondary-color9 account-font-medium next-status-title', text: `account.user_status.${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 = ['account.balance_promotions.balanceCashback', 'account.balance_promotions.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-p account-p3 first-letter status-title', text: 'account.balance_promotions.balanceStatus' }),
+                    React.createElement(Text, { className: 'account-primary-color1 account-font-medium account-h5 first-letter text-title', text: `account.user_status.${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;