From e5b36e3f450ad00797ab34d4bc1295d98ed2fd6c Mon Sep 17 00:00:00 2001 From: victorAnumudu Date: Thu, 4 Apr 2024 20:33:49 +0100 Subject: [PATCH 1/2] added count down timer --- .env | 5 ++- .env.development | 5 ++- .env.production | 5 ++- .../MyWallet/Popup/CompleteConfirmCredit.jsx | 31 ++++++++++--------- src/components/MyWallet/Popup/CreditPopup.jsx | 4 ++- src/components/countdown/CustomTimer.jsx | 24 ++++++++++++++ 6 files changed, 55 insertions(+), 19 deletions(-) create mode 100644 src/components/countdown/CustomTimer.jsx diff --git a/.env b/.env index 51e90d8..fcdc42c 100644 --- a/.env +++ b/.env @@ -121,4 +121,7 @@ REACT_APP_SHOW_SLIDER_BANNERS=0 REACT_APP_MEDIA_LINK='https://dev-media.wrenchboard.com' # FOR FAMILY GAME LINK -REACT_APP_FAM_GAME_LINK='https://games.wrenchboard.com' \ No newline at end of file +REACT_APP_FAM_GAME_LINK='https://games.wrenchboard.com' + +# REACT APP CUSTOMTIMER +REACT_APP_CUSTOMTIMER=90 \ No newline at end of file diff --git a/.env.development b/.env.development index 0d41f9c..5f2d549 100644 --- a/.env.development +++ b/.env.development @@ -89,4 +89,7 @@ REACT_APP_SHOW_SLIDER_BANNERS=0 REACT_APP_MEDIA_LINK='https://dev-media.wrenchboard.com' # FOR FAMILY GAME LINK -REACT_APP_FAM_GAME_LINK='https://games.wrenchboard.com' \ No newline at end of file +REACT_APP_FAM_GAME_LINK='https://games.wrenchboard.com' + +# REACT APP CUSTOMTIMER +REACT_APP_CUSTOMTIMER=90 \ No newline at end of file diff --git a/.env.production b/.env.production index 04014b2..cfa2c24 100644 --- a/.env.production +++ b/.env.production @@ -95,4 +95,7 @@ REACT_APP_SHOW_SLIDER_BANNERS=0 REACT_APP_MEDIA_LINK='https://media.wrenchboard.com' # FOR FAMILY GAME LINK -REACT_APP_FAM_GAME_LINK='https://games.wrenchboard.com' \ No newline at end of file +REACT_APP_FAM_GAME_LINK='https://games.wrenchboard.com' + +# REACT APP CUSTOMTIMER +REACT_APP_CUSTOMTIMER=90 \ No newline at end of file diff --git a/src/components/MyWallet/Popup/CompleteConfirmCredit.jsx b/src/components/MyWallet/Popup/CompleteConfirmCredit.jsx index 64f92c8..098d2b1 100644 --- a/src/components/MyWallet/Popup/CompleteConfirmCredit.jsx +++ b/src/components/MyWallet/Popup/CompleteConfirmCredit.jsx @@ -49,7 +49,7 @@ function CompleteConfirmCredit({ onClose, confirmCredit }) { -
+

{isSuccess ? "Credit was Successful!" @@ -59,41 +59,42 @@ function CompleteConfirmCredit({ onClose, confirmCredit }) { {data?.internal_return >= 0 && data?.result !== "Charge failed" && ( - <> -
-

+
+
+

Amount({data?.currency || ""})

- + {`${data?.symbol || ""} ${ - Number(data?.amount * 0.01).toLocaleString() || "" + Number(data?.amount * 0.01).toFixed(2) || "" }`}
{data?.curr_balance && -
-

+
+

Wallet Balance

- - {data?.curr_balance * 0.01} + + {(data?.curr_balance * 0.01).toFixed(2)}
} {isSuccess && ( -
-

+
+

Confirmation Number

- + {data?.confirmation}
)} - - )} +

+ ) + }

diff --git a/src/components/MyWallet/Popup/CreditPopup.jsx b/src/components/MyWallet/Popup/CreditPopup.jsx index 87a46d3..96ecf9f 100644 --- a/src/components/MyWallet/Popup/CreditPopup.jsx +++ b/src/components/MyWallet/Popup/CreditPopup.jsx @@ -4,6 +4,7 @@ import LoadingSpinner from "../../Spinners/LoadingSpinner"; import AddFundPop from "./AddFundPop"; import CompleteConfirmCredit from "./CompleteConfirmCredit"; import ConfirmAddFund from "./ConfirmAddFund"; +import CustomTimer from "../../countdown/CustomTimer"; const CreditPopup = ({ details, onClose, situation, walletItem }) => { const [input, setInput] = useState(""); @@ -75,7 +76,8 @@ const CreditPopup = ({ details, onClose, situation, walletItem }) => {

Processing payment

Please do not refresh

-

Timer countdown

+ {/*

Timer countdown

*/} +

) : ( diff --git a/src/components/countdown/CustomTimer.jsx b/src/components/countdown/CustomTimer.jsx new file mode 100644 index 0000000..3ef6470 --- /dev/null +++ b/src/components/countdown/CustomTimer.jsx @@ -0,0 +1,24 @@ +import React, { useEffect, useState } from 'react' + +export default function CustomTimer({className='text-emerald-500'}) { + + const [time, setTime] = useState(Number(process.env.REACT_APP_CUSTOMTIMER)) + + useEffect(()=>{ + const timer = setInterval(()=>{ + setTime(prev => prev - 1) + },1000) + return ()=>{ + clearInterval(timer) + } + },[]) + + let minutes = Math.floor(time/60) + let seconds = time - (minutes * 60) + + return ( +

+ {`${minutes > 9 ? minutes : '0'+minutes} : ${seconds > 9 ? seconds : '0'+seconds}`} +

+ ) +} From 81707c7bd82e0d1bd6cdb198e58129dcf71ac230 Mon Sep 17 00:00:00 2001 From: victorAnumudu Date: Thu, 4 Apr 2024 20:41:57 +0100 Subject: [PATCH 2/2] payment count down timer added --- src/components/countdown/CustomTimer.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/countdown/CustomTimer.jsx b/src/components/countdown/CustomTimer.jsx index 3ef6470..a8b394b 100644 --- a/src/components/countdown/CustomTimer.jsx +++ b/src/components/countdown/CustomTimer.jsx @@ -13,8 +13,8 @@ export default function CustomTimer({className='text-emerald-500'}) { } },[]) - let minutes = Math.floor(time/60) - let seconds = time - (minutes * 60) + let minutes = time == 0 ? 0 : Math.floor(time/60) + let seconds = time == 0 ? 0 :time - (minutes * 60) return (