Implement the frontend page for recipient's data input using ppa #26

power-pay-frontend/package.json

@@ -14,6 +14,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@yudiel/react-qr-scanner": "^2.0.0-beta.3",
     "axios": "^1.6.8",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"

power-pay-frontend/src/components/fake_api.tsx

@@ -0,0 +1,61 @@
+import axios, { AxiosError, AxiosResponse } from 'axios';
+
+export interface ApiResponse {
+  phone: string;
+  amount: string;
+}
+
+export interface ErrorResponse {
+  message: string;
+}
+
+const FakeApi = () => {
+  const baseURL = 'http://localhost:5000';
+  const api = axios.create({
+    baseURL,
+    timeout: 5000,
+  });
+
+  const mockSend_MoneyAPI = async (
+    recipientPhoneNumber: string,
+    amount: number
+  ): Promise<ApiResponse | undefined> => {
+    try {
+      if (!recipientPhoneNumber || !amount) {
+        throw new Error("Please fill in all fields");
+      }
+
+      const response: AxiosResponse<ApiResponse> = await api.post('/UserInfo', {
+        recipientPhoneNumber,
+        amount,
+      });
+
+      console.log("Transaction Successful");
+      console.log("Recipient Phone Number:", recipientPhoneNumber);
+      console.log("Amount:", amount);
+
+      return response.data;
+    } catch (error) {
+      if (axios.isAxiosError(error)) {
+        const axiosError = error as AxiosError<ErrorResponse>;
+        if (axiosError.response) {
+          // Server returned an error response
+          console.log(axiosError.response.data.message || "An error occurred while processing the transaction.");
+        } else if (axiosError.request) {
+          // No response received, possibly due to network issues
+          console.log("Network error. Please check your internet connection.");
+        } else {
+          // Something else went wrong
+          console.log("An error occurred while processing the transaction.");
+        }
+      } else {
+        // Non-Axios errors
+        console.log("An error occurred while processing the transaction.");
+      }
+    }
+  };
+
+  return mockSend_MoneyAPI; // Return the function directly
+};
+
+export default FakeApi;

power-pay-frontend/src/components/index.tsx

@@ -0,0 +1,43 @@
+import React, { useState } from 'react';
+import QRScannerComponent from './scan_rq';
+import UserInfo from './userinfo'; // Import the UserInfo component
+import { Link } from "react-router-dom";
+
+const PaymentOptions: React.FC = () => {
+  const [showQRScanner, setShowQRScanner] = useState<boolean>(false);
+  const [showInputManually, setShowInputManually] = useState<boolean>(false);
+
+  const handleScanQRClick = () => {
+    setShowQRScanner(true);
+    setShowInputManually(false); // Close InputManuallyComponent if open
+  };
+
+  const handleInputManuallyClick = () => {
+    setShowInputManually(true);
+    setShowQRScanner(false); // Close QRScannerComponent if open
+  };
+
+  return (
+    <div className="container">
+      <div className="bg-gray-100 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={`UserInfo`}>
+          <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>
+          <br></br>
+        </Link>
+        <div className="pt-12">
+          <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">
+            QR Scan
+          </button>
+        </div>
+      </div>
+      {showQRScanner && <QRScannerComponent />}
+      {showInputManually && <UserInfo />} {/* Render UserInfo component when showInputManually is true */}
+    </div>
+  );
+};
+
+export default PaymentOptions

power-pay-frontend/src/components/scan_rq.tsx

@@ -0,0 +1,45 @@
+import {  useEffect, useRef as ref } from 'react';
+import { Scanner as S } from '@yudiel/react-qr-scanner'; // Importing Scanner from @yudiel/react-qr-scanner
+const Scanner: any = S;
+
+
+const QRScannerComponent  = () => {
+
+  const qrScannerRef = ref<any>(null);
+  useEffect(() => {
+    if (qrScannerRef.current) {
+      qrScannerRef.current.start();
+    }
+
+    return () => {
+      if (qrScannerRef.current) {
+        qrScannerRef.current.stop();
+      }
+    };
+  }, []);
+
+  const handleScan = (data: string | null) => {
+    if (data) {
+      console.log('Scanned data:', data);
+    }
+  };
+
+  const handleError = (err: any) => {
+    console.error('QR scanner error:', err);
+  };
+
+  return (
+    <div>
+      <Scanner
+        ref={qrScannerRef}
+        on={handleScan}
+        onError={handleError}
+        facingMode="environment"
+        style={{ width: '100%', height: 'auto' }}
+      />
+      <button onClick={() => qrScannerRef.current?.start()}>Start Scan</button>
+    </div>
+  );
+};
+
+export default QRScannerComponent;

power-pay-frontend/src/components/userinfo.tsx

@@ -0,0 +1,74 @@
+import React from 'react';
+import { useFormik } from 'formik';
+import { Link } from 'react-router-dom';
+import FakeApi from './fake_api';
+
+const UserInfo: React.FC = () => {
+    const mockSend_MoneyAPI = FakeApi(); // Call the FakeApi function to get the function mockSend_MoneyAPI
+
+    const formik = useFormik({
+        initialValues: {
+            phone: '',
+            amount: ''
+        },
+        onSubmit: async (values) => {
+            try {
+                // Call the mockSend_MoneyAPI function
+                const response = await mockSend_MoneyAPI(values.phone, parseInt(values.amount));
+                console.log("API Response:", response);
+                // Handle success, navigate to next step, etc.
+            } catch (error: any) {
+                // Handle errors thrown by the mockSend_MoneyAPI function
+                console.error("An error occurred:", error.message);
+
+            }
+        }
+    });
+
+    const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+        const { name, value } = event.target;
+        // Allow only numbers in the input fields
+        const newValue = value.replace(/[^\d]/g, ''); 
+        formik.setFieldValue(name, newValue);
+    };
+
+    return (
+        <div className="max-w-md w-full bg-gray-100 p-8 rounded shadow-lg mt-16">
+            <form onSubmit={formik.handleSubmit}>
+            <div className="absolute top-0 left-0 mt- ml-4">
+            <Link to={`PaymentOptions`}>
+                <button className="hover:bg-blue-700 text-black font-bold py-61 px-4 rounded">
+                &larr; 
+            </button>
+            </Link>
+            </div>
+                <div className="mb-4">
+                    <input
+                        type="text"
+                        id="phone"
+                        name="phone"
+                        placeholder='Phone Number'
+                        onChange={handleChange}
+                        value={formik.values.phone}
+                        style={{ color: 'black' }}
+                        className="mt-1 p-2 border border-gray-300 rounded-full w-full bg-white"
+                    />
+                </div>
+                <div className="mb-4">
+                    <input
+                        type="text"
+                        id="amount"
+                        name="amount"
+                        placeholder="Amount"
+                        onChange={handleChange}
+                        value={formik.values.amount}
+                        className="mt-1 p-2 border border-gray-300 rounded-full w-full bg-white"
+                    />
+                </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>
+            </form>
+        </div>
+    );
+}
+
+export default UserInfo;

power-pay-frontend/src/main.tsx

@@ -8,4 +8,4 @@ ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
     <App />
   </React.StrictMode>,
-)
+)

power-pay-frontend/tsconfig.json

@@ -6,6 +6,7 @@
     "lib": ["ES2020", "DOM", "DOM.Iterable", "webworker"],
     "module": "ESNext",
     "skipLibCheck": true,
+    "noImplicitUseStrict": false,
 
     /* Bundler mode */
     "moduleResolution": "bundler",