Update(frontend): Updated the frontend Pin input for send money, made…

… it more responsive
Motouom · Apr 10, 2024 · e3490ac · e3490ac
1 parent 87f3ad2
commit e3490ac
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 11 deletions.
diff --git a/power-pay-frontend/dev-dist/sw.js b/power-pay-frontend/dev-dist/sw.js
@@ -78,8 +78,11 @@ define(['./workbox-b5f7729d'], (function (workbox) { 'use strict';
    * See https://goo.gl/S9QRab
    */
   workbox.precacheAndRoute([{
+    "url": "registerSW.js",
+    "revision": "3ca0b8505b4bec776b69afdba2768812"
+  }, {
     "url": "index.html",
-    "revision": "0.79sl32gt4qg"
+    "revision": "0.3gurk4mdvno"
   }], {});
   workbox.cleanupOutdatedCaches();
   workbox.registerRoute(new workbox.NavigationRoute(workbox.createHandlerBoundToURL("index.html"), {

diff --git a/power-pay-frontend/src/components/okpage.tsx b/power-pay-frontend/src/components/okpage.tsx
@@ -37,16 +37,29 @@ const OKPage: React.FC = () => {
       });
   }, []);
 
+ //fake data made while waiting for others to do the actual implementation
+  const recipientName = "Mr Stephane";
+  const amount = 100.50;
+  const transferDate = new Date().toLocaleDateString(); // Today's date
+  const referenceNumber = "1234567890";
+  const newBalance = 500.25;
+
+  // 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)}`;
+
   return (
-    <div className="flex justify-center items-center p-10 mb-34 border border-white rounded-3xl bg--500 text-white">
-      <div className="card">
-        <div className="ok-page">
-          <h1>Success!</h1>
-          <br />
-          <p>The money was successfully transferred.</p>
-        </div> 
-        <div className="mt-16">
-          <button className="w-96 mt-16 bg-Gray10-color rounded-3xl p-2 text-center text-white bg-green-500">OK</button>
+    <div className="flex justify-center items-center  mb-34 border border-white bg-800 text-black text-sm">
+      <div className="">
+        <div className="rounded-lg w-80 m-auto px-4 py-2  text-lg absolute  inset-x-0 top-12 bg-gray-100">
+          <div>
+            <h1 className="text-2xl font-bold pb-10">Confirmation Alert!</h1>
+            <p className="text-md">{successMessage}</p>
+          </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">
+            OK
+          </button>
         </div>
       </div>
     </div>

diff --git a/power-pay-frontend/src/components/pinInput.tsx b/power-pay-frontend/src/components/pinInput.tsx
@@ -1,4 +1,3 @@
-import React, { useState } from 'react';
 import { Link } from 'react-router-dom';
Original file line number	Diff line number	Diff line change
		@@ -1,4 +1,3 @@
		import React, { useState } from 'react';
		import { Link } from 'react-router-dom';


Expand Down