Compare commits
5 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 victorAnumudu
|
e4aadfb627 | ||
 ameye
|
6a79c3e56f | ||
|
victorAnumudu
|
81707c7bd8 | ||
|
victorAnumudu
|
e5b36e3f45 | ||
|
ameye
|
6f2fc17090 |
@@ -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'
|
||||
REACT_APP_FAM_GAME_LINK='https://games.wrenchboard.com'
|
||||
|
||||
# REACT APP CUSTOMTIMER
|
||||
REACT_APP_CUSTOMTIMER=90
|
||||
+4
-1
@@ -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'
|
||||
REACT_APP_FAM_GAME_LINK='https://games.wrenchboard.com'
|
||||
|
||||
# REACT APP CUSTOMTIMER
|
||||
REACT_APP_CUSTOMTIMER=90
|
||||
+4
-1
@@ -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'
|
||||
REACT_APP_FAM_GAME_LINK='https://games.wrenchboard.com'
|
||||
|
||||
# REACT APP CUSTOMTIMER
|
||||
REACT_APP_CUSTOMTIMER=90
|
||||
@@ -260,13 +260,13 @@ function AddFundDollars(props) {
|
||||
{/* switch button */}
|
||||
<div className="flex">
|
||||
<form className="add-fund-info flex items-center gap-3 md:px-8 md:pt-4 px-4 pt-2">
|
||||
<h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
|
||||
<h1 className="job-label my-1">
|
||||
{countryWallet == "US" && "Payment Method"}
|
||||
</h1>
|
||||
<div className="my-1 flex items-center gap-2">
|
||||
<label
|
||||
htmlFor="previous"
|
||||
className="cursor-pointer flex items-center gap-1"
|
||||
className="flex items-center gap-1"
|
||||
>
|
||||
<input
|
||||
type="radio"
|
||||
@@ -283,7 +283,7 @@ function AddFundDollars(props) {
|
||||
</label>
|
||||
<label
|
||||
htmlFor="new"
|
||||
className={`cursor-pointer flex items-center gap-1 ${
|
||||
className={`flex items-center gap-1 ${
|
||||
payListCards.data.length >= MaxNoOfCards
|
||||
? "pointer-events-none"
|
||||
: ""
|
||||
@@ -388,7 +388,7 @@ function AddFundDollars(props) {
|
||||
{/* Inputs */}
|
||||
{/* Name */}
|
||||
<div className="flex items-center field w-full my-2 flex-[0.4] gap-3">
|
||||
<label className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold flex items-center gap-1">
|
||||
<label className="job-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold flex items-center gap-1">
|
||||
Name:
|
||||
</label>
|
||||
<p className="input-label text-[#181c32] dark:text-white text-[16px] leading-[20.9625px] font-semibold flex items-center gap-1">{`${firstname} ${lastname}`}</p>
|
||||
@@ -423,7 +423,7 @@ function AddFundDollars(props) {
|
||||
className={`flex items-center justify-between mb-2.5`}
|
||||
>
|
||||
<label
|
||||
className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold line-clamp-3 flex items-center"
|
||||
className="job-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold line-clamp-3 flex items-center"
|
||||
htmlFor="expiration"
|
||||
>
|
||||
Exp Month{" "}
|
||||
|
||||
@@ -131,7 +131,7 @@ function AddFundPop({
|
||||
<div className="lg:w-2/2 w-full mb-10 lg:mb-0">
|
||||
<div className="add-fund w-full bg-white dark:bg-dark-white rounded-2xl">
|
||||
<form className="md:px-8 md:pt-4 px-4 pt-2 add-fund-info flex items-center gap-[2.1rem]">
|
||||
<h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
|
||||
<h1 className="job-label my-1">
|
||||
Amount({currency})
|
||||
</h1>
|
||||
<div className="field w-full max-w-[250px]">
|
||||
|
||||
@@ -49,7 +49,7 @@ function CompleteConfirmCredit({ onClose, confirmCredit }) {
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center">
|
||||
<div className="w-full flex justify-center items-center">
|
||||
<h1 className="text-xl font-semibold text-dark-gray dark:text-white tracking-tighter my-1">
|
||||
{isSuccess
|
||||
? "Credit was Successful!"
|
||||
@@ -59,41 +59,42 @@ function CompleteConfirmCredit({ onClose, confirmCredit }) {
|
||||
|
||||
{data?.internal_return >= 0 &&
|
||||
data?.result !== "Charge failed" && (
|
||||
<>
|
||||
<div className="flex items-center gap-8">
|
||||
<h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
|
||||
<div className="w-full md:w-[60%] mx-auto">
|
||||
<div className="grid grid-cols-2 gap-8 my-2">
|
||||
<h1 className="job-label">
|
||||
Amount({data?.currency || ""})
|
||||
</h1>
|
||||
<span className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
|
||||
<span className="w-full text-base text-dark-gray dark:text-white tracking-tighter flex justify-end items-end">
|
||||
{`${data?.symbol || ""} ${
|
||||
Number(data?.amount * 0.01).toLocaleString() || ""
|
||||
Number(data?.amount * 0.01).toFixed(2) || ""
|
||||
}`}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{data?.curr_balance &&
|
||||
<div className="flex items-center gap-8">
|
||||
<h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
|
||||
<div className="grid grid-cols-2 gap-8 my-2">
|
||||
<h1 className="job-label">
|
||||
Wallet Balance
|
||||
</h1>
|
||||
<span className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
|
||||
{data?.curr_balance * 0.01}
|
||||
<span className="w-full text-base text-dark-gray dark:text-white tracking-tighter flex justify-end items-end">
|
||||
{(data?.curr_balance * 0.01).toFixed(2)}
|
||||
</span>
|
||||
</div>
|
||||
}
|
||||
|
||||
{isSuccess && (
|
||||
<div className="flex items-center gap-8">
|
||||
<h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
|
||||
<div className="grid grid-cols-2 gap-8 my-2">
|
||||
<h1 className="job-label">
|
||||
Confirmation Number
|
||||
</h1>
|
||||
<span className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
|
||||
<span className="w-full text-base text-dark-gray dark:text-white tracking-tighter flex justify-end items-end">
|
||||
{data?.confirmation}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -29,10 +29,10 @@ function ThePaymentText({ value, type }) {
|
||||
return (
|
||||
<div className="my-2 flex items-center gap-5">
|
||||
<div className="card-details flex items-center gap-3">
|
||||
<h1 className="text-xl font-normal text-dark-gray dark:text-white tracking-tighter my-1 space-x-1">
|
||||
<h1 className="text-base">
|
||||
{description} Card
|
||||
</h1>
|
||||
<p className="text-xl font-normal text-dark-gray dark:text-white tracking-wide">
|
||||
<p className="text-base font-normal text-dark-gray dark:text-white tracking-wide">
|
||||
Bank **************{digits}
|
||||
</p>
|
||||
</div>
|
||||
@@ -49,10 +49,11 @@ function AmountSection({ currency, amount, country }) {
|
||||
|
||||
return (
|
||||
<div className={`flex items-center gap-8`}>
|
||||
<h1 className="min-w-[150px] text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
|
||||
{/* text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1 */}
|
||||
<h1 className="min-w-[150px] job-label">
|
||||
Amount({currency})
|
||||
</h1>
|
||||
<span className="min-w-[100px] text-xl text-right font-normal text-dark-gray dark:text-white tracking-tighter my-1">
|
||||
<span className="min-w-[100px] text-base text-right font-normal text-dark-gray dark:text-white tracking-tighter my-1">
|
||||
{formattedAmount}
|
||||
</span>
|
||||
</div>
|
||||
@@ -68,10 +69,10 @@ function TransactionFeeSection({ currency, fee, country }) {
|
||||
|
||||
return (
|
||||
<div className={`flex items-center gap-8 border-b border-gray-600`}>
|
||||
<h1 className="min-w-[150px] text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
|
||||
<h1 className="min-w-[150px] job-label">
|
||||
Transaction Fee
|
||||
</h1>
|
||||
<span className="min-w-[100px] text-xl text-right font-normal text-dark-gray dark:text-white tracking-tighter my-1">
|
||||
<span className="min-w-[100px] text-base text-right font-normal text-dark-gray dark:text-white tracking-tighter my-1">
|
||||
{formattedFee}
|
||||
</span>
|
||||
</div>
|
||||
@@ -89,10 +90,10 @@ function TotalSection({ currency, amount, fee, country }) {
|
||||
|
||||
return (
|
||||
<div className={`flex items-center gap-8`}>
|
||||
<h1 className="min-w-[150px] text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
|
||||
<h1 className="min-w-[150px] job-label">
|
||||
Total
|
||||
</h1>
|
||||
<span className="min-w-[100px] text-xl text-right font-normal text-dark-gray dark:text-white tracking-tighter my-1">
|
||||
<span className="min-w-[100px] text-base text-right font-normal text-dark-gray dark:text-white tracking-tighter my-1">
|
||||
{formattedTotal}
|
||||
</span>
|
||||
</div>
|
||||
@@ -380,7 +381,7 @@ function ConfirmAddFund({
|
||||
<div className="flex items-center gap-8">
|
||||
<label
|
||||
htmlFor="payment"
|
||||
className="min-w-[150px] text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1"
|
||||
className="min-w-[150px] job-label"
|
||||
>
|
||||
Payment Method
|
||||
</label>
|
||||
@@ -395,11 +396,12 @@ function ConfirmAddFund({
|
||||
<div
|
||||
className={`gap-8 flex items-center`}
|
||||
>
|
||||
<h1 className="min-w-[150px] text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
|
||||
<h1 className="min-w-[150px] job-label">
|
||||
Reference No
|
||||
</h1>
|
||||
<span className="text-xl font-normal text-dark-gray dark:text-white tracking-tighter my-1">
|
||||
{__confirmData?.credit_reference}
|
||||
<span className="text-base font-normal text-dark-gray dark:text-white tracking-tighter my-1">
|
||||
{/* Displays only half of the string */}
|
||||
{__confirmData?.credit_reference.slice(0, (Math.floor(__confirmData?.credit_reference.length/2)))}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -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 }) => {
|
||||
<p className="text-lg md:text-2xl text-emerald-600 tracking-wide font-bold">Processing payment</p>
|
||||
<p className="text-lg md:text-2xl text-emerald-600 tracking-wide font-bold">Please do not refresh</p>
|
||||
<LoadingSpinner size="6" color="sky-blue" height='h-20' />
|
||||
<p className="text-lg md:text-2xl text-emerald-600 tracking-wide font-bold">Timer countdown</p>
|
||||
{/* <p className="text-lg md:text-2xl text-emerald-600 tracking-wide font-bold">Timer countdown</p> */}
|
||||
<CustomTimer className="text-lg text-center md:text-2xl text-emerald-600 tracking-wide font-bold" />
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
|
||||
@@ -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 = time == 0 ? 0 : Math.floor(time/60)
|
||||
let seconds = time == 0 ? 0 :time - (minutes * 60)
|
||||
|
||||
return (
|
||||
<p className={`w-full text-base text-emerald-500 ${className}`}>
|
||||
{`${minutes > 9 ? minutes : '0'+minutes} : ${seconds > 9 ? seconds : '0'+seconds}`}
|
||||
</p>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user