no message

src/features/agentSlice.js

@@ -4,6 +4,16 @@ import {buildReqReducer, reqAgentCheck, reqAgentGet, reqAgentHistory} from "@fea
 import {getHttpMsg} from "@utils/helpers";
 import {toast} from "react-toastify";
 const i18n=global.i18n;
+const parseLevels=(levels)=>{
+    let list=[];
+    for (const key in levels) {
+        list.push(levels[key]);
+    }
+    list.sort((a,b)=>{
+        return a.Level>b.Level;
+    })
+    return list;
+}
 const reducerAgentCheck=(state,action,arg)=>{
     let payload=action.payload;
     if (payload&&payload.code===200){
@@ -11,7 +21,7 @@ const reducerAgentCheck=(state,action,arg)=>{
         if (data){
             if (data.info)state.info=data.info;
             if (data.subs)state.subs=data.subs;
-            if (data.levels)state.levels=data.levels;
+            if (data.levels)state.levels=parseLevels(data.levels);
             if (data.history)state.bonusList=data.history;
             if (data.link)state.link=data.link;
             state.isInit=true;
@@ -91,7 +101,7 @@ export const AgentSlice = createSlice({
         isInit:false,
         info: {},
         subs:[],
-        levels:{},
+        levels:[],
         bonusList:[],
         history:[],
         link:""

src/locales/languages/en_US.json

@@ -493,6 +493,12 @@
       "des_2": "Today's performance from B\n50,000 Level 10",
       "des_3": "Today's performance from C\n20,000 Level 9",
       "title_1": "Today's earnings of A = 10,700"
+    },
+    "levels": {
+      "title": "Commission Table",
+      "label_1": "Level",
+      "label_2": "Performance",
+      "label_3": "Commission"
     }
   },
   "agent": {

src/locales/languages/es_MX.json

@@ -483,6 +483,12 @@
       "des_2": "La actuación de hoy de B.\n50.000                   Nivel 10",
       "des_3": "La actuación de hoy de C.\n20.000                   Nivel 9",
       "title_1": "Ganancias de hoy de A = 10.700"
+    },
+    "levels": {
+      "title": "Tabla de comisiones",
+      "label_1": "Nivel",
+      "label_2": "Actuación",
+      "label_3": "Comisión"
     }
   },
   "agent": {

src/locales/languages/pt_BR.json

@@ -484,6 +484,12 @@
       "des_2": "Performance de hoje de B \n50,000\t                 Nivel 10",
       "des_3": "Performance de hoje de C \n20,000\t                 Nivel 9",
       "title_1": "Ganhos de hoje de A = 10.700"
+    },
+    "levels": {
+      "title": "Tabela de Comissão",
+      "label_1": "Nível",
+      "label_2": "Desempenho",
+      "label_3": "Comissão"
     }
   },
   "agent": {

src/locales/languages/ru_RU.json

@@ -483,6 +483,12 @@
       "des_2": "Сегодняшняя производительность от B\n50,000 Уровень 10",
       "des_3": "Сегодняшняя производительность от C\n20,000 Уровень 9",
       "title_1": "Сегодняшний доход от A = 10,700"
+    },
+    "levels": {
+      "title": "Таблица комиссий",
+      "label_1": "Уровень",
+      "label_2": "Производительность",
+      "label_3": "Комиссия"
     }
   },
   "agent": {

src/locales/languages/zh_TW.json

@@ -483,6 +483,12 @@
       "des_2": "B的今日績效\n50,000級別10",
       "des_3": "C的今日績效\n20,000級別9",
       "title_1": "A的今日收益 = 10,700"
+    },
+    "levels": {
+      "title": "佣金表",
+      "label_1": "等級",
+      "label_2": "績效",
+      "label_3": "佣金"
     }
   },
   "agent": {

src/widgets/WAgentPolicy/index.jsx

@@ -2,10 +2,23 @@ import styles from './styles.module.scss';
 import BackgroundImgix from "@components/Imgix/BackgroundImgix";
 import {APP_IMGIX_URL} from "@api/config";
 import LazyImgix from "@components/Imgix/LazyImgix";
+import {useDispatch, useSelector} from "react-redux";
+import {getAgentLevels, getIsInit} from "@features/agentSlice";
+import {useEffect} from "react";
+import {reqAgentCheck} from "@features/api";
+import {formatLongChips} from "@utils/helpers";
 const i18n=global.i18n;
 const WAgentPolicy=({close})=>{
     const titlePath=require(`@assets/agent/titls_${i18n.language}.png`);
     const stepList=Array.from({ length: 3 }, (_, index) => index+1);
+    const isAgentInit=useSelector(getIsInit);
+    const dispatch=useDispatch();
+    const levels=useSelector(getAgentLevels);
+    useEffect(()=>{
+        if (!isAgentInit){
+            dispatch(reqAgentCheck());
+        }
+    },[])
     const renderStepList=()=>{
         return (
             <div className={styles.step_con}>
@@ -57,6 +70,49 @@ const WAgentPolicy=({close})=>{
             </div>
         )
     }
+    const renderLevels=()=>{
+        return (
+            <div className={styles.levels_con}>
+                <span className={styles.level_top}>
+                    {i18n.t("agentPolicy.levels.title")}
+                </span>
+                <div className={styles.level_item}>
+                    <span className={`${styles.sub_item} ${styles.left} ${styles.sub_title}`}>
+                        {i18n.t("agentPolicy.levels.label_1")}
+                    </span>
+                    <span className={`${styles.sub_item} ${styles.center} ${styles.sub_title}`}>
+                        {i18n.t("agentPolicy.levels.label_2")}
+                    </span>
+                    <span className={`${styles.sub_item} ${styles.right} ${styles.sub_title}`}>
+                        {i18n.t("agentPolicy.levels.label_3")}
+                    </span>
+                </div>
+                {
+                    levels.map((item,index)=>{
+                        let bg_index=index%2;
+                        let BRL=item.BRL;
+                        let Rate=(Number(item.Rate)*100).toFixed(1)+"%";
+                        let cash=formatLongChips(BRL);
+                        return (
+                            <div key={index} className={styles.level_item}>
+                                <span
+                                    className={`${styles.sub_item} ${styles.left} ${styles["background_" + bg_index]}`}>{item.Level}</span>
+                                <div
+                                    className={`${styles.sub_item} ${styles.center} ${styles["background_" + bg_index]}`}>
+                                    <div className={'d-flex align-items-center justify-content-between w-100 h-100'}>
+                                        <span>{global.DOLLAR}</span>
+                                        <span>{cash}</span>
+                                    </div>
+                                </div>
+                                <span
+                                    className={`${styles.sub_item} ${styles.right} ${styles["background_" + bg_index]}`}>{Rate}</span>
+                            </div>
+                        )
+                    })
+                }
+            </div>
+        )
+    }
     return (
         <div className={styles.container}>
             <div className={styles.content_bg}>
@@ -74,6 +130,7 @@ const WAgentPolicy=({close})=>{
                     {renderStepList()}
                     {renderExample()}
                     {renderTeamInfo()}
+                    {renderLevels()}
                 </div>
             </div>
         </div>

src/widgets/WAgentPolicy/styles.module.scss

@@ -100,8 +100,9 @@ $title_bg:"./../../assets/agent/titlebg.png";
         justify-content: center;
         width: 100%;
         padding: 0.5rem;
-        background-color: #282a2f;
+        background-color: rgba(0, 0, 0, 0.15);
         gap: 0.3rem;
+        border-radius: var(--border-radius);
         & .info_num{
           display: flex;
           align-items: center;
@@ -113,6 +114,65 @@ $title_bg:"./../../assets/agent/titlebg.png";
     }
   }
 }
+.levels_con{
+  display: flex;
+  flex-direction: column;
+  gap: 0.14rem;
+  & .level_item{
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    color: rgba(255, 255, 255);
+    gap: 0.14rem;
+    font-size: 1rem;
+    width: 100%;
+    height: 2.77rem;
+    & .sub_title{
+      background: #35384e;
+      color: #fff;
+      font-size: 1.2rem;
+    }
+    & .sub_title_1{
+      color: #efc87b;
+    }
+    & .sub_item{
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 0.28rem;
+      height: 100%;
+    }
+    & .left{
+      width: 17%;
+    }
+    & .center{
+      flex: 1;
+      padding: 0rem 1.38rem;
+    }
+    & .right{
+      width: 32%;
+    }
+    & .background_0{
+      background: #171a2b;
+    }
+    & .background_1{
+      background: #222431;
+    }
+  }
+  & .level_top{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: #493d29;
+    color: #f0c792;
+    width: 100%;
+    height: 3.6rem;
+    border-radius: 0.4rem 0.4rem 0 0;
+    font-size: 1.77rem;
+    font-weight: 600;
+  }
+}
 .content_bg{
   display: flex;
   flex-direction: column;