pay-sdk-web10 1.0.1

package/src/TransactionSummary.js

@@ -0,0 +1,200 @@
+import React from 'react';
+
+const TransactionSummary = ({ transactionDetails, onConfirm }) => {
+  return (
+    <>
+      <div className="popup-content">
+        <div className="popup-header">
+          <div className="logo">
+            <img
+              src="https://res.cloudinary.com/dlfa42ans/image/upload/v1741686201/logo_n7vrsf.jpg"
+              alt="EvZone Logo"
+              className="header-icon"
+            />
+          </div>
+          <h2>
+            <span className="evzone">EVzone</span>
+            <span className="pay"> Pay</span>
+          </h2>
+        </div>
+        <div className="transaction-summary">
+          <div className="merchant-info">
+            <strong>Airbnb</strong>
+          </div>
+          <div className="total-billing">
+            UGX {transactionDetails.totalBilling.toFixed(2)}
+          </div>
+          <div className="transaction-details">
+            <h4>Transaction Details</h4>
+            <div className="detail">
+              <span>Type</span>
+              <strong>{transactionDetails.type}</strong>
+            </div>
+            <div className="detail">
+              <span>ID</span>
+              <strong>{transactionDetails.id}</strong>
+            </div>
+            <div className="detail">
+              <span>Particulars</span>
+              <strong>{transactionDetails.particulars}</strong>
+            </div>
+            <div className="detail">
+              <span>Billed Currency</span>
+              <strong>{transactionDetails.billedCurrency}</strong>
+            </div>
+            <div className="detail">
+              <span>Billed Amount</span>
+              <strong>UGX {transactionDetails.billedAmount.toFixed(2)}</strong>
+            </div>
+            <div className="detail total-billing-detail">
+              <span>Total Billing</span>
+              <strong>UGX {transactionDetails.totalBilling.toFixed(2)}</strong>
+            </div>
+          </div>
+          <button onClick={onConfirm} className="confirm-button">Confirm</button>
+        </div>
+      </div>
+      <style>{`
+        .popup-content {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          background: white;
+          border-radius: 10px;
+          box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+          max-width: 400px;
+          width: 90%;
+          text-align: center;
+          border: 1px solid #ddd;
+          font-family: Arial, sans-serif;
+          z-index: 1001; /* Ensure popup is above overlay */
+        }
+
+        .popup-header {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          margin-bottom: 15px;
+          width: 100%;
+          padding: 10px 15px;
+          border-bottom: 1px solid #ddd;
+        }
+
+        .logo {
+          width: 40px;
+          height: 40px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          margin-right: 10px;
+          border-radius: 50%;
+          overflow: hidden;
+        }
+
+        .header-icon {
+          width: 100%;
+          height: auto;
+        }
+
+        .popup-header h2 {
+          font-size: 1.2em;
+          color: #080808;
+          margin: 0;
+          font-weight: bold;
+        }
+
+        .popup-header .evzone {
+          color: #0a0a0a;
+        }
+
+        .popup-header .pay {
+          color: #0a0a0a;
+        }
+
+        .transaction-summary {
+          text-align: center;
+          width: 100%;
+          padding: 0 15px;
+        }
+
+        .merchant-info {
+          font-size: 1.2em;
+          font-weight: bold;
+          color: #333;
+          margin-bottom: 10px;
+        }
+
+        .total-billing {
+          font-size: 1.5em;
+          font-weight: bold;
+          color: #02CD8D;
+          text-align: center;
+          padding: 10px 0;
+          margin-bottom: 15px;
+        }
+
+        .transaction-details {
+          background: #f9f9f9;
+          padding: 15px;
+          border-radius: 8px;
+          margin-bottom: 20px;
+          display: flex;
+          flex-direction: column;
+          text-align: left;
+        }
+
+        .transaction-details h4 {
+          font-size: 1.1em;
+          font-weight: bold;
+          color: #333;
+          margin-bottom: 10px;
+        }
+
+        .transaction-details .detail {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          padding: 5px 0;
+          width: 100%;
+        }
+
+        .transaction-details span {
+          color: #666;
+          font-size: 0.9em;
+          flex-shrink: 0;
+        }
+
+        .transaction-details strong {
+          color: #000;
+          font-size: 0.9em;
+          text-align: right;
+          flex-shrink: 0;
+        }
+
+        .transaction-details .total-billing-detail {
+          margin-top: 10px;
+          padding-top: 10px;
+          border-top: 1px solid #ddd;
+        }
+
+        .confirm-button {
+          width: 100%;
+          background: #007bff;
+          color: #fff;
+          padding: 12px;
+          border-radius: 5px;
+          font-size: 1.1em;
+          cursor: pointer;
+          border: none;
+          transition: background-color 0.3s ease;
+        }
+
+        .confirm-button:hover {
+          background: #0056b3;
+        }
+      `}</style>
+    </>
+  );
+};
+
+export default TransactionSummary;

package/src/WalletPaymentForm.css

@@ -0,0 +1,136 @@
+/* Wallet Payment Form */
+.wallet-payment-form {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+}
+
+.overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.5);
+}
+
+/* Popup Content */
+.content {
+  position: relative;
+  background: white;
+  padding: 20px;
+  border-radius: 10px;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+  max-width: 400px;
+  width: 90%;
+  text-align: center;
+  border: 1px solid #ddd;
+  font-family: Arial, sans-serif;
+}
+
+/* Passcode Popup (used by EnterPasscode) */
+.passcode-popup {
+  padding: 20px;
+  background: white;
+  border-radius: 10px;
+  text-align: center;
+}
+
+/* Passcode Section */
+.passcode-section {
+  text-align: left;
+  margin-bottom: 20px;
+}
+
+.passcode-section label {
+  font-size: 1em;
+  font-weight: bold;
+  color: #000;
+}
+
+.passcode-input {
+  position: relative;
+  width: 100%;
+  border: 1px solid #ccc;
+  border-radius: 8px;
+  padding: 12px;
+  font-size: 1.1em;
+  text-align: center;
+  letter-spacing: 5px;
+  background: transparent;
+  display: flex;
+  align-items: center;
+}
+
+.passcode-input input {
+  flex: 1;
+  border: none;
+  outline: none;
+  text-align: center;
+  font-size: 1.4em;
+  letter-spacing: 5px;
+  background: transparent;
+  color: #000;
+  font-weight: bold;
+}
+
+.passcode-input .toggle-visibility {
+  position: absolute;
+  right: 12px;
+  top: 50%;
+  transform: translateY(-50%);
+  cursor: pointer;
+  font-size: 1.5em;
+  color: #000;
+}
+
+/* Buttons */
+.back-button {
+  background: white !important;
+  border: 2px solid red !important;
+  color: red !important;
+  padding: 10px 15px !important;
+  border-radius: 5px !important;
+  font-size: 1em !important;
+  cursor: pointer !important;
+  transition: all 0.3s ease !important;
+}
+
+.back-button:hover {
+  background: white !important;
+  color: red !important;
+  border-color: red !important;
+}
+
+/* Success/Failed Content (used by PaymentSuccess/PaymentFailed) */
+.success-content .icon {
+  color: #02CD8D;
+  font-size: 40px;
+  margin-bottom: 10px;
+}
+
+.success-content h3,
+.success-content p {
+  font-size: 1em;
+  color: #666;
+  margin-bottom: 15px;
+}
+
+/* Blinking Animation (possibly used by LoadingOverlay) */
+@keyframes blink {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}

package/src/WalletPaymentForm.js

@@ -0,0 +1,204 @@
+import React, { useState, useEffect } from 'react';
+import HasAccountSummary from './HasAccountSummary';
+import HasFundsSummary from './HasFundsSummary';
+import TransactionDetailsSummary from './TransactionSummary';
+import EnterPasscode from './EnterPasscode';
+import PaymentSuccess from './PaymentSuccess';
+import PaymentFailed from './PaymentFailed';
+import InsufficientFunds from './InsufficientFunds';
+import LoadingOverlay from './LoadingOverlay';
+
+const SAMPLE_CUSTOMERS = {
+  "customer123": { name: "John Doe", balance: 1000, passcode: "123456" },
+  "customer456": { name: "Jane Smith", balance: 500, passcode: "567856" },
+  "customer789": { name: "Alice Brown", balance: 50, passcode: "901256" },
+};
+
+const generateTransactionDetails = (amount, transactionId) => ({
+  type: "Booking",
+  id: transactionId,
+  particulars: "Hotel Booking",
+  billedCurrency: "UGX",
+  billedAmount: amount,
+  totalBilling: amount,
+});
+
+const checkAccountExists = (customerId) => Promise.resolve(!!SAMPLE_CUSTOMERS[customerId]);
+
+const validatePasscode = (customerId, passcode, amount) => {
+  const customer = SAMPLE_CUSTOMERS[customerId];
+  if (!customer) return { success: false, reason: 'no_account' };
+  if (customer.passcode !== passcode) return { success: false, reason: 'invalid_passcode' };
+  if (customer.balance < amount) return { success: false, reason: 'insufficient_funds' };
+  
+  SAMPLE_CUSTOMERS[customerId].balance -= amount;
+  return { success: true };
+};
+
+const WalletPaymentForm = ({ customerId, amount, onClose, onSuccess }) => {
+  const [popup, setPopup] = useState('transactionSummary');
+  const [passcode, setPasscode] = useState('');
+  const [hasAccount, setHasAccount] = useState(null);
+  const [paymentStatus, setPaymentStatus] = useState('idle');
+  const [showPasscode, setShowPasscode] = useState(false);
+  const [transactionId] = useState(`W-${Math.floor(Math.random() * 1000000000)}`);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    console.log('useEffect running, customerId:', customerId, 'amount:', amount);
+    const timer = setTimeout(() => {
+      console.log('Loading finished');
+      setLoading(false);
+    }, 5000);
+
+    const checkConditions = async () => {
+      if (!customerId) {
+        console.log('No customerId provided, setting hasAccount to false');
+        setHasAccount(false);
+        return;
+      }
+      if (!SAMPLE_CUSTOMERS[customerId]) {
+        console.log(`Invalid customerId: ${customerId}, setting hasAccount to false`);
+        setHasAccount(false);
+        return;
+      }
+      const accountExists = await checkAccountExists(customerId);
+      console.log('Account exists:', accountExists);
+      setHasAccount(accountExists);
+    };
+
+    checkConditions();
+
+    return () => clearTimeout(timer);
+  }, [customerId, amount]);
+
+  const handleConfirm = () => {
+    console.log('Confirm clicked, hasAccount:', hasAccount);
+    if (hasAccount === null) {
+      console.log('hasAccount is null, cannot proceed');
+      return;
+    }
+    if (hasAccount) {
+      setPopup('enterPasscode');
+    } else {
+      console.log('No account, showing HasAccountSummary');
+      setPopup('transactionSummary');
+    }
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    console.log('Submitting passcode:', passcode);
+    setPaymentStatus('pending');
+    const result = await validatePasscode(customerId, passcode, amount);
+    console.log('Validation result:', result);
+    setPaymentStatus(result.success ? 'success' : 'failed');
+    
+    if (result.success) {
+      setPopup('paymentSuccess');
+      if (onSuccess) onSuccess();
+    } else {
+      if (result.reason === 'insufficient_funds') {
+        setPopup('insufficientFunds');
+      } else {
+        setPopup('paymentFailed');
+      }
+      setTimeout(() => {
+        setPopup('transactionSummary');
+        setPasscode('');
+        setPaymentStatus('idle');
+        onClose();
+      }, 5000);
+    }
+  };
+
+  const handleSuccessClose = () => {
+    console.log('Success close clicked');
+    setPopup('transactionSummary');
+    setPasscode('');
+    setPaymentStatus('idle');
+    onClose();
+  };
+
+  const transactionDetails = generateTransactionDetails(amount, transactionId);
+
+  const renderPopup = () => {
+    console.log('Rendering popup, current popup:', popup, 'hasAccount:', hasAccount);
+    switch (popup) {
+      case 'transactionSummary':
+        if (!hasAccount) {
+          return <HasAccountSummary onClose={onClose} />;
+        }
+        return (
+          <TransactionDetailsSummary
+            transactionDetails={transactionDetails}
+            onConfirm={handleConfirm}
+          />
+        );
+      case 'enterPasscode':
+        return (
+          <EnterPasscode
+            passcode={passcode}
+            setPasscode={setPasscode}
+            showPasscode={showPasscode}
+            setShowPasscode={setShowPasscode}
+            transactionDetails={transactionDetails}
+            onSubmit={handleSubmit}
+            onBack={() => setPopup('transactionSummary')}
+          />
+        );
+      case 'paymentSuccess':
+        return <PaymentSuccess amount={amount} onClose={handleSuccessClose} />;
+      case 'paymentFailed':
+        return <PaymentFailed onClose={onClose} />;
+      case 'insufficientFunds':
+        return <InsufficientFunds onClose={onClose} />;
+      default:
+        return null;
+    }
+  };
+
+  return (
+    <>
+      <div className="wallet-payment-form">
+        {loading ? (
+          <LoadingOverlay />
+        ) : (
+          <>
+            <div className="overlay" onClick={() => {
+              console.log('Overlay clicked, closing');
+              onClose();
+            }}></div>
+            {renderPopup()}
+          </>
+        )}
+      </div>
+      <style>{`
+        .wallet-payment-form {
+          position: fixed;
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 100%;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          z-index: 1000;
+        }
+
+        .overlay {
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 100%;
+          background: rgba(0, 0, 0, 0.5);
+          z-index: 999;
+          pointer-events: auto;
+        }
+      `}</style>
+    </>
+  );
+};
+
+export default WalletPaymentForm;

package/src/test.md

@@ -0,0 +1,34 @@
+# This Allan Thembo
+my name is Allan Thembo i am a beginner
+for markdown i have just tried out this [Markdown Tutorial Website](http://www.markdown.com).
+
+I hope you enjoy my session
+
+## C++ Example for Recursion
+
+```c
+
+#include <iostream>
+
+int  sum(int n)
+{
+    if (n > 2 ) 
+       return n;
+    else
+       return n + sum (n-1)
+   
+}
+
+int main()
+{
+    std::count << "sum from one to 10 is "
+               << sum (10)>> std::end1
+}
+
+```
+
+## Markdown is simple but powerful way that will help me make documentation for my code
+
+I will be learning more from [Markdown Tutorial Website](httpps://www.markdowntutorial.com), and there is an [Online Markdown Editor](https://dillinger.io) i will be using in addition to tutorials.
+
+## Admin Dashboard