WrenchBoard/Users-Wrench
3
0
Fork 0
Code Issues Pull Requests Releases Activity

Fixed confirmation page and added comments

Browse Source
This commit is contained in:
Chukwumdiebube Ojinta
2023-09-13 18:16:04 +01:00
parent 1e3a166172
commit f1ee5150a9
7 changed files with 218 additions and 191 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/MyWallet/Popup/CompleteConfirmCredit.jsx
+67 -71
View File
@@ -1,5 +1,12 @@
/**
* Renders a modal with information about a credit transaction.
* @returns {JSX.Element} - The rendered modal component.
*/
function CompleteConfirmCredit({ onClose, confirmCredit }) {
const { data } = confirmCredit;
const isSuccess =
data?.result === "Charge success" || data?.status === "successful";
return (
<div className="logout-modal-body w-full flex flex-col items-center">
<div className="content-wrapper w-full h-[32rem]">
@@ -9,91 +16,80 @@ function CompleteConfirmCredit({ onClose, confirmCredit }) {
<div className="field w-full mb-3 min-h-[45px]">
<div
className={`flex flex-col gap-4 ${
data?.result !== "Charge success" &&
"h-[328px] items-center justify-center"
!isSuccess && "h-[328px] items-center justify-center"
}`}
>
{/* Success Icon for now */}
<div className="flex items-center w-full justify-center">
{data?.result == "Charge success" ||
data?.status == "successful" ? (
<svg
xmlns="http://www.w3.org/2000/svg"
width="100"
height="100"
viewBox="0 0 24 24"
fill="none"
stroke="green"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
className="feather feather-check-circle"
>
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
<polyline points="22 4 12 14.01 9 11.01"></polyline>
</svg>
) : (
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
width="100"
height="100"
stroke="red"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
className="feather feather-x-circle"
>
<circle cx="12" cy="12" r="10"></circle>
<line x1="15" y1="9" x2="9" y2="15"></line>
<line x1="9" y1="9" x2="15" y2="15"></line>
</svg>
)}
<svg
xmlns="http://www.w3.org/2000/svg"
width="100"
height="100"
viewBox="0 0 24 24"
fill="none"
stroke={isSuccess ? "green" : "red"}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
className={`feather ${
isSuccess ? "feather-check-circle" : "feather-x-circle"
}`}
>
{isSuccess ? (
<>
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
<polyline points="22 4 12 14.01 9 11.01"></polyline>
</>
) : (
<>
<circle cx="12" cy="12" r="10"></circle>
<line x1="15" y1="9" x2="9" y2="15"></line>
<line x1="9" y1="9" x2="15" y2="15"></line>
</>
)}
</svg>
</div>
<div className={`flex items-center`}>
<div className="flex items-center">
<h1 className="text-xl font-semibold text-dark-gray dark:text-white tracking-tighter my-1">
{data?.result == "Charge success" ||
data?.status == "successful"
{isSuccess
? "Credit was Successful!"
: "Credit was Unsuccessful"}
</h1>
</div>
{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">
Amount({data?.currency || ""})
</h1>
<span className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
{`${data?.symbol || ""} ${
Number(data?.amount * 0.01).toLocaleString() || ""
}`}
</span>
</div>
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">
Amount({data?.currency || ""})
</h1>
<span className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
{`${data?.symbol || ""} ${
Number(data?.amount * 0.01).toLocaleString() || ""
}`}
</span>
</div>
<div className="flex items-center gap-8">
<h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
Wallet Balance
</h1>
<span className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
{data?.curr_balance}
</span>
</div>
<div className="flex items-center gap-8">
<h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
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>
</div>
<div className="flex items-center gap-8">
<h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
Confirmation Number
</h1>
<span className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
{data?.confirmation}
</span>
</div>
</>
) : null}
<div className="flex items-center gap-8">
<h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
Confirmation Number
</h1>
<span className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
{data?.confirmation}
</span>
</div>
</>
)}
</div>
</div>
</div>