update(frontend): added links to be able to navigate through all page…

…s on the frontend
Motouom · Jun 13, 2024 · f12638a · f12638a
1 parent 7d992cb
commit f12638a
Show file tree

Hide file tree

Showing 10 changed files with 1,498 additions and 1,180 deletions.
diff --git a/power-pay-frontend/package-lock.json b/power-pay-frontend/package-lock.json
diff --git a/power-pay-frontend/src/components/OTPForm.tsx b/power-pay-frontend/src/components/OTPForm.tsx
@@ -1,6 +1,8 @@
 import React, { useState } from 'react';
+import { faAsterisk } from '@fortawesome/free-solid-svg-icons';
 import { useNavigate } from 'react-router-dom';
 import '../App.css';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
 function OTPForm() {
   const [otp, setOTP] = useState('');
@@ -54,6 +56,9 @@ function OTPForm() {
   const handleGoBack = () => {
     navigate('/');
   };
+  const handleConfirmClick = () => {
+    navigate('/home');
+};
 
   return (
     <div className="flex flex-1 flex-col justify-center space-y-5 max-w-md mx-auto mt-24">
@@ -64,19 +69,25 @@ function OTPForm() {
         </p>
       </div>
       <form className="flex flex-col max-w-md space-y-5" onSubmit={handleSubmit}>
-      <div style={{ position: 'absolute', top: '40%', left: '50%', transform: 'translate(-50%, -50%)', width: '100%', textAlign: 'center' }}>
-        <input
-          type="text"
-          placeholder="OTP"
-          value={otp}
-          onChange={handleOTPChange}
-          className="text-lg text-center rounded-full w-80 p-2.5 bg-red-50 dark:placeholder-gray-900 dark:text-black"
-          style={{ marginTop: '-50px' }} // Adjust the marginTop as needed to bring the bar up
-        />
-      </div>
+      <div className="input-group relative bottom-12 mb-12">
+            <input
+              type="password"
+              name="OTP"
+              onChange={handleOTPChange}
+              className="text-lg px-12 rounded-full w-80 p-2.5 bg-red-50 dark:placeholder-gray-400 dark:text-black required"
+              placeholder="OTP"
+              required
+            />
+            <FontAwesomeIcon
+              icon={faAsterisk}
+              size="1x"
+              className="absolute left-3 top-1/2 transform -translate-y-1/2 text-red-600"
+            />
+          </div>
         <button
           type="submit"
           className="rounded-full w-80 m-auto px-4 py-2 text-white bg-blue-950  text-lg absolute  inset-x-0 bottom-20"
+          onClick={handleConfirmClick}
         >
           Confirm
         </button>

diff --git a/power-pay-frontend/src/components/RecipientInfo.tsx b/power-pay-frontend/src/components/RecipientInfo.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
+import { useNavigate } from 'react-router-dom';
 import { useFormik } from 'formik';
-import { Link } from 'react-router-dom';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faMoneyBill } from '@fortawesome/free-solid-svg-icons';
 import { faPhone } from '@fortawesome/free-solid-svg-icons';
@@ -10,12 +10,20 @@ interface FormValues {
 }
 
 const RecipientInfo: React.FC = () => {
+    const navigate = useNavigate();
+
+    const handleCancelClick = () => {
+        navigate('/home');
+    };
+    const handleConfirmClick = () => {
+        navigate('/pin_send');
+    };
     const formik = useFormik<FormValues>({
         initialValues: {
             phone: '',
             amount: ''
         },
-        onSubmit: (values) => {
+        onSubmit: (values: any) => {
             // Handle form submission
             console.log(values);
         }
@@ -29,7 +37,7 @@ const RecipientInfo: React.FC = () => {
     };
 
     return (
-        <div className="flex  flex-col items-center justify-center h-screen bg-800 text-black text-sm">
+        <div className="flex  flex-col items-center justify-center bg-800 text-black text-sm">
             <form onSubmit={formik.handleSubmit} className="max-w-sm mx-auto w-80 mb-12">
                 <div className="flex pb-4 flex-col items-center">
                     <div className="input-group">
@@ -60,7 +68,18 @@ const RecipientInfo: React.FC = () => {
                     <FontAwesomeIcon icon={faMoneyBill} size="1x" className="absolute text-red-500 left-2 top-1/2 transform -translate-y-1/2 color-red-100" />
                     </div>
                 </div>
-                <button type="submit" className="rounded-full bg-blue-950 hover:bg-blue-950 w-80 m-auto px-4 py-2 text-white text-lg absolute  inset-x-0 bottom-12">Submit</button>
+                <div className="pt-12">
+                    <button className="rounded-full w-80 m-auto px-4 py-2 my-16 text-white bg-red-600 hover:border-red-950 text-lg absolute  inset-x-0 bottom-12"
+                    onClick={handleCancelClick}
+                    >
+                        Cancel
+                    </button>
+                    <button className="rounded-full w-80 m-auto px-4 py-2 text-white bg-blue-950  text-lg absolute  inset-x-0 bottom-12"
+                    onClick={handleConfirmClick}
+                    >
+                        Confirm
+                    </button>
+                </div>
             </form>
         </div>
     );

diff --git a/power-pay-frontend/src/components/RegistrationForm.tsx b/power-pay-frontend/src/components/RegistrationForm.tsx
@@ -71,7 +71,6 @@ function RegistrationForm() {
           alert('Registration failed: ' + responseData.message);
         }
       })
-
       .catch((error) => {
         // Handle network or other errors
         console.error('Error sending registration data:', error);
@@ -80,65 +79,84 @@ function RegistrationForm() {
   };
 
   const handleLoginClick = () => {
-    navigate('/UserLogin'); 
+    navigate('/user_login');
+  };
+  const handleregistrationClick = () => {
+    navigate('/otp');
   };
 
   return (
-    <section className="flex flex-col items-center pt-6">
+    <div className="flex flex-col items-center justify-center w-8 h-screen bg-800 text-black text-sm">
       <div className="p-6 space-y-4 md:space-y-6 sm:p-8">
         <form className="space-y-4 md:space-y-6" onSubmit={handleSubmit}>
-          <div className="input-group" style={{ position: 'absolute', top: '30px', left: '50%', transform: 'translateX(-50%)', width: '100%', textAlign: 'center' }}>
-            <input
-              type="text"
-              name="name"
-              id="name"
-              value={formData.name}
-              onChange={handleInputChange}
-              className="bg-red-50 border border-gray-300 text-gray-900 sm:text-sm rounded-full focus:ring-blue-600 focus:border-blue-600 block w-full p-3.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
-              placeholder="    full name"
-              style={{ width: '350px', margin: 'auto' }}
-              required
-            />
-            <FontAwesomeIcon icon={faUser} size="1x" className="mr-2 color-red-950"/>
-          </div>
-          <div className="input-group" style={{ position: 'absolute', top: '90px', left: '50%', transform: 'translateX(-50%)', width: '100%', textAlign: 'center' }}>
-            <input
-              type="text"
-              name="number"
-              id="number"
-              value={formData.number}
-              onChange={handleInputChange}
-              className="bg-red-50 border border-gray-300 text-gray-900 sm:text-sm rounded-full focus:ring-blue-600 focus:border-blue-600 block w-full p-3.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
-              placeholder="      number"
-              style={{ width: '350px', margin: 'auto' }}
-              required
-            />
-            <FontAwesomeIcon icon={faPhone} size="1x" className="mr-2 color-red-950" />
-          </div>
-          <div className="input-group" style={{ position: 'absolute', top: '160px', left: '50%', transform: 'translateX(-50%)', width: '100%', textAlign: 'center' }}>
-            <input
-              type="text"
-              name="pin"
-              id="pin"
-              value={formData.pin}
-              onChange={handleInputChange}
-              className="bg-red-50 border border-gray-300 text-gray-900 sm:text-sm rounded-full focus:ring-blue-600 focus:border-blue-600 block w-full p-3.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
-              placeholder="    pin"
-              style={{ width: '350px', margin: 'auto' }}
-              required
-            />
-            <FontAwesomeIcon icon={faLock} size="1x" className="mr-2 color-red-950" />
+          <div className="flex flex-col items-center text-lg absolute inset-x-0 top-12 pt-12">
+            <div className="input-group relative">
+              <input
+                type="text"
+                name="name"
+                value={formData.name}
+                onChange={handleInputChange}
+                className="text-lg px-12 rounded-full w-80 p-2.5 bg-red-50 dark:placeholder-gray-400 dark:text-black required"
+                placeholder="Full Name"
+                required
+              />
+              <FontAwesomeIcon
+                icon={faUser}
+                size="1x"
+                className="absolute left-3 top-1/2 transform -translate-y-1/2 text-red-600"
+              />
+            </div>
+            <div className="input-group mt-4">
+              <input
+                type="text"
+                name="number"
+                value={formData.number}
+                onChange={handleInputChange}
+                className="text-lg px-9 rounded-full w-80 p-2.5 bg-red-50 dark:placeholder-gray-400 dark:text-black required"
+                placeholder="Number"
+                required
+              />
+              <FontAwesomeIcon
+                icon={faPhone}
+                size="1x"
+                className="mr-2 text-red-600"
+              />
+            </div>
+            <div className="input-group mt-4 relative">
+              <input
+                type="password"
+                name="pin"
+                value={formData.pin}
+                onChange={handleInputChange}
+                className="text-lg px-12 rounded-full w-80 p-2.5 bg-red-50 dark:placeholder-gray-400 dark:text-black required"
+                placeholder="Pin"
+                required
+              />
+              <FontAwesomeIcon
+                icon={faLock}
+                size="1x"
+                className="absolute left-3 top-1/2 transform -translate-y-1/2 text-red-600"
+              />
+            </div>
           </div>
-          <button type="submit" className="rounded-full w-80 m-auto px-4 py-2 text-white bg-blue-950 text-lg absolute inset-x-0 bottom-20">
+          <button
+            type="submit"
+            onClick={handleregistrationClick}
+            className="rounded-full w-80 m-auto px-4 py-2 text-white bg-blue-950 text-lg absolute inset-x-0 bottom-20"
+          >
             Create an account
           </button>
-          <button type="button" onClick={handleLoginClick} className="rounded-full w-80 m-auto px-4 py-2 text-white bg-blue-950 text-lg absolute inset-x-0 bottom-6">
+          <button
+            type="button"
+            onClick={handleLoginClick}
+            className="rounded-full w-80 m-auto px-4 py-2 text-white bg-blue-950 text-lg absolute inset-x-0 bottom-6"
+          >
             Login
           </button>
         </form>
       </div>
-    </section>
+    </div>
   );
 }
 
-export default RegistrationForm;
+export default RegistrationForm;
diff --git a/power-pay-frontend/src/components/SendMoneyConfirmation.tsx b/power-pay-frontend/src/components/SendMoneyConfirmation.tsx
@@ -1,3 +1,4 @@
+import { useNavigate } from 'react-router-dom';
 interface SendMoneyConfirmationProps {
     onSuccess: (successMessage: string) => void;
   }
@@ -12,6 +13,11 @@ interface SendMoneyConfirmationProps {
 
     // success message to be displayed on the screen
     const successMessage = `Successful transfer of FCFA${amount.toFixed(2)} to ${recipientName}  on ${transferDate} . Reference: ${referenceNumber} , New Balance: FCFA${newBalance.toFixed(2)}`;
+    const navigate = useNavigate();
+
+    const handleOkClick = () => {
+        navigate('/home');
+    };
 
     return (
       <div className="flex justify-center items-center  mb-34 bg-800 text-black text-sm">
@@ -23,7 +29,8 @@ interface SendMoneyConfirmationProps {
             </div>
           </div>
           <div className="pt-12">
-            <button className="rounded-full bg-blue-950 hover:bg-blue-900 w-80 m-auto px-4 py-2 text-white text-lg absolute  inset-x-0 bottom-12" onClick={() => onSuccess(successMessage)}>
+            <button className="rounded-full bg-blue-950 hover:bg-blue-900 w-80 m-auto px-4 py-2 text-white text-lg absolute  inset-x-0 bottom-12" 
+            onClick={handleOkClick}>
               OK
             </button>
           </div>

diff --git a/power-pay-frontend/src/components/UserLogin.tsx b/power-pay-frontend/src/components/UserLogin.tsx
@@ -1,7 +1,16 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faPhone } from '@fortawesome/free-solid-svg-icons/faPhone';
 import { faUser } from '@fortawesome/free-solid-svg-icons';
+import { useNavigate } from 'react-router-dom';
 const UserLogin: React.FC = () => {
+    const navigate = useNavigate();
+
+    const handleLoginClick = () => {
+        navigate('/home');
+    };
+    const handleRegisterClick = () => {
+        navigate('/');
+    };
     return (
       <div className="flex justify-center items-center  mb-34  bg-800 text-black text-sm">
         <FontAwesomeIcon icon={faUser} size="4x" className="text-center w-80 justify-center align-middle pb-9 pt-12 absolute top-3"  />
@@ -17,10 +26,13 @@ const UserLogin: React.FC = () => {
                 </form>
             </div>
             <div className="pt-12">
-                <button className="rounded-full w-80 m-auto px-4 py-2 my-16 text-white bg-blue-950 hover:border-blue-950 text-lg absolute  inset-x-0 bottom-12">
+                <button className="rounded-full w-80 m-auto px-4 py-2 my-16 text-white bg-blue-950 hover:border-blue-950 text-lg absolute  inset-x-0 bottom-12"
+                onClick={handleLoginClick }
+                >
                     Login
                 </button>
-                <button className="rounded-full w-80 m-auto px-4 py-2 text-white bg-blue-950  text-lg absolute  inset-x-0 bottom-12">
+                <button className="rounded-full w-80 m-auto px-4 py-2 text-white bg-blue-950  text-lg absolute  inset-x-0 bottom-12"
+                onClick={handleRegisterClick}>
                     Register
                 </button>
           </div>

diff --git a/power-pay-frontend/src/components/paymentoption.tsx b/power-pay-frontend/src/components/paymentoption.tsx
@@ -1,44 +1,33 @@
-import React, { useState } from 'react';
-import QRScannerComponent from './scan_rq';
-import RecipientInfo from './RecipientInfo'; // Import the RecipientInfo component
-import { Link } from "react-router-dom";
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
 
 const PaymentOptions: React.FC = () => {
-  const [showQRScanner, setShowQRScanner] = useState<boolean>(false);
-  const [showInputManually, setShowInputManually] = useState<boolean>(false);
+  const navigate = useNavigate();
 
-  const handleScanQRClick = () => {
-    setShowQRScanner(true);
-    setShowInputManually(false); // Close InputManuallyComponent if open
-  };
-
-  const handleInputManuallyClick = () => {
-    setShowInputManually(true);
-    setShowQRScanner(false); // Close QRScannerComponent if open
-  };
-
-  return (
+    const handleManuallyClick = () => {
+        navigate('/recipient_info');
+    };
+    const handleQRscanClick = () => {
+        navigate('/QR_scan');
+    };
+  return ( 
     <div className="container">
-      <div className="bg-gray-100 absolute inset-x-6 top-12 h-40 rounded-lg">
+      <div className="absolute inset-x-6 top-12 h-40 rounded-lg">
         <h5 className="h-auto text-center pt-9 mb-2 text-2xl font-bold tracking-tight text-black">Payment Option.</h5>
         <h5 className="text-center pt-9 mb-2 text-black">Choose the option you wish to pay</h5>
       </div>
       <div className="pt-12">
-        <Link to={`RecipientInfo`}>
-          <button onClick={handleInputManuallyClick} className='bg-blue-950 rounded-full w-80 m-auto px-4  text-white text-lg absolute  inset-x-0 mb-20 bottom-12'>Input Manually</button>
+          <button onClick={handleManuallyClick} className='bg-blue-950 rounded-full w-80 m-auto px-4  text-white text-lg absolute  inset-x-0 mb-20 bottom-12'>Input Manually</button>
           <br></br>
-        </Link>
         <div className="pt-12">
-  <Link to={`QRScannerComponent`}>
-          <button onClick={handleScanQRClick} className="bg-blue-950 rounded-full w-80 m-auto px-4  text-white text-lg absolute  inset-x-0 bottom-12"
+          <button onClick={handleQRscanClick} className="bg-blue-950 rounded-full w-80 m-auto px-4  text-white text-lg absolute  inset-x-0 bottom-12"
            type='button'>
             QR Scan
           </button>
-</Link>
         </div>
       </div>
-      {showQRScanner && <QRScannerComponent />}
-      {showInputManually && <RecipientInfo />} {/* Render RecipientInfo component when showInputManually is true */}
+      {/* {showQRScanner && <QRScannerComponent />}
+      {showInputManually && <RecipientInfo />} Render RecipientInfo component when showInputManually is true */}
     </div>
   );
 };