@weareconceptstudio/account 0.2.7 → 0.2.8

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

@@ -3,6 +3,6 @@ declare function FreeShippingComp({ fakeShippingCost, freeShippingRange, shippin
     fakeShippingCost: any;
     freeShippingRange: any;
     shippingCost: any;
-    currency?: string;
+    currency: any;
 }): React.JSX.Element;
 import React from 'react';

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

@@ -3,7 +3,7 @@ import { useTranslation } from '@weareconceptstudio/core';
 import { handlePriceCheckFunc } from '../../../utils/_functions';
 //* Style
 import FreeShippingCompStyle from './style';
-const FreeShippingComp = ({ fakeShippingCost, freeShippingRange, shippingCost, currency = 'AMD' }) => {
+const FreeShippingComp = ({ fakeShippingCost, freeShippingRange, shippingCost, currency }) => {
     const { translate } = useTranslation();
     return freeShippingRange ? (React.createElement(FreeShippingCompStyle, null,
         React.createElement("svg", { fill: 'none', viewBox: '0 0 24 24', xmlns: 'http://www.w3.org/2000/svg', className: 'free-shipping-comp-icon' },
@@ -15,8 +15,9 @@ const FreeShippingComp = ({ fakeShippingCost, freeShippingRange, shippingCost, c
         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('youHaveReachedFreeShipping1')),
-            React.createElement("span", { className: 'range-value' }, handlePriceCheckFunc(fakeShippingCost, currency)),
-            React.createElement("span", null, translate('youHaveReachedFreeShipping2'))))) : null;
+            React.createElement("span", null, translate('youHaveReachedFreeShipping')),
+            React.createElement("span", { className: 'range-value' },
+                handlePriceCheckFunc(fakeShippingCost, currency),
+                "!")))) : null;
 };
 export default FreeShippingComp;

package/dist/components/TotalCheckout/index.js

@@ -13,7 +13,7 @@ import TotalCheckoutStyle from './style';
 import SkeletonTotalCheckout from './Skeleton';
 // TODO: Shipping Coast
 const fakeShippingCost = 5000;
-const TotalCheckout = memo(({ isShipping, children, confirmation, buttonProps, itemsCount, subtotal, total, shippingCost, fillCheckoutData, checkoutData, isCheckout = false, loading, freeShippingRange, isPromoCode }) => {
+const TotalCheckout = memo(({ isShipping, children, confirmation, buttonProps, itemsCount, subtotal, total, shippingCost, fillCheckoutData, checkoutData, isCheckout = false, loading, freeShippingRange }) => {
     const { currency, useUser } = useAccountContext();
     const { user } = useUser();
     const savedCards = useMemo(() => {
@@ -54,8 +54,8 @@ const TotalCheckout = memo(({ isShipping, children, confirmation, buttonProps, i
                 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-currnecy2`, text: itemsCount ? handlePriceCheckFunc(total, currency) : `0 ${currency}` })),
-                React.createElement(FreeShippingComp, { shippingCost: shippingCost, fakeShippingCost: fakeShippingCost, freeShippingRange: freeShippingRange }),
-                React.createElement(PromoCodeComp, { isPromoCode: true }),
+                React.createElement(FreeShippingComp, { currency: currency, shippingCost: shippingCost, fakeShippingCost: fakeShippingCost, freeShippingRange: freeShippingRange }),
+                React.createElement(PromoCodeComp, null),
                 isCheckout && typeof isShipping === 'boolean' && !isShipping ? (React.createElement(React.Fragment, null,
                     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(Radio.Group, { value: checkoutData.paymentType, onChange: (val) => fillCheckoutData('paymentType', val), options: [

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

@@ -0,0 +1,12 @@
+export default ProgressComponent;
+declare function ProgressComponent({ round, value, maxValue, size, gapSize, strokeWidth, className, percent }: {
+    round: any;
+    value?: number;
+    maxValue?: number;
+    size: any;
+    gapSize: any;
+    strokeWidth: any;
+    className: any;
+    percent: any;
+}): React.JSX.Element;
+import React from 'react';

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

@@ -0,0 +1,45 @@
+import React, { useEffect, useState } from 'react';
+//* Styles
+import ProgressComponentStyle from './style';
+import { useUi } from '@weareconceptstudio/core';
+const ProgressComponent = ({ round, value = 50, maxValue = 100, size, gapSize, strokeWidth, className, percent }) => {
+    const { winWidth } = useUi();
+    const [styleElement, setStyleElement] = useState(null);
+    const [progressAnimation, setProgressAnimation] = useState(0);
+    function getValue(value) {
+        if (typeof value !== 'number' && styleElement) {
+            const computedStyle = getComputedStyle(styleElement);
+            const tempValue = computedStyle.getPropertyValue(value).trim();
+            styleElement.style.setProperty('width', tempValue);
+            styleElement.style.width = tempValue;
+            const resolvedValue = getComputedStyle(styleElement).width;
+            styleElement.style.removeProperty('width');
+            return parseInt(resolvedValue.match(/\d+/)[0], 10);
+        }
+        else {
+            return parseInt(value, 10);
+        }
+    }
+    const sizeNumber = getValue(size || '--sizeProgress');
+    const strokeWidthNumber = getValue(strokeWidth || '--strokeWidth');
+    const gapSizeValue = getValue(gapSize || '--gapDistance');
+    const radius = (sizeNumber - strokeWidthNumber) / 2;
+    const circumference = 2 * Math.PI * radius;
+    const progress = progressAnimation;
+    // const progress = percent ? percent : (value / maxValue) * 100;
+    const filledLength = (progress / 100) * circumference;
+    useEffect(() => {
+        setTimeout(() => {
+            setProgressAnimation(percent ? percent : (value / maxValue) * 100);
+        }, 10);
+    }, []);
+    return (React.createElement(ProgressComponentStyle, { ref: (element) => setStyleElement(element) }, sizeNumber ? (React.createElement("div", { className: `${className || ' '} progress-wrapper`, style: { position: 'relative', width: `${size}`, height: `${size}` } },
+        React.createElement("svg", { width: sizeNumber, height: sizeNumber, viewBox: `0 0 ${sizeNumber} ${sizeNumber}`, style: { transform: 'rotate(-90deg)' } },
+            React.createElement("circle", { cx: sizeNumber / 2, cy: sizeNumber / 2, r: radius, stroke: '#E9ECEE', strokeWidth: strokeWidthNumber, fill: 'none', strokeDasharray: `${circumference - filledLength - gapSizeValue * 2} ${filledLength + gapSizeValue}`, strokeDashoffset: circumference - filledLength - gapSizeValue * 2, strokeLinecap: round ? 'round' : 'none' }),
+            React.createElement("circle", { cx: sizeNumber / 2, cy: sizeNumber / 2, r: radius, stroke: 'url(#gradient)', strokeWidth: strokeWidthNumber, fill: 'none', strokeDasharray: `${filledLength} ${circumference - filledLength}`, strokeDashoffset: 0, strokeLinecap: round ? 'round' : 'none' }),
+            React.createElement("defs", null,
+                React.createElement("linearGradient", { id: 'gradient', x1: '1', y1: '0', x2: '0', y2: '1' },
+                    React.createElement("stop", { offset: '0%', stopColor: '#a000ff' }),
+                    React.createElement("stop", { offset: '100%', stopColor: '#ff007a' })))))) : null));
+};
+export default ProgressComponent;

package/dist/modules/account/AccountBalanceTemplate/HeroBalance/ProgressBalance/ProgressComponent/style.d.ts

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

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

@@ -0,0 +1,54 @@
+import styled from 'styled-components';
+const ProgressComponentStyle = styled.div `
+	/* --sizeProgress: var(--sp67x); */
+
+	--sizeProgress: 100%;
+	--strokeWidth: calc(var(--sizeProgress) * 4 / 100);
+	--gapDistance: calc(var(--sizeProgress) * 6 / 100);
+
+	.progress-wrapper {
+		height: fit-content;
+		display: flex;
+		align-items: flex-start;
+	}
+
+	svg {
+		max-width: 100%;
+	}
+
+	/* //! 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); */
+	}
+
+	/* //! 1510 */
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeLMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeM}) {
+		/* --sizeProgress: var(--sp51x); */
+	}
+
+	/* //! 1440 */
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeMMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeS}) {
+		/* --sizeProgress: var(--sp37x); */
+	}
+
+	/* //! 1280 */
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeSMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXS}) {
+		/* --sizeProgress: var(--sp34x); */
+	}
+
+	/* //! 1024 */
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXSMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_TabletSize}) {
+		/* --sizeProgress: var(--sp35x); */
+	}
+
+	/* //! 768 */
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeS}) {
+		/* --sizeProgress: var(--sp35x); */
+	}
+
+	/* //! mobile */
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeSMin}) {
+		/* --sizeProgress: var(--sp46x); */
+	}
+`;
+export default ProgressComponentStyle;

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

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

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

@@ -0,0 +1,27 @@
+import React, { useRef } from 'react';
+// //* Styles
+import ProgressBalanceStyle from './style';
+import ProgressComponent from './ProgressComponent';
+import { Icon, Text, useTranslation } from '@weareconceptstudio/core';
+import { handlePriceCheckFunc } from '../../../../../utils/_functions';
+const ProgressBalance = ({ progress, balance, nextStatusValue, nextStatusTitle, iconValue }) => {
+    const { translate } = useTranslation();
+    return (React.createElement(ProgressBalanceStyle, null,
+        React.createElement("div", { className: 'wrapper-progress-inner-info' },
+            React.createElement(ProgressComponent, { className: 'circular-progress', percent: progress, 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),
+        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'),
+                ' ',
+                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));
+};
+export default ProgressBalance;

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

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

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

@@ -0,0 +1,83 @@
+import styled from 'styled-components';
+const ProgressBalanceStyle = styled.div `
+	--account_next_status_padLR: var(--sp13x);
+	/* --sizeProgress: var(--sp67x); */
+	--sizeProgress: 100%;
+	--account_distance_progress: var(--sp4x);
+
+	display: flex;
+	flex-direction: column;
+	max-width: var(--sizeProgress);
+	gap: var(--account_distance_progress);
+
+	.wrapper-progress-inner-info {
+		position: relative;
+		width: 100%;
+	}
+
+	.wrapper-progress-text {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		position: absolute;
+		width: var(--sizeProgress);
+		height: var(--sizeProgress);
+		top: 0;
+		padding: calc(var(--sizeProgress) * 4 / 100);
+	}
+
+	.wrapper-next-status {
+		padding: 0 var(--account_next_status_padLR);
+	}
+
+	/* //! 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); */
+		--account_next_status_padLR: var(--sp9x);
+		--account_distance_progress: var(--sp3x);
+	}
+
+	/* //! 1510 */
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeLMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeM}) {
+		/* --sizeProgress: var(--sp51x); */
+		--account_next_status_padLR: var(--sp4x);
+		--account_distance_progress: var(--sp3x);
+	}
+
+	/* //! 1440 */
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeMMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeS}) {
+		/* --sizeProgress: var(--sp37x); */
+		--account_next_status_padLR: calc(var(--sp4x) - var(--sp0-5x) / 2);
+		--account_distance_progress: var(--sp3x);
+	}
+
+	/* //! 1280 */
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeSMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXS}) {
+		/* --sizeProgress: var(--sp34x); */
+		--account_next_status_padLR: var(--sp3x);
+		--account_distance_progress: var(--sp3x);
+	}
+
+	/* //! 1024 */
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXSMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_TabletSize}) {
+		/* --sizeProgress: var(--sp35x); */
+		--account_next_status_padLR: var(--sp3x);
+		--account_distance_progress: var(--sp2-5x);
+	}
+
+	/* //! 768 */
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeS}) {
+		/* --sizeProgress: var(--sp35x); */
+		--account_next_status_padLR: var(--sp3x);
+		--account_distance_progress: var(--sp2-5x);
+	}
+
+	/* //! mobile */
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeSMin}) {
+		/* --sizeProgress: var(--sp46x); */
+		--account_next_status_padLR: 0px;
+		--account_distance_progress: var(--sp3x);
+	}
+`;
+export default ProgressBalanceStyle;

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

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

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

@@ -0,0 +1,35 @@
+import React from 'react';
+import { Text, useTranslation } from '@weareconceptstudio/core';
+//* Styles
+import HeroBalanceStyle from './style';
+//* Helpers
+import { handlePriceCheckFunc } from '../../../../utils/_functions';
+//* Component
+import ProgressBalance from './ProgressBalance';
+const HeroBalance = ({ iconValue, balance, cashback, progress, totalSpent, nextStatusValue, description, title, nextStatusTitle }) => {
+    const { translate } = useTranslation();
+    const dataInformation = [cashback, totalSpent, balance];
+    const dataInformationTitle = ['balanceCashback', 'balanceTotalSpent', 'specialNameBalance'];
+    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),
+                    description && (React.createElement(Text, { className: 'account-primary-color1  account-p account-p2 first-letter description-status' },
+                        description.description1,
+                        " ",
+                        cashback + '%',
+                        " ",
+                        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("div", { className: 'empty' }),
+            React.createElement(ProgressBalance, { iconValue: iconValue, balance: balance, progress: progress, nextStatusValue: nextStatusValue, nextStatusTitle: nextStatusTitle }))));
+};
+export default HeroBalance;

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

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

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

@@ -0,0 +1,118 @@
+import styled from 'styled-components';
+const HeroBalanceStyle = styled.section `
+	--account_distance_balance: var(--sp2x);
+	--account_title_distance_bottom: var(--sp3x);
+	--account_description_distance_T: var(--sp3x);
+	--account_description_distance_B: var(--sp4x);
+	--account_distance_leftRightBar: var(--sp30x);
+	--account_hero_section_distance: var(--sp6x);
+
+	margin-bottom: var(--account_hero_section_distance);
+
+	.status-title {
+		margin-bottom: var(--account_title_distance_bottom);
+	}
+
+	.description-status {
+		margin-top: var(--account_description_distance_T);
+		margin-bottom: var(--account_description_distance_B);
+	}
+
+	.inner-wrapper {
+		display: grid;
+		grid-template-columns: 4fr 1fr 3fr;
+	}
+
+	.left-bar-account-balance {
+		.wrapper-information-payment {
+			display: flex;
+			flex-direction: column;
+			gap: var(--account_distance_balance);
+		}
+	}
+
+	/* //! 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_distance_balance: var(--sp1x);
+		--account_title_distance_bottom: var(--sp2x);
+		--account_description_distance_T: var(--sp2x);
+		--account_description_distance_B: var(--sp3x);
+		--account_distance_leftRightBar: var(--sp24x);
+		--account_hero_section_distance: var(--sp10x);
+	}
+
+	/* //! 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_distance_balance: var(--sp1x);
+		--account_title_distance_bottom: var(--sp2x);
+		--account_description_distance_T: var(--sp2x);
+		--account_description_distance_B: var(--sp3x);
+		--account_distance_leftRightBar: var(--sp18x);
+		--account_hero_section_distance: var(--sp8x);
+	}
+
+	/* //! 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_distance_balance: var(--sp1x);
+		--account_title_distance_bottom: var(--sp2x);
+		--account_description_distance_T: var(--sp2x);
+		--account_description_distance_B: var(--sp2x);
+		--account_distance_leftRightBar: var(--sp18x);
+		--account_hero_section_distance: var(--sp7x);
+	}
+
+	/* //! 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_distance_balance: var(--sp1x);
+		--account_title_distance_bottom: var(--sp1x);
+		--account_description_distance_T: var(--sp1x);
+		--account_description_distance_B: var(--sp2x);
+		--account_distance_leftRightBar: var(--sp15x);
+		--account_hero_section_distance: var(--sp5x);
+	}
+
+	/* //! 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_distance_balance: var(--sp1x);
+		--account_title_distance_bottom: var(--sp1x);
+		--account_description_distance_T: var(--sp1x);
+		--account_description_distance_B: var(--sp2x);
+		--account_distance_leftRightBar: var(--sp5x);
+		--account_hero_section_distance: var(--sp3x);
+	}
+
+	/* //! 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_distance_balance: var(--sp1x);
+		--account_title_distance_bottom: var(--sp1x);
+		--account_description_distance_T: var(--sp1x);
+		--account_description_distance_B: var(--sp2x);
+		--account_distance_leftRightBar: var(--sp5x);
+		--account_hero_section_distance: var(--sp3x);
+
+		.inner-wrapper {
+			grid-template-columns: 6.5fr 0.5fr 5fr;
+		}
+	}
+
+	/* //! mobile */
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeSMin}) {
+		--account_distance_balance: var(--sp1x);
+		--account_title_distance_bottom: var(--sp1x);
+		--account_description_distance_T: var(--sp1x);
+		--account_description_distance_B: var(--sp2x);
+		--account_distance_leftRightBar: var(--sp4x);
+		--account_hero_section_distance: var(--sp5x);
+
+		.inner-wrapper {
+			.empty {
+				display: none;
+			}
+
+			grid-template-rows: repeat(2, auto);
+			grid-template-columns: auto;
+			gap: var(--sp4x);
+		}
+	}
+`;
+export default HeroBalanceStyle;

package/dist/modules/account/AccountBalanceTemplate/HistoryBalance/ItemHistory/index.d.ts

@@ -0,0 +1,8 @@
+export default ItemHistory;
+declare function ItemHistory({ date, activity, value, action_type }: {
+    date: any;
+    activity: any;
+    value: any;
+    action_type: any;
+}): React.JSX.Element;
+import React from 'react';

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

@@ -0,0 +1,42 @@
+import React, { useEffect, useRef } from 'react';
+import { Text, useTranslation } from '@weareconceptstudio/core';
+//* Styles
+import ItemHistoryStyle from './style';
+const ItemHistory = ({ date, activity, value, action_type }) => {
+    const { translate } = useTranslation();
+    //! Refs
+    const titleWrapperRef = useRef();
+    const getSizeItem = useRef();
+    const innerWrapperRef = useRef();
+    useEffect(() => {
+        titleWrapperRef.current = document.getElementById('history-category-title');
+        if (titleWrapperRef.current && innerWrapperRef.current) {
+            getSizeItem.current = [...titleWrapperRef.current.children].map((item) => item.getBoundingClientRect().left);
+            getSizeItem.current = getSizeItem.current.slice(1).map((item, i) => {
+                return item - getSizeItem.current[i];
+            });
+            getSizeItem.current.pop();
+            [...innerWrapperRef.current.children].forEach((item, i) => {
+                if (getSizeItem.current[i]) {
+                    item.style.width = getSizeItem.current[i] + 'px';
+                }
+            });
+        }
+    }, []);
+    return (React.createElement(ItemHistoryStyle, null,
+        React.createElement("div", { className: 'inner-wrapper-info', ref: innerWrapperRef },
+            React.createElement(Text, { className: 'account-primary-color1 account-font-medium account-p account-p1 date-info-text' },
+                React.createElement(Text, { className: 'account-primary-color1 account-font-medium account-p1 mobile-date-info-text first-letter', tag: 'span' },
+                    translate('balanceCategoryDate'),
+                    ":"),
+                ' ',
+                date),
+            React.createElement("div", { className: 'wrapper-activity-text' },
+                React.createElement(Text, { className: 'account-primary-color1 account-font-medium account-p account-p1 activity-info-text' }, activity)),
+            React.createElement(Text, { className: `account-primary-color1 account-font-medium account-p account-p1 amount-info-text ${action_type}` },
+                React.createElement(Text, { className: 'account-primary-color1 account-font-medium account-p1 mobile-amount-info-text first-letter', tag: 'span' }, translate('balanceCategoryAmount')),
+                ' ',
+                value)),
+        React.createElement("div", { className: 'line-info' })));
+};
+export default ItemHistory;

package/dist/modules/account/AccountBalanceTemplate/HistoryBalance/ItemHistory/style.d.ts

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