Faked the send money API

power-pay-frontend/package.json

@@ -14,6 +14,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "axios": "^1.6.8",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
@@ -23,15 +24,15 @@
     "@typescript-eslint/eslint-plugin": "^7.0.2",
     "@typescript-eslint/parser": "^7.0.2",
     "@vitejs/plugin-react": "^4.2.1",
+    "autoprefixer": "^10.4.18",
     "eslint": "^8.56.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.5",
     "gh-pages": "^6.1.1",
-    "typescript": "^5.2.2",
-    "sass": "^1.71.1",
-    "vite": "^5.1.4",
-    "tailwindcss":"^3.4.1",
     "postcss": "^8.4.35",
-    "autoprefixer": "^10.4.18"
+    "sass": "^1.71.1",
+    "tailwindcss": "^3.4.1",
+    "typescript": "^5.2.2",
+    "vite": "^5.1.4"
   }
 }

power-pay-frontend/src/component/okpage.tsx

@@ -0,0 +1,57 @@
+//faking the API
+import React, { useEffect, useState } from 'react';
+import axios from 'axios';
+
+const OKpage: React.FC = () => {
+  const baseURL = 'http://localhost:5000';   // specifying the base URL with the desired port
+  const api = axios.create({ 
+    baseURL, 
+    timeout: 5000,
+  });
+
+    // Mock function to simulate a succesful API call
+  const mockSend_MoneyAPI = async ( 
+    senderPhoneNumber: string, 
+    recipientPhoneNumber: string, 
+    amount: number
+     ) => {
+    try {
+      const response = await api.post('/send_money', { 
+        senderPhoneNumber, 
+        recipientPhoneNumber, 
+        amount });
+      return response.data;
+    } catch (error) {
+      throw error;
+    }
+  }
+
+  //  Handle API call when component mounts
+  useEffect(() => {
+    mockSend_MoneyAPI('12347656', '1234567890', 100)
+    .then((response) => {
+      console.log("Mock API Response", response);
+    })
+    .catch((error) => {
+      console.error("Mock API Error", error);
+    });
+  }, []);
+}
+
+
+//building the ok page for successful transfer
+const OKPage = () => {
+  return (
+    <div className="card">
+      <div className="ok-page">
+        <h1>Success!</h1>
+        <br></br>
+        <p>The money was successfully transfered.</p>
+        <br></br>
+      </div> 
+      <button className ="okbtn">OK</button>
+    </div>
+  );
+};
+
+export default OKPage;

power-pay-frontend/src/main.tsx

@@ -3,9 +3,10 @@ import React from 'react'
 import ReactDOM from 'react-dom/client'
 import App from './App.tsx'
 import './index.css'
-
+import './component/okpage.tsx'
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
     <App />
+    {/* <OKPage /> */}
   </React.StrictMode>,
 )