@weareconceptstudio/account 0.6.4 → 0.6.6

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

@@ -1,17 +1,16 @@
 import React from 'react';
-import { CollapseContainer, CollapseItem, Text } from '@weareconceptstudio/core';
+import { CollapseItem, Text } from '@weareconceptstudio/core';
 import { Input } from '@weareconceptstudio/form';
 import { useCart } from '../../../modules';
 import CommentCompStyle from './style';
 const CommentComp = ({ isShipping }) => {
     const { fillCheckoutData, isCheckoutPage } = useCart();
     return isCheckoutPage && typeof isShipping === 'boolean' && !isShipping ? (React.createElement(CommentCompStyle, { className: 'collapse-distance' },
-        React.createElement(CollapseContainer, null,
-            React.createElement(CollapseItem, { status: 'open', title: React.createElement(React.Fragment, null,
-                    React.createElement("div", { className: 'inner-wrapper-icon' },
-                        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: '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` }) })))) : null;
+        React.createElement(CollapseItem, { status: 'open', title: React.createElement(React.Fragment, null,
+                React.createElement("div", { className: 'inner-wrapper-icon' },
+                    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: '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` }) }))) : null;
 };
 export default CommentComp;

package/dist/components/TotalCheckout/index.js

@@ -39,10 +39,10 @@ const TotalCheckout = memo(({ isShipping, children, confirmation, buttonProps })
                                 React.createElement(Text, { className: `account-p account-p2 account-font-bold account-primary-color1 sticky-wrap-currency2`, text: itemsCount ? handlePriceCheckFunc(total, currency) : `0 ${currency}` })),
                             React.createElement(GiftComp, null),
                             React.createElement(FreeShippingComp, null),
-                            React.createElement(CollapseContainer, { className: 'collapse-container-wrapper' },
+                            React.createElement(CollapseContainer, { className: 'collapse-container-wrapper', multiple: true },
                                 React.createElement(PromoCodeComp, null),
-                                React.createElement(BalanceComp, null)),
-                            React.createElement(CommentComp, { isShipping: isShipping }))),
+                                React.createElement(BalanceComp, null),
+                                React.createElement(CommentComp, { isShipping: isShipping })))),
                     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/modules/account/AccountBalanceTemplate/BalanceContext.d.ts

@@ -0,0 +1,5 @@
+export function BalanceProvider({ children }: {
+    children: any;
+}): React.JSX.Element;
+export function useBalance(): any;
+import React from 'react';

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

@@ -0,0 +1,68 @@
+import React, { createContext, useContext, useReducer, useEffect } from 'react';
+import { api, useTranslation } from '@weareconceptstudio/core';
+const BalanceContext = createContext(null);
+export function BalanceProvider({ children }) {
+    const { selectedLang } = useTranslation();
+    const [data, dispatch] = useReducer(balanceReducer, initialBalance);
+    const getBalanceData = async () => {
+        await api.get({ url: `balance`, lang: selectedLang }).then((res) => {
+            dispatch({
+                type: 'fillBalanceData',
+                data: res,
+            });
+        });
+    };
+    const getBalanceHistory = async (page) => {
+        await api.get({ url: 'balance-history', params: { page }, lang: selectedLang }).then((res) => {
+            dispatch({
+                type: 'fillBalanceHistory',
+                data: res.histories,
+                pagination: res.pagination,
+            });
+        });
+    };
+    const redeemVoucher = async (code) => {
+        return await api.post('redeem-voucher', { code }).then((res) => {
+            dispatch({
+                type: 'fillVoucher',
+                newBalance: res.newBalance,
+                newHistory: res.newHistory,
+            });
+        });
+    };
+    useEffect(() => {
+        getBalanceData();
+    }, []);
+    return React.createElement(BalanceContext.Provider, { value: { ...data, dispatch, getBalanceHistory, redeemVoucher } }, children);
+}
+export const useBalance = () => {
+    return useContext(BalanceContext);
+};
+function balanceReducer(state, action) {
+    switch (action.type) {
+        case 'fillBalanceData': {
+            return action.data;
+        }
+        case 'fillBalanceHistory':
+            return { ...state, histories: action.data, pagination: action.pagination };
+        case 'fillVoucher':
+            return {
+                ...state,
+                balance: {
+                    ...state.balance,
+                    balance: action.newBalance,
+                },
+                histories: state.pagination.currentPage == 1 ? [action.newHistory, ...state.histories] : state.histories,
+            };
+        default:
+            return state;
+    }
+}
+const initialBalance = {
+    balance: null,
+    histories: [],
+    pagination: {
+        total: 0,
+        pageSize: 0,
+    },
+};

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

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

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

@@ -1,21 +1,42 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { handlePriceCheckFunc, Text, useTranslation } from '@weareconceptstudio/core';
+import { useBalance } from '../BalanceContext';
 //* Styles
 import HeroBalanceStyle from './style';
 //* Component
 import ProgressBalance from './ProgressBalance';
-const HeroBalance = ({ iconValue, balance, cashback, progress, totalSpent, nextStatusValue, description, title, nextStatusTitle, currency }) => {
+const HeroBalance = ({ iconValue, currency, balanceStatuses }) => {
     const { translate } = useTranslation();
-    const dataInformation = [cashback, totalSpent, balance];
+    const data = useBalance()?.balance;
+    const newData = useMemo(() => {
+        return data
+            ? {
+                ...data,
+                progress: data.info.timeline,
+                totalSpent: data.info.spent.current,
+                nextStatusValue: data.info.spent.next,
+                dataInformation: [data.cashback, data.info.spent.current, data.balance],
+            }
+            : null;
+    }, [data]);
     const dataInformationTitle = ['account.balance_promotions.balanceCashback', 'account.balance_promotions.balanceTotalSpent', 'balance'];
-    return (React.createElement(HeroBalanceStyle, { className: 'account-hero-balance' },
+    const nextStatusTitle = useMemo(() => {
+        const index = balanceStatuses?.findIndex((item) => item.name?.toLowerCase() === data?.info?.status?.toLowerCase());
+        const nextItem = balanceStatuses[index + 1] ?? balanceStatuses[index];
+        return nextItem?.name;
+    }, [data, balanceStatuses]);
+    const description = useMemo(() => {
+        const desc = balanceStatuses?.find((item) => item.name?.toLowerCase() === data?.info?.status?.toLowerCase());
+        return desc;
+    }, [data, balanceStatuses]);
+    return newData ? (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: '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' }, translate(description.description, { cashback: cashback })),
-                    React.createElement("div", { className: 'wrapper-information-payment' }, dataInformation.map((item, i, arr) => {
+                    React.createElement(Text, { className: 'account-primary-color1 account-font-medium account-h5 first-letter text-title', text: `account.user_status.${data.info.status.toLowerCase()}` }),
+                    description && React.createElement(Text, { className: 'account-primary-color1 account-p account-p2 first-letter description-status' }, translate(description.description, { cashback: newData.cashback })),
+                    React.createElement("div", { className: 'wrapper-information-payment' }, newData.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]),
                             ":",
@@ -23,6 +44,6 @@ const HeroBalance = ({ iconValue, balance, cashback, progress, totalSpent, nextS
                             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, { balance: balance, progress: progress, currency: currency, iconValue: iconValue, nextStatusValue: nextStatusValue, nextStatusTitle: nextStatusTitle }))));
+            React.createElement(ProgressBalance, { ...newData, nextStatusTitle: nextStatusTitle, currency: currency, iconValue: iconValue })))) : null;
 };
 export default HeroBalance;

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

@@ -1,5 +1,6 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { api, Link, Text, useTranslation } from '@weareconceptstudio/core';
+import React, { useRef } from 'react';
+import { Link, Text, useTranslation } from '@weareconceptstudio/core';
+import { useBalance } from '../BalanceContext';
 //* Styles
 import HistoryBalanceStyle from './style';
 //* Component
@@ -7,27 +8,11 @@ import ItemHistory from './ItemHistory';
 import { Pagination } from '../../../../components';
 const dataCategoryName = ['account.balance_promotions.balanceCategoryDate', 'account.balance_promotions.balanceCategoryActivity', 'account.balance_promotions.balanceCategoryAmount'];
 const HistoryBalance = ({ linkEarnPage }) => {
-    const { translate, selectedLang } = useTranslation();
     //! Ref
     const containerRef = useRef();
-    const [currentPage, setCurrentPage] = useState(1);
-    const [pagination, setPagination] = useState({
-        total: 0,
-        pageSize: 0,
-    });
-    const [data, setData] = useState();
-    const [loading, setLoading] = useState(true);
-    const getHistory = useCallback((page) => {
-        api.get({ url: 'balance-history', params: { page }, lang: selectedLang }).then((res) => {
-            setData(res.histories);
-            setPagination(res.pagination);
-            setLoading(false);
-        });
-    }, []);
-    useEffect(() => {
-        getHistory(currentPage);
-    }, [currentPage]);
-    return data?.length > 0 ? (React.createElement(HistoryBalanceStyle, { ref: containerRef },
+    const { translate } = useTranslation();
+    const { histories, getBalanceHistory, pagination } = useBalance();
+    return histories.length ? (React.createElement(HistoryBalanceStyle, { ref: containerRef },
         React.createElement("div", { className: 'wrapper-title-section-history' },
             React.createElement("div", { className: 'wrapper-history-link' },
                 React.createElement(Text, { className: 'account-primary-color1 account-font-medium account-p account-p1 first-letter title-section-history', text: 'account.balance_promotions.balanceRecentActivity' }),
@@ -40,8 +25,7 @@ const HistoryBalance = ({ linkEarnPage }) => {
             })),
             React.createElement("div", { className: 'wrapper-history-content' },
                 React.createElement("div", { className: 'line-info first-line' }),
-                data &&
-                    data.map((item, i) => (React.createElement(ItemHistory, { key: i, ...item }))),
-                React.createElement(Pagination, { parentElement: containerRef.current, activePageState: currentPage, ...pagination, onChange: (page) => setCurrentPage(page) }))))) : null;
+                histories.map((item, i) => (React.createElement(ItemHistory, { key: i, ...item }))),
+                React.createElement(Pagination, { parentElement: containerRef.current, activePageState: pagination.currentPage, ...pagination, onChange: (page) => getBalanceHistory(page) }))))) : null;
 };
 export default HistoryBalance;

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

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

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

@@ -1,11 +1,16 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { Text, useResizeObserver, useUi } from '@weareconceptstudio/core';
 //* Styles
 import StatusBalanceStyle from './style';
 //* Component
 import ItemStatus from './ItemStatus';
-const StatusBalance = ({ allItem, activeStatus, currency }) => {
+import { useBalance } from '../BalanceContext';
+const StatusBalance = ({ balanceStatuses, currency }) => {
     const { winWidth } = useUi();
+    const data = useBalance();
+    const activeStatus = useMemo(() => {
+        return data.balance ? data.balance.info.status : null;
+    }, [data]);
     //! Refs
     const wrapperStatusRef = useRef();
     const statusActiveItem = useRef(false);
@@ -32,8 +37,8 @@ const StatusBalance = ({ allItem, activeStatus, currency }) => {
                 contentRef.current.style.width = differences.length * 351 + 'px';
             }
         }
-        if (allItem.length) {
-            statusActiveItem.current = allItem.findIndex((item) => item.name?.toLowerCase() === activeStatus?.toLowerCase());
+        if (balanceStatuses.length) {
+            statusActiveItem.current = balanceStatuses.findIndex((item) => item.name?.toLowerCase() === activeStatus?.toLowerCase());
         }
     }, [resizes, winWidth]);
     return (React.createElement(StatusBalanceStyle, { ref: styleRef, className: 'account-progress-status-wrapper' },
@@ -42,15 +47,15 @@ const StatusBalance = ({ allItem, activeStatus, currency }) => {
             React.createElement("div", { className: 'line-title' })),
         React.createElement("div", { ref: outsideContentRef, className: 'outside-wrapper-content' },
             React.createElement("div", { ref: contentRef, className: 'content-wrapper' },
-                React.createElement("div", { ref: wrapperStatusRef, className: 'wrapper-status' }, allItem.length &&
+                React.createElement("div", { ref: wrapperStatusRef, className: 'wrapper-status' }, balanceStatuses.length &&
                     statusActiveItem.current !== false &&
-                    allItem.map((item, i, arr) => {
+                    balanceStatuses.map((item, i, arr) => {
                         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 &&
+                React.createElement("div", { className: 'wrapper-line-all' }, balanceStatuses.length &&
                     statusActiveItem.current !== false &&
                     sizeLine &&
-                    allItem.map((_, i, arr) => {
+                    balanceStatuses.map((_, i, arr) => {
                         return (i < arr.length - 1 && (React.createElement("div", { key: i, className: `line`, style: { width: sizeLine[i] + 'px' } },
                             React.createElement("div", { className: `inner-line-background  ${i < statusActiveItem.current ? 'active-status' : ''}` }))));
                     }))))));

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

@@ -0,0 +1,3 @@
+export default Voucher;
+declare function Voucher(): React.JSX.Element;
+import React from 'react';

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

@@ -0,0 +1,37 @@
+import React, { useRef, useCallback } from 'react';
+import { useBalance } from '../BalanceContext';
+//* Components
+import { Form, Input } from '@weareconceptstudio/form';
+import { Text, useUi } from '@weareconceptstudio/core';
+import { AccountButton, WarningMessageForPopup } from '../../../../components';
+//* Style
+import VoucherStyle from './style';
+const Voucher = () => {
+    const { openPopup } = useUi();
+    const formRef = useRef();
+    const { redeemVoucher } = useBalance();
+    //! Handle Popup
+    const handleSuccessPopup = useCallback(() => {
+        openPopup(React.createElement(WarningMessageForPopup, { title: 'account.balance_promotions.voucher.redeemedTitle', description: 'account.balance_promotions.voucher.redeemedDescription' }), {
+            className: 'messagePopup',
+            accountIcon: true,
+        });
+    }, []);
+    const onSubmit = async (values) => {
+        return await redeemVoucher(values.code).then(() => {
+            formRef.current.reset();
+            handleSuccessPopup();
+        });
+    };
+    return (React.createElement(VoucherStyle, null,
+        React.createElement("div", { className: 'wrapper-title-section' },
+            React.createElement(Text, { className: 'account-primary-color1 account-font-medium account-p account-p1 first-letter status-title-section-progress', text: 'account.balance_promotions.voucher.title' }),
+            React.createElement("div", { className: 'line-title' })),
+        React.createElement(Text, { className: 'account-primary-color1 account-p account-p4', text: 'account.balance_promotions.voucher.description' }),
+        React.createElement("div", { className: 'voucher-form-container' },
+            React.createElement(Form, { ref: formRef, onSubmit: onSubmit, mode: 'onSubmit', className: 'voucher-form' },
+                React.createElement(Form.Item, { name: 'code', errorKey: 'account.balance_promotions.voucher.code' },
+                    React.createElement(Input, { placeholder: 'account.balance_promotions.voucher.inputPlaceholder' })),
+                React.createElement(AccountButton, { type: 'submit', className: 'outline', text: 'account.general_actions.redeem' })))));
+};
+export default Voucher;

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

@@ -0,0 +1,2 @@
+export default VoucherStyle;
+declare const VoucherStyle: 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/Voucher/style.js

@@ -0,0 +1,68 @@
+import styled from 'styled-components';
+const VoucherStyle = styled.div `
+	--account_distance_section_voucher: var(--sp6x);
+	--account_distance_line_marginTB: var(--sp4x) 0;
+	--account_voucherInputPadTB: var(--sp2x);
+	--account_voucherInputPadLR: var(--sp2x);
+
+	--account_voucherButtonPadTB: var(--sp2x);
+	--account_voucherButtonPadLR: var(--sp7x);
+
+	margin-bottom: var(--account_distance_section_voucher);
+
+	.wrapper-title-section {
+		.line-title {
+			width: 100%;
+			height: 2px;
+			background-color: var(--account_primaryColor1);
+			margin: var(--account_distance_line_marginTB);
+		}
+	}
+
+	.voucher-form-container {
+		width: 50%;
+		margin-top: var(--sp2x);
+
+		.voucher-form {
+			display: flex;
+			gap: var(--sp2x);
+			justify-content: space-between;
+
+			.form-item {
+				flex: 1;
+
+				.base-input {
+					padding: var(--account_voucherInputPadTB) var(--account_voucherInputPadLR) !important;
+					font-size: var(--account_p3) !important;
+					line-height: var(--account_lineHeight) !important;
+				}
+			}
+
+			.btn-wrap {
+				width: fit-content !important;
+				height: fit-content !important;
+
+				button {
+					padding: var(--account_voucherButtonPadTB) var(--account_voucherButtonPadLR);
+					font-size: var(--account_p3);
+				}
+			}
+		}
+	}
+
+	/* //! mobile */
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeSMin}) {
+		.voucher-form-container {
+			width: 100%;
+
+			.voucher-form {
+				flex-direction: column;
+
+				.btn-wrap {
+					width: 100% !important;
+				}
+			}
+		}
+	}
+`;
+export default VoucherStyle;

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

@@ -1,7 +1,7 @@
 export default AccountBalanceTemplate;
-declare function AccountBalanceTemplate({ iconValue, dataItem, linkEarnPage, className }: {
+declare function AccountBalanceTemplate({ iconValue, balanceStatuses, linkEarnPage, className }: {
     iconValue: any;
-    dataItem: any;
+    balanceStatuses: any;
     linkEarnPage: any;
     className: any;
 }): React.JSX.Element;

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

@@ -1,33 +1,20 @@
-import React, { useEffect, useState } from 'react';
-import { api, useTranslation } from '@weareconceptstudio/core';
+import React from 'react';
 import { useAccountContext } from '../../../AccountProvider';
+import { BalanceProvider } from './BalanceContext';
 //* Style
 import AccountBalanceTemplateStyle from './style';
 //* Component
 import HeroBalance from './HeroBalance';
 import HistoryBalance from './HistoryBalance';
 import StatusBalance from './StatusBalance';
-const AccountBalanceTemplate = ({ iconValue, dataItem, linkEarnPage, className }) => {
-    const { selectedLang } = useTranslation();
+import Voucher from './Voucher';
+const AccountBalanceTemplate = ({ iconValue, balanceStatuses, linkEarnPage, className }) => {
     const { currency } = useAccountContext();
-    //! State
-    const [dataBalance, setDataBalance] = useState(false);
-    useEffect(() => {
-        api.get({ url: `balance`, lang: selectedLang }).then((data) => {
-            setDataBalance(data);
-        });
-    }, []);
-    return dataBalance ? (React.createElement(AccountBalanceTemplateStyle, { className: className || '' },
-        React.createElement(HeroBalance, { currency: currency, iconValue: iconValue, nextStatusTitle: 'resident', balance: dataBalance.balance, cashback: dataBalance.cashback, progress: dataBalance.info.timeline, totalSpent: dataBalance.info.spent.current, title: dataBalance.info.status.toLowerCase(), nextStatusValue: dataBalance.info.spent.next, description: (() => {
-                if (dataItem) {
-                    const { description } = dataItem.find((item) => item.name?.toLowerCase() === dataBalance.info.status?.toLowerCase()) || {};
-                    return { description };
-                }
-                else {
-                    return false;
-                }
-            })() }),
-        React.createElement(StatusBalance, { allItem: dataItem, currency: currency, activeStatus: dataBalance.info.status }),
-        React.createElement(HistoryBalance, { linkEarnPage: linkEarnPage }))) : null;
+    return (React.createElement(BalanceProvider, null,
+        React.createElement(AccountBalanceTemplateStyle, { className: className || '' },
+            React.createElement(HeroBalance, { currency: currency, iconValue: iconValue, balanceStatuses: balanceStatuses }),
+            React.createElement(Voucher, null),
+            React.createElement(StatusBalance, { balanceStatuses: balanceStatuses, currency: currency }),
+            React.createElement(HistoryBalance, { linkEarnPage: linkEarnPage }))));
 };
 export default AccountBalanceTemplate;

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

@@ -11,7 +11,7 @@ const AccountInfo = ({ user, onAccountUpdate, displayFields = defaultDisplayFiel
     const [edit, setEdit] = useState(false);
     //! Handle Popup
     const handleSuccessPopup = useCallback(() => {
-        openPopup(React.createElement(WarningMessageForPopup, { title: 'account.order_balance.yourSettingsHaveBeenSaved', description: 'account.password_management.yourPasswordHaveBeenChanged' }), {
+        openPopup(React.createElement(WarningMessageForPopup, { title: 'account.account_info.yourSettingsHaveBeenSavedTitle', description: 'account.account_info.yourSettingsHaveBeenSavedDescription' }), {
             className: 'messagePopup',
             accountIcon: true,
         });

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

@@ -10,7 +10,7 @@ const AccountPassword = ({ formFields = defaultFormFields, onPasswordUpdate }) =
     const [edit, setEdit] = useState(false);
     //! Handle Popup
     const handleSuccessPopup = useCallback(() => {
-        openPopup(React.createElement(WarningMessageForPopup, { title: 'account.order_balance.yourSettingsHaveBeenSaved', description: 'account.password_management.yourPasswordHaveBeenChanged' }), {
+        openPopup(React.createElement(WarningMessageForPopup, { title: 'account.password_management.successfullyMessage', description: 'account.password_management.yourPasswordHaveBeenChanged' }), {
             className: 'messagePopup',
             accountIcon: true,
         });

package/dist/translations/en.d.ts

@@ -58,6 +58,8 @@ declare const _default: {
             emailPlaceholder: string;
             phone: string;
             phonePlaceholder: string;
+            yourSettingsHaveBeenSavedTitle: string;
+            yourSettingsHaveBeenSavedDescription: string;
         };
         cart_checkout: {
             editCart: string;
@@ -148,6 +150,7 @@ declare const _default: {
             restore: string;
             free: string;
             outOfStock: string;
+            redeem: string;
         };
         user_status: {
             tourist: string;
@@ -204,7 +207,6 @@ declare const _default: {
             item: string;
             price: string;
             total: string;
-            yourSettingsHaveBeenSaved: string;
             billedTo: string;
             confirmation: string;
             selectShippingAddress: string;
@@ -234,6 +236,14 @@ declare const _default: {
             balanceCategoryAmount: string;
             useYourMoney: string;
             muramoney: string;
+            voucher: {
+                title: string;
+                description: string;
+                redeemedTitle: string;
+                redeemedDescription: string;
+                code: string;
+                inputPlaceholder: string;
+            };
         };
     };
 };

package/dist/translations/en.js

@@ -58,6 +58,8 @@ export default {
             emailPlaceholder: 'Email',
             phone: 'Phone',
             phonePlaceholder: 'Phone',
+            yourSettingsHaveBeenSavedTitle: 'Your settings have been saved.',
+            yourSettingsHaveBeenSavedDescription: 'Your settings have been saved.',
         },
         cart_checkout: {
             editCart: 'Edit cart',
@@ -148,6 +150,7 @@ export default {
             restore: 'Restore',
             free: 'Free',
             outOfStock: 'Out of stock',
+            redeem: 'Redeem',
         },
         user_status: {
             tourist: 'tourist',
@@ -204,7 +207,6 @@ export default {
             item: 'Item',
             price: 'Price',
             total: 'Total',
-            yourSettingsHaveBeenSaved: 'Your settings have been saved.',
             billedTo: 'Billed to',
             confirmation: 'Confirmation',
             selectShippingAddress: 'Select shipping address',
@@ -234,6 +236,14 @@ export default {
             balanceCategoryAmount: 'amount',
             useYourMoney: 'Use your muramoney',
             muramoney: 'Muramoney',
+            voucher: {
+                title: 'Redeem a gift card',
+                description: 'Enter gift card code to add to your Muramoney balance.',
+                redeemedTitle: 'The code applied successfully',
+                redeemedDescription: 'Your balance updated',
+                code: 'code',
+                inputPlaceholder: 'Enter gift card code',
+            },
         },
     },
 };

package/dist/translations/hy.d.ts

@@ -58,6 +58,8 @@ declare const _default: {
             emailPlaceholder: string;
             phone: string;
             phonePlaceholder: string;
+            yourSettingsHaveBeenSavedTitle: string;
+            yourSettingsHaveBeenSavedDescription: string;
         };
         cart_checkout: {
             editCart: string;
@@ -148,6 +150,7 @@ declare const _default: {
             restore: string;
             free: string;
             outOfStock: string;
+            redeem: string;
         };
         user_status: {
             tourist: string;
@@ -204,7 +207,6 @@ declare const _default: {
             item: string;
             price: string;
             total: string;
-            yourSettingsHaveBeenSaved: string;
             billedTo: string;
             confirmation: string;
             selectShippingAddress: string;
@@ -234,6 +236,14 @@ declare const _default: {
             balanceCategoryAmount: string;
             useYourMoney: string;
             muramoney: string;
+            voucher: {
+                title: string;
+                description: string;
+                redeemedTitle: string;
+                redeemedDescription: string;
+                code: string;
+                inputPlaceholder: string;
+            };
         };
     };
 };

package/dist/translations/hy.js

@@ -50,14 +50,16 @@ export default {
             orderHistory: 'Պատվերների պատմություն',
             name: 'Անուն',
             namePlaceholder: 'Անուն',
-            firstName: 'Անձնանուն',
-            firstNamePlaceholder: 'Անձնանուն',
+            firstName: 'Անուն',
+            firstNamePlaceholder: 'Անուն',
             lastName: 'Ազգանուն',
             lastNamePlaceholder: 'Ազգանուն',
             email: 'Էլ. փոստ',
             emailPlaceholder: 'Էլ. փոստ',
             phone: 'Հեռախոս',
             phonePlaceholder: 'Հեռախոս',
+            yourSettingsHaveBeenSavedTitle: 'Ձեր կարգավորումները պահպանվել են։',
+            yourSettingsHaveBeenSavedDescription: 'Ձեր կարգավորումները պահպանվել են։',
         },
         cart_checkout: {
             editCart: 'Խմբագրել զամբյուղը',
@@ -148,6 +150,7 @@ export default {
             restore: 'Վերականգնել',
             free: 'Անվճար',
             outOfStock: 'Պահեստում չկա',
+            redeem: 'Փոխանակել',
         },
         user_status: {
             tourist: 'տուրիստ',
@@ -204,7 +207,6 @@ export default {
             item: 'Ապրանք',
             price: 'Գին',
             total: 'Ընդհանուր',
-            yourSettingsHaveBeenSaved: 'Ձեր կարգավորումները պահպանվել են։',
             billedTo: 'Վճարվել է',
             confirmation: 'Հաստատում',
             selectShippingAddress: 'Ընտրեք առաքման հասցե',
@@ -234,6 +236,14 @@ export default {
             balanceCategoryAmount: 'Գումար',
             useYourMoney: 'Օգտագործեք ձեր muramoney-ն',
             muramoney: 'Muramoney',
+            voucher: {
+                title: 'Փոխանակեք նվեր քարտը',
+                description: 'Մուտքագրեք նվեր քարտի կոդը՝ ձեր Muramoney մնացորդին ավելացնելու համար։',
+                redeemedTitle: 'Կոդը հաջողությամբ կիրառվեց',
+                redeemedDescription: 'Ձեր մնացորդը թարմացվել է',
+                code: 'կոդ',
+                inputPlaceholder: 'Մուտքագրեք նվեր քարտի կոդը',
+            },
         },
     },
 };

package/dist/translations/index.d.ts

@@ -59,6 +59,8 @@ declare const _default: {
                 emailPlaceholder: string;
                 phone: string;
                 phonePlaceholder: string;
+                yourSettingsHaveBeenSavedTitle: string;
+                yourSettingsHaveBeenSavedDescription: string;
             };
             cart_checkout: {
                 editCart: string;
@@ -149,6 +151,7 @@ declare const _default: {
                 restore: string;
                 free: string;
                 outOfStock: string;
+                redeem: string;
             };
             user_status: {
                 tourist: string;
@@ -205,7 +208,6 @@ declare const _default: {
                 item: string;
                 price: string;
                 total: string;
-                yourSettingsHaveBeenSaved: string;
                 billedTo: string;
                 confirmation: string;
                 selectShippingAddress: string;
@@ -235,6 +237,14 @@ declare const _default: {
                 balanceCategoryAmount: string;
                 useYourMoney: string;
                 muramoney: string;
+                voucher: {
+                    title: string;
+                    description: string;
+                    redeemedTitle: string;
+                    redeemedDescription: string;
+                    code: string;
+                    inputPlaceholder: string;
+                };
             };
         };
     };
@@ -298,6 +308,8 @@ declare const _default: {
                 emailPlaceholder: string;
                 phone: string;
                 phonePlaceholder: string;
+                yourSettingsHaveBeenSavedTitle: string;
+                yourSettingsHaveBeenSavedDescription: string;
             };
             cart_checkout: {
                 editCart: string;
@@ -388,6 +400,7 @@ declare const _default: {
                 restore: string;
                 free: string;
                 outOfStock: string;
+                redeem: string;
             };
             user_status: {
                 tourist: string;
@@ -444,7 +457,6 @@ declare const _default: {
                 item: string;
                 price: string;
                 total: string;
-                yourSettingsHaveBeenSaved: string;
                 billedTo: string;
                 confirmation: string;
                 selectShippingAddress: string;
@@ -474,6 +486,14 @@ declare const _default: {
                 balanceCategoryAmount: string;
                 useYourMoney: string;
                 muramoney: string;
+                voucher: {
+                    title: string;
+                    description: string;
+                    redeemedTitle: string;
+                    redeemedDescription: string;
+                    code: string;
+                    inputPlaceholder: string;
+                };
             };
         };
     };
@@ -538,6 +558,8 @@ declare const _default: {
                 emailPlaceholder: string;
                 phone: string;
                 phonePlaceholder: string;
+                yourSettingsHaveBeenSavedTitle: string;
+                yourSettingsHaveBeenSavedDescription: string;
             };
             cart_checkout: {
                 editCart: string;
@@ -628,6 +650,7 @@ declare const _default: {
                 restore: string;
                 free: string;
                 outOfStock: string;
+                redeem: string;
             };
             user_status: {
                 tourist: string;
@@ -684,7 +707,6 @@ declare const _default: {
                 item: string;
                 price: string;
                 total: string;
-                yourSettingsHaveBeenSaved: string;
                 billedTo: string;
                 confirmation: string;
                 selectShippingAddress: string;
@@ -714,6 +736,14 @@ declare const _default: {
                 balanceCategoryAmount: string;
                 useYourMoney: string;
                 muramoney: string;
+                voucher: {
+                    title: string;
+                    description: string;
+                    redeemedTitle: string;
+                    redeemedDescription: string;
+                    code: string;
+                    inputPlaceholder: string;
+                };
             };
         };
     };

package/dist/translations/ru.d.ts

@@ -59,6 +59,8 @@ declare const _default: {
             emailPlaceholder: string;
             phone: string;
             phonePlaceholder: string;
+            yourSettingsHaveBeenSavedTitle: string;
+            yourSettingsHaveBeenSavedDescription: string;
         };
         cart_checkout: {
             editCart: string;
@@ -149,6 +151,7 @@ declare const _default: {
             restore: string;
             free: string;
             outOfStock: string;
+            redeem: string;
         };
         user_status: {
             tourist: string;
@@ -205,7 +208,6 @@ declare const _default: {
             item: string;
             price: string;
             total: string;
-            yourSettingsHaveBeenSaved: string;
             billedTo: string;
             confirmation: string;
             selectShippingAddress: string;
@@ -235,6 +237,14 @@ declare const _default: {
             balanceCategoryAmount: string;
             useYourMoney: string;
             muramoney: string;
+            voucher: {
+                title: string;
+                description: string;
+                redeemedTitle: string;
+                redeemedDescription: string;
+                code: string;
+                inputPlaceholder: string;
+            };
         };
     };
 };

package/dist/translations/ru.js

@@ -59,6 +59,8 @@ export default {
             emailPlaceholder: 'Электронная почта',
             phone: 'Телефон',
             phonePlaceholder: 'Телефон',
+            yourSettingsHaveBeenSavedTitle: 'Ваши настройки были сохранены.',
+            yourSettingsHaveBeenSavedDescription: 'Ваши настройки были сохранены.',
         },
         cart_checkout: {
             editCart: 'Редактировать корзину',
@@ -149,6 +151,7 @@ export default {
             restore: 'Восстановить',
             free: 'Бесплатно',
             outOfStock: 'Распродано',
+            redeem: 'Активировать',
         },
         user_status: {
             tourist: 'Турист',
@@ -205,7 +208,6 @@ export default {
             item: 'Товар',
             price: 'Цена',
             total: 'Итого',
-            yourSettingsHaveBeenSaved: 'Ваши настройки были сохранены.',
             billedTo: 'Выставлено на',
             confirmation: 'Подтверждение',
             selectShippingAddress: 'Выберите адрес доставки',
@@ -235,6 +237,14 @@ export default {
             balanceCategoryAmount: 'сумма',
             useYourMoney: 'Используйте свой muramoney',
             muramoney: 'Muramoney',
+            voucher: {
+                title: 'Активируйте подарочную карту',
+                description: 'Введите код подарочной карты, чтобы добавить средства на ваш баланс Muramoney.',
+                redeemedTitle: 'Код успешно применён',
+                redeemedDescription: 'Ваш баланс обновлён',
+                code: 'код',
+                inputPlaceholder: 'Введите код подарочной карты',
+            },
         },
     },
 };

package/package.json

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