pay-sdk-web10 1.0.1

package/dist/dist/WalletPaymentForm.css

@@ -0,0 +1 @@
+

package/git_push.sh

@@ -0,0 +1,32 @@
+#!/bin/bash
+
+# Make sure we're in the correct Git repository folder
+echo "Please navigate to your Git repository folder first!"
+
+# Get the current directory
+current_dir=$(pwd)
+
+# Check if it's a Git repository
+if [ ! -d "$current_dir/.git" ]; then
+  echo "This is not a Git repository. Exiting..."
+  exit 1
+fi
+
+# Ask for commit message
+echo "Enter commit message: "
+read commit_message
+
+# Stage changes
+echo "Staging changes..."
+git add .
+
+# Commit changes
+echo "Committing changes with message: '$commit_message'"
+git commit -m "$commit_message"
+
+# Push changes to the main branch (or replace with your branch name)
+echo "Pushing changes to GitHub..."
+git push origin main
+
+# Output success message
+echo "Changes pushed successfully to GitHub."

package/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "pay-sdk-web10", 
+  "version": "1.0.1",
+  "description": "A wallet payment form component with live API verification",
+  "main": "dist/WalletPaymentForm.js",
+  "type": "module",
+ "scripts": {
+  "build": "rollup -c",
+  "start": "rollup -c --watch",
+  "prepublishOnly": "npm run build"
+}
+,
+  "keywords": [
+    "wallet",
+    "payment",
+    "react"
+  ],
+  "author": "Allan Bravo",
+  "license": "MIT",
+  "peerDependencies": {
+    "react": "^18.3.1",
+    "react-icons": "^5.0.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.24.0",
+    "@babel/preset-react": "^7.23.3",
+    "@rollup/plugin-babel": "^6.0.4",
+    "@rollup/plugin-commonjs": "^25.0.7",
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@rollup/plugin-url": "^8.0.2",
+    "rollup": "^4.9.6",
+    "rollup-plugin-copy": "^3.5.0",
+    "rollup-plugin-css-only": "^4.5.2",
+    "rollup-plugin-node-polyfills": "^0.2.1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Bravothe/payment-library.git"
+  },
+  "dependencies": {
+    "@esbuild-plugins/node-globals-polyfill": "^0.2.3",
+    "react-dom": "^18.3.1"
+  }
+}

package/postcss.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+    plugins: {
+      tailwindcss: {},
+      autoprefixer: {},
+    },
+  };
+  

package/rollup.config.js

@@ -0,0 +1,43 @@
+import resolve from '@rollup/plugin-node-resolve';
+import commonjs from '@rollup/plugin-commonjs';
+import babel from '@rollup/plugin-babel';
+import css from 'rollup-plugin-css-only';
+import url from '@rollup/plugin-url';
+import { NodeGlobalsPolyfillPlugin } from '@esbuild-plugins/node-globals-polyfill';
+
+export default {
+  input: 'src/WalletPaymentForm.js',
+  output: [
+    {
+      file: 'dist/WalletPaymentForm.esm.js',
+      format: 'esm',
+    },
+    {
+      file: 'dist/WalletPaymentForm.umd.js',
+      format: 'umd',
+      name: 'WalletPaymentForm',
+    },
+  ],
+  plugins: [
+    babel({
+      babelHelpers: 'bundled',
+      presets: ['@babel/preset-react'],
+      extensions: ['.js', '.jsx'],
+    }),
+    resolve(),
+    commonjs(),
+    css({ output: 'dist/WalletPaymentForm.css' }),
+    url({
+      include: ['**/*.jpg', '**/*.png', '**/*.gif'],
+      limit: 0,
+      destDir: 'dist',
+      publicPath: '',
+      fileName: '[name][extname]',
+    }),
+    NodeGlobalsPolyfillPlugin({
+      process: true,
+      buffer: true,
+    }),
+  ],
+  external: ['react', 'react-dom'],
+};

package/src/EnterPasscode.js

@@ -0,0 +1,295 @@
+import React from 'react';
+import { IoEye, IoEyeOff } from 'react-icons/io5';
+
+const EnterPasscode = ({ passcode, setPasscode, showPasscode, setShowPasscode, transactionDetails, onSubmit, onBack }) => {
+  const renderHeader = () => (
+    <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>
+  );
+
+  return (
+    <>
+      <div className="passcode-popup">
+        {renderHeader()}
+        <div className="merchant-header">Merchant Info :</div>
+        <div className="merchant-details">
+          <div className="merchant-left">
+            <div className="merchant-info">
+              <div className="merchant-name">Airbnb</div>
+              <div className="merchant-id">W-123456789</div>
+            </div>
+          </div>
+          <div className="merchant-amount">
+            <strong>UGX {transactionDetails.totalBilling.toFixed(2)}</strong>
+          </div>
+        </div>
+        <div className="passcode-section">
+          <label htmlFor="passcode">Enter Passcode</label>
+          <div className="passcode-input">
+            <input
+              type={showPasscode ? "text" : "password"}
+              id="passcode"
+              value={passcode}
+              onChange={(e) => setPasscode(e.target.value)}
+              placeholder="••••••"
+              maxLength="6"
+            />
+            <span className="toggle-visibility" onClick={() => setShowPasscode(!showPasscode)}>
+              {showPasscode ? <IoEye /> : <IoEyeOff />}
+            </span>
+          </div>
+        </div>
+        <div className="transaction-details">
+          <p>
+            You are making a payment to <strong>Acorn International School</strong> and an amount of
+            <strong> UGX {transactionDetails.totalBilling.toFixed(2)}</strong> will be deducted off your wallet, including:
+            <br />
+            <strong>0.5% Tax:</strong> UGX {(transactionDetails.totalBilling * 0.005).toFixed(2)}
+            <br />
+            <strong>0.5% Wallet Fee:</strong> UGX {(transactionDetails.totalBilling * 0.005).toFixed(2)}
+          </p>
+        </div>
+        <div className="buttons-container">
+          <button onClick={onSubmit} className="confirm-button" disabled={!passcode}>
+            Confirm Payment
+          </button>
+          <button onClick={onBack} className="back-button" style={{ marginTop: '15px' }}>
+            Back
+          </button>
+        </div>
+      </div>
+      <style>{`
+        .passcode-popup {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          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;
+          z-index: 1001;
+          position: relative;
+          pointer-events: auto;
+        }
+
+        .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;
+        }
+
+        .merchant-header {
+          font-size: 1.2em;
+          font-weight: bold;
+          color: #02CD8D;
+          text-align: left;
+          margin-bottom: 10px;
+          width: 100%;
+        }
+
+        .merchant-details {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          background: #f9f9f9;
+          padding: 12px;
+          border-radius: 8px;
+          margin-bottom: 15px;
+          width: 100%;
+        }
+
+        .merchant-left {
+          display: flex;
+          align-items: center;
+        }
+
+        .merchant-info {
+          display: flex;
+          flex-direction: column;
+          text-align: left;
+        }
+
+        .merchant-name {
+          font-size: 1em;
+          font-weight: bold;
+        }
+
+        .merchant-id {
+          font-size: 0.9em;
+          color: #666;
+        }
+
+        .merchant-amount {
+          text-align: right;
+        }
+
+        .merchant-amount strong {
+          font-size: 1.2em;
+          font-weight: bold;
+          color: #000;
+        }
+
+        .passcode-section {
+          text-align: left;
+          margin-bottom: 20px;
+          width: 100%;
+        }
+
+        .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;
+        }
+
+        .transaction-details {
+          display: flex;
+          align-items: flex-start;
+          background: #e0f0ff;
+          padding: 12px;
+          border-radius: 8px;
+          text-align: left;
+          width: 100%;
+          margin-bottom: 20px;
+        }
+
+        .transaction-details p {
+          font-size: 1em;
+          color: #000;
+          line-height: 1.5;
+          margin: 0;
+        }
+
+        .buttons-container {
+          width: 100%;
+        }
+
+        .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:disabled {
+          background: #ddd;
+          cursor: not-allowed;
+        }
+
+        .confirm-button:hover:not(:disabled) {
+          background: #0056b3;
+        }
+
+        .back-button {
+          width: 100%;
+          background: white;
+          border: 2px solid red;
+          color: red;
+          padding: 10px 15px;
+          border-radius: 5px;
+          font-size: 1em;
+          cursor: pointer;
+          transition: all 0.3s ease;
+        }
+
+        .back-button:hover {
+          background: white;
+          color: red;
+          border-color: red;
+        }
+      `}</style>
+    </>
+  );
+};
+
+export default EnterPasscode;

package/src/HasAccountSummary.js

@@ -0,0 +1,168 @@
+import React from 'react';
+
+const HasAccountSummary = ({ onClose }) => {
+  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>
+          <button className="close-btn" onClick={onClose}>
+            <span>×</span>
+          </button>
+        </div>
+        <div className="error-content">
+          <div className="message-container">
+            <div className="info-icon">i</div>
+            <div className="message-text">
+              <h3>EVzone requires you to sign in to proceed with this transaction</h3>
+            </div>
+          </div>
+          <button onClick={onClose} className="submit-button">Sign in</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;
+          position: relative;
+          pointer-events: auto;
+        }
+
+        .popup-header {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          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;
+          text-align: left;
+          flex-grow: 1;
+        }
+
+        .popup-header .evzone {
+          color: #0a0a0a;
+        }
+
+        .popup-header .pay {
+          color: #0a0a0a;
+        }
+
+        .close-btn {
+          background: none;
+          border: none;
+          font-size: 1.5em;
+          color: #ff5a5f;
+          cursor: pointer;
+        }
+
+        .error-content {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          padding: 20px;
+          background-color: #fff;
+          border-radius: 8px;
+        }
+
+        .message-container {
+          display: flex;
+          align-items: center;
+          width: 100%;
+          margin-bottom: 20px;
+          background-color: #e0f7fa;
+          border-radius: 10px;
+          padding: 10px 15px;
+        }
+
+        .info-icon {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          width: 40px;
+          height: 40px;
+          background-color: #b3e5fc;
+          color: #0288d1;
+          border-radius: 50%;
+          font-size: 24px;
+          font-weight: bold;
+          margin-right: 15px;
+        }
+
+        .message-text {
+          flex: 1;
+        }
+
+        .message-text h3 {
+          font-size: 1.2em;
+          margin: 0;
+          color: #333;
+          font-weight: 500;
+        }
+
+        .submit-button {
+          background-color: #0288d1;
+          color: #fff;
+          border: none;
+          border-radius: 5px;
+          padding: 10px 20px;
+          font-size: 1em;
+          font-weight: 500;
+          cursor: pointer;
+          transition: background-color 0.3s ease;
+          width: 100%;
+          max-width: 200px;
+        }
+
+        .submit-button:hover {
+          background-color: #0277bd;
+        }
+      `}</style>
+    </>
+  );
+};
+
+export default HasAccountSummary;