fix:增加提现弹窗

messages/br.json

@@ -175,7 +175,12 @@
     "EmailReg": "The Email is malformed",
     "amount": "The Montante cannot be empty",
     "amountReg": "The Montante max {max}",
-    "amountMaxReg": "Not that much money"
+    "amountMaxReg": "Not that much money",
+    "pointTitle": "Proxima retirada de bonus",
+    "pointTips": "Bouns R$ ",
+    "pointBet": " FALTA APOSTAR R$ ",
+    "scoreTips":"SALDO R$",
+    "scoreTitle": "SACAR"
   },
   "HeaderBack": {
     "Depósito": "Depósito"

messages/en.json

@@ -176,7 +176,12 @@
     "EmailReg": "The Email is malformed",
     "amount": "The Montante cannot be empty",
     "amountReg": "The Montante max {max}",
-    "amountMaxReg": "Not that much money"
+    "amountMaxReg": "Not that much money",
+    "pointTitle": "Proxima retirada de bonus",
+    "pointTips": "Bouns R$ ",
+    "pointBet": " FALTA APOSTAR R$ ",
+    "scoreTips":"SALDO R$",
+    "scoreTitle": "SACAR"
   },
   "HeaderBack": {
     "Depósito": "Depósito"

src/app/[locale]/(navbar)/withdraw/WithdrawWidget.tsx

@@ -107,6 +107,8 @@ const WithdrawWidget: FC<Props> = (props) => {
     const score = useWalletStore((state) => state.score)!;
 
     const withdrawRef = useRef<ModalProps>(null);
+    // 积分
+    const scoreRef = useRef<ModalProps>(null);
     // 表单
     const formRef = useRef<FormInstance>(null);
 
@@ -180,6 +182,11 @@ const WithdrawWidget: FC<Props> = (props) => {
         await clearWallet();
     };
 
+    const currentPoint =
+        percentage(wallet.current_point_rollover, wallet.target_point_rollover) !== 100
+            ? 0
+            : wallet.point;
+
     if (!activeWallet) return <Empty />;
 
     return (
@@ -284,11 +291,32 @@ const WithdrawWidget: FC<Props> = (props) => {
                         <ul className="ul-box">
                             <li>
                                 {t("WithdrawPage.SaqueDisponivel")}{" "}
-                                <span className="tip">{wallet.score} BRL</span>
+                                <span className="tip">
+                                    {" "}
+                                    {percentage(
+                                        wallet.current_score_rollover,
+                                        wallet.target_score_rollover
+                                    ) < 100
+                                        ? 0
+                                        : wallet.score}{" "}
+                                    BRL
+                                </span>
+                                <span
+                                    className="iconfont icon-iconhelp"
+                                    onClick={() => scoreRef.current?.onOpen()}
+                                ></span>
                             </li>
                             <li>
                                 {t("WithdrawPage.Valor")}{" "}
-                                <span className="tip">{wallet.total_score_rollover} BRL</span>{" "}
+                                <span className="tip">
+                                    {percentage(
+                                        wallet.current_point_rollover,
+                                        wallet.target_point_rollover
+                                    ) < 100
+                                        ? 0
+                                        : wallet.point}{" "}
+                                    BRL
+                                </span>
                                 <span
                                     className="iconfont icon-iconhelp"
                                     onClick={() => withdrawRef.current?.onOpen()}
@@ -305,36 +333,98 @@ const WithdrawWidget: FC<Props> = (props) => {
                 </div>
             </Box>
 
+            {/*本金*/}
             <TipsModal
                 title={
-                    <div className={"flex items-center justify-center"}>
-                        <i className={"iconfont icon-liwuhuodong text-[0.2778rem]"}></i>
-                        Proxima retirada de bonus
+                    <div className={"flex items-center"}>
+                        <i
+                            className={"iconfont icon-liwuhuodong mr-[0.0694rem] text-[0.2778rem]"}
+                        ></i>
+                        SACAR
+                        {t("WithdrawPage.scoreTitle")}
                     </div>
                 }
-                ref={withdrawRef}
+                ref={scoreRef}
             >
                 <ul>
                     <li className={"mb-[0.0694rem]"}>
-                        <span>Bouns R$</span>
+                        <span>{t("WithdrawPage.scoreTips")}</span>
                         <span>{wallet.score}</span>
                     </li>
                     <li>
-                        <ProgressBar
-                            percent={percentage(
-                                wallet.target_score_rollover,
-                                wallet.total_score_rollover
-                            )}
-                            className={"mb-[0.0694rem] flex-1"}
-                            style={{
-                                "--fill-color": "#fb8b05",
-                                "--track-width": "0.0694rem",
-                            }}
-                        />
+                        <div className={"flex items-center"}>
+                            <ProgressBar
+                                percent={percentage(
+                                    wallet.current_score_rollover,
+                                    wallet.target_score_rollover
+                                )}
+                                className={"mr-[0.0694rem] flex-1"}
+                                style={{
+                                    "--fill-color": "#fb8b05",
+                                    "--track-width": "0.0694rem",
+                                }}
+                            />
+
+                            <span>
+                                {percentage(
+                                    wallet.current_score_rollover,
+                                    wallet.target_score_rollover
+                                )}
+                                %
+                            </span>
+                        </div>
+                        <div>
+                            <span>{t("WithdrawPage.pointBet")}</span>
+                            <span>
+                                {wallet.target_score_rollover - wallet.current_score_rollover}
+                            </span>
+                        </div>
+                    </li>
+                </ul>
+            </TipsModal>
+            {/*彩金*/}
+            <TipsModal
+                title={
+                    <div className={"flex items-center"}>
+                        <i
+                            className={"iconfont icon-liwuhuodong mr-[0.0694rem] text-[0.2778rem]"}
+                        ></i>
+                        {t("WithdrawPage.pointTitle")}
+                    </div>
+                }
+                ref={withdrawRef}
+            >
+                <ul>
+                    <li className={"mb-[0.0694rem]"}>
+                        <span>{t("WithdrawPage.pointTips")}</span>
+                        <span>{wallet.point}</span>
+                    </li>
+                    <li>
+                        <div className={"flex items-center"}>
+                            <ProgressBar
+                                percent={percentage(
+                                    wallet.current_point_rollover,
+                                    wallet.target_point_rollover
+                                )}
+                                className={"mr-[0.0694rem] flex-1"}
+                                style={{
+                                    "--fill-color": "#fb8b05",
+                                    "--track-width": "0.0694rem",
+                                }}
+                            />
+                            <span>
+                                {percentage(
+                                    wallet.current_point_rollover,
+                                    wallet.target_point_rollover
+                                )}
+                                %
+                            </span>
+                        </div>
+
                         <div>
-                            <span>FALTA APOSTAR R$</span>
+                            <span>{t("WithdrawPage.pointBet")}</span>
                             <span>
-                                {wallet.total_score_rollover - wallet.target_score_rollover}
+                                {wallet.target_point_rollover - wallet.current_point_rollover}
                             </span>
                         </div>
                     </li>

src/stores/useWalletStore.ts

@@ -2,7 +2,7 @@ import { Wallet } from "@/api/user";
 import { create } from "zustand";
 
 interface State {
-    wallet: Wallet;
+    wallet: Partial<Wallet>;
     score: Wallet["score"];
 }
 

src/utils/methods/index.ts

@@ -80,6 +80,7 @@ export let copyText = function (text: string) {
  * @return number
  */
 export const percentage = (current: number, source: number) => {
+    if (!source) return 0;
     return (current * 100) / source;
 };