|
|
@@ -1,7 +1,7 @@
|
|
|
import styles from './styles.module.scss';
|
|
|
import Spring from "@components/Spring";
|
|
|
-import {useSelector} from "react-redux";
|
|
|
-import {getAgentInfo, getAgentSubs} from "@features/agentSlice";
|
|
|
+import {useDispatch, useSelector} from "react-redux";
|
|
|
+import {getAgentGetStatus, getAgentInfo, getAgentSubs, getBonusList} from "@features/agentSlice";
|
|
|
import link_icon from "@assets/agent/link.png";
|
|
|
import doller_icon from "@assets/agent/doller_icon.png";
|
|
|
import policy_icon from "@assets/agent/policy.png";
|
|
|
@@ -17,20 +17,36 @@ import {toast} from "react-toastify";
|
|
|
import {formatCash, formatDate} from "@utils/helpers";
|
|
|
import {useNavigate} from "react-router-dom";
|
|
|
import {ROUTE_PATH} from "@constants/routes";
|
|
|
+import {REQ_STATUS} from "@api/config";
|
|
|
+import SmallLoading from "@components/SmallLoading";
|
|
|
+import {reqAgentGet} from "@features/api";
|
|
|
const i18n=global.i18n;
|
|
|
const WAgent=({close})=>{
|
|
|
const navigate = useNavigate();
|
|
|
const agentInfo=useSelector(getAgentInfo);
|
|
|
const agentSubs=useSelector(getAgentSubs);
|
|
|
+ const bonusList=useSelector(getBonusList);
|
|
|
+ const agentGetStatus=useSelector(getAgentGetStatus);
|
|
|
+ const dispatch=useDispatch();
|
|
|
const lvnum=4;
|
|
|
const getTeamUser=()=>{
|
|
|
let teamNum=0;
|
|
|
- for (let i = 0; i < lvnum; i++) {
|
|
|
- let num=agentInfo["downCount"+(i+1)];
|
|
|
- if (num!=null)teamNum+=num;
|
|
|
+ // for (let i = 0; i < lvnum; i++) {
|
|
|
+ // let num=agentInfo["downCount"+(i+1)];
|
|
|
+ // if (num!=null)teamNum+=num;
|
|
|
+ // }
|
|
|
+ for (const key in agentInfo) {
|
|
|
+ if (key.startsWith("downCount")){
|
|
|
+ let num=agentInfo[key];
|
|
|
+ if (num!=null)teamNum+=Number(num);
|
|
|
+ }
|
|
|
}
|
|
|
return teamNum;
|
|
|
}
|
|
|
+ const onGetBonus=(ID)=>{
|
|
|
+ if (agentGetStatus[ID]===REQ_STATUS.LOADING)return;
|
|
|
+ dispatch(reqAgentGet(ID));
|
|
|
+ }
|
|
|
const renderBase=()=>{
|
|
|
let agentUrl="";
|
|
|
let bonus=agentInfo.bonus?agentInfo.bonus:0;
|
|
|
@@ -195,8 +211,9 @@ const WAgent=({close})=>{
|
|
|
let name=item.NickName;
|
|
|
let SubTotal=item.SubTotal;
|
|
|
let bonus=item.bonus;
|
|
|
+ let bg_style=index===len-1?styles.info_item_bottom:styles.info_item_middle;
|
|
|
return (
|
|
|
- <div key={index} className={`${styles.info_item_title} ${styles.info_item_middle}`}>
|
|
|
+ <div key={index} className={`${styles.info_item_title} ${bg_style}`}>
|
|
|
<span className={styles.sub_data_item}>{name}</span>
|
|
|
<span className={styles.sub_data_item}>{global.DOLLAR+formatCash(SubTotal, 2, true)}</span>
|
|
|
<span className={styles.sub_data_item}>{global.DOLLAR+formatCash(bonus, 2, true)}</span>
|
|
|
@@ -221,18 +238,48 @@ const WAgent=({close})=>{
|
|
|
</div>
|
|
|
</div>
|
|
|
<div className={`${styles.info_item_title} ${styles.info_item_title_middle} ${styles.text_white}`}>
|
|
|
- <span>{i18n.t("agent.subs.label_name")}</span>
|
|
|
+ <span className={styles.sub_data_item}>{i18n.t("agent.subs.label_name")}</span>
|
|
|
<div className={styles.text_line}></div>
|
|
|
- <span>{i18n.t("agent.subs.label_revenue")}</span>
|
|
|
+ <span className={styles.sub_data_item}>{i18n.t("agent.subs.label_revenue")}</span>
|
|
|
<div className={styles.text_line}></div>
|
|
|
- <span>{i18n.t("agent.subs.label_commision")}</span>
|
|
|
+ <span className={styles.sub_data_item}>{i18n.t("agent.subs.label_commision")}</span>
|
|
|
</div>
|
|
|
{renderSubsList()}
|
|
|
</div>
|
|
|
)
|
|
|
}
|
|
|
const renderAvailabelList=()=>{
|
|
|
- return renderEmpty(false)
|
|
|
+ if (bonusList==null||bonusList.length===0)return renderEmpty(false);
|
|
|
+ let len=bonusList.length;
|
|
|
+ return (
|
|
|
+ <>
|
|
|
+ {
|
|
|
+ bonusList.map((item,index)=>{
|
|
|
+ let Date=item.Date+"";
|
|
|
+ let DateStr=Date.substring(0,4)+"-"+Date.substring(4,6)+"-"+Date.substring(6,8);
|
|
|
+ let bonus=item.bonus;
|
|
|
+ let bonusStr=global.DOLLAR+formatCash(bonus,2,true);
|
|
|
+ let bg_style=index===len-1?styles.info_item_bottom:styles.info_item_middle;
|
|
|
+ return (
|
|
|
+ <div key={index} className={`${styles.info_item_title} ${bg_style}`}>
|
|
|
+ <span className={styles.sub_data_item}>{DateStr}</span>
|
|
|
+ <span className={styles.sub_data_item}>{bonusStr}</span>
|
|
|
+ <div className={`${styles.sub_data_item} d-flex align-items-center justify-content-center`}>
|
|
|
+ <button className={`${styles.button_claim}`} onClick={()=>{
|
|
|
+ onGetBonus(item.ID);
|
|
|
+ }}>
|
|
|
+ {
|
|
|
+ agentGetStatus[item.ID]===REQ_STATUS.LOADING?(<SmallLoading fill={"#fff"}></SmallLoading>):(i18n.t("agent.bonus.btn_claim"))
|
|
|
+ }
|
|
|
+ {/*{i18n.t("agent.bonus.btn_claim")}*/}
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ )
|
|
|
+ })
|
|
|
+ }
|
|
|
+ </>
|
|
|
+ )
|
|
|
}
|
|
|
const renderAvailable = () => {
|
|
|
return (
|
|
|
@@ -245,7 +292,9 @@ const WAgent=({close})=>{
|
|
|
</div>
|
|
|
{i18n.t("agent.bonus.title_bonus")}
|
|
|
</div>
|
|
|
- <button className={`${styles.title} ${styles.text_white}`}>
|
|
|
+ <button className={`${styles.title} ${styles.text_white}`} onClick={()=>{
|
|
|
+ navigate(ROUTE_PATH.AGENT_HISTORY);
|
|
|
+ }}>
|
|
|
<div className={styles.text_line}></div>
|
|
|
<span>{i18n.t("agent.bonus.history")}</span>
|
|
|
<SvgIcon className={styles.arrow} herf={"icon_Arrow"}></SvgIcon>
|
|
|
@@ -253,11 +302,11 @@ const WAgent=({close})=>{
|
|
|
</div>
|
|
|
</div>
|
|
|
<div className={`${styles.info_item_title} ${styles.info_item_title_middle} ${styles.text_white}`}>
|
|
|
- <span>{i18n.t("agent.bonus.label_date")}</span>
|
|
|
+ <span className={styles.sub_data_item}>{i18n.t("agent.bonus.label_date")}</span>
|
|
|
<div className={styles.text_line}></div>
|
|
|
- <span>{i18n.t("agent.bonus.label_commision")}</span>
|
|
|
+ <span className={styles.sub_data_item}>{i18n.t("agent.bonus.label_commision")}</span>
|
|
|
<div className={styles.text_line}></div>
|
|
|
- <span>{i18n.t("agent.bonus.label_claim")}</span>
|
|
|
+ <span className={styles.sub_data_item}>{i18n.t("agent.bonus.label_claim")}</span>
|
|
|
</div>
|
|
|
{renderAvailabelList()}
|
|
|
</div>
|