npm - bison-web-components - Versions diffs - 1.0.0 - Mend

bison-web-components 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (24) hide show

package/LICENSE +21 -0
package/README.md +749 -0
package/api.js +659 -0
package/bison-operator-payments.js +1913 -0
package/bison_logo.png +0 -0
package/bison_logo_green.png +0 -0
package/bison_logo_green.svg +103 -0
package/bison_logo_white.svg +68 -0
package/component.js +48 -0
package/demo-payments.html +275 -0
package/index.html +199 -0
package/operator-bank-account.js +1193 -0
package/operator-management.js +823 -0
package/operator-onboarding.js +3750 -0
package/operator-payment.js +2404 -0
package/operator-underwriting.js +1473 -0
package/package.json +14 -0
package/test.js +3 -0
package/test.mjs +3 -0
package/theme.css +312 -0
package/wio-bank-account.js +536 -0
package/wio-onboarding.js +3981 -0
package/wio-payment-linking.js +2054 -0
package/wio-payment.js +579 -0

package/demo-payments.html ADDED Viewed

@@ -0,0 +1,275 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Bison Operator Payments - Demo</title>
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
+    />
+    <style>
+      /* ── Reset ──────────────────────────────────────── */
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      /* ── Layout ─────────────────────────────────────── */
+      body {
+        font-family: "Inter", system-ui, sans-serif;
+        background: #f0f2f5;
+        min-height: 100vh;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        gap: 24px;
+        padding: 40px 20px;
+      }
+      /* ── Demo Card ──────────────────────────────────── */
+      .demo-card {
+        background: #fff;
+        border-radius: 12px;
+        padding: 24px 32px;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+        text-align: center;
+        max-width: 480px;
+        width: 100%;
+      }
+      .demo-card h1 {
+        font-size: 1.25rem;
+        font-weight: 700;
+        color: #0f2a39;
+        margin-bottom: 4px;
+      }
+      .demo-card p {
+        font-size: 0.875rem;
+        color: #5f6e78;
+        margin-bottom: 20px;
+        line-height: 1.5;
+      }
+      /* ── Attribute Controls ─────────────────────────── */
+      .demo-controls {
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+        margin-bottom: 20px;
+        text-align: left;
+      }
+      .demo-controls label {
+        font-size: 0.75rem;
+        font-weight: 600;
+        color: #5f6e78;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+      }
+      .demo-controls input {
+        width: 100%;
+        padding: 8px 12px;
+        border: 1.5px solid #e8e8e8;
+        border-radius: 8px;
+        font-size: 0.875rem;
+        font-family: ui-monospace, "SF Mono", Menlo, monospace;
+        color: #0f2a39;
+        outline: none;
+        transition:
+          border-color 0.15s ease,
+          box-shadow 0.15s ease;
+      }
+      .demo-controls input:focus {
+        border-color: #4c7b63;
+        box-shadow: 0 0 0 3px rgba(76, 123, 99, 0.15);
+      }
+      .demo-controls input::placeholder {
+        color: #b0b8c0;
+      }
+      .demo-field-row {
+        display: flex;
+        gap: 10px;
+      }
+      .demo-field-row > div {
+        flex: 1;
+      }
+      .demo-prio-tag {
+        font-size: 0.65rem;
+        font-weight: 700;
+        background: #e8f0eb;
+        color: #4c7b63;
+        padding: 1px 6px;
+        border-radius: 4px;
+        margin-left: 6px;
+        vertical-align: middle;
+      }
+      /* ── Event Log ──────────────────────────────────── */
+      .event-log {
+        max-width: 480px;
+        width: 100%;
+        background: #1e1e2e;
+        color: #cdd6f4;
+        border-radius: 12px;
+        padding: 16px 20px;
+        font-family: ui-monospace, "SF Mono", Menlo, monospace;
+        font-size: 0.72rem;
+        line-height: 1.8;
+        max-height: 260px;
+        overflow-y: auto;
+      }
+      .event-log h3 {
+        color: #a6e3a1;
+        font-size: 0.8rem;
+        margin-bottom: 8px;
+      }
+      .event-log .entry          { opacity: 0.85; }
+      .event-log .entry.success  { color: #a6e3a1; }
+      .event-log .entry.close    { color: #f9e2af; }
+      .event-log .entry.lookup   { color: #89b4fa; }
+      .event-log .entry.error    { color: #f38ba8; }
+      .event-log .entry.disabled { color: #9399b2; }
+    </style>
+  </head>
+  <body>
+    <!-- ── Demo Card ────────────────────────────────── -->
+    <div class="demo-card">
+      <h1>Operator Bank Account Mgt.</h1>
+      <p>
+        Set the operator attributes below, then click the button to open the
+        Bank Management modal. Both fields empty = component disabled.
+      </p>
+      <!-- Attribute controls -->
+      <div class="demo-controls">
+        <div>
+          <label for="input-embeddableKey">
+            x-embeddable-key <span class="demo-prio-tag" style="background:#fce7f3;color:#9d174d">REQUIRED</span>
+          </label>
+          <input id="input-embeddableKey" type="text" placeholder="Paste embeddable key…" />
+        </div>
+        <div class="demo-field-row">
+          <div>
+            <label for="input-opOrgId">
+              op-org-id <span class="demo-prio-tag">PRIORITY 1</span>
+            </label>
+            <input id="input-opOrgId" type="text" placeholder="e.g. 12345" />
+          </div>
+          <div>
+            <label for="input-orgNumber">
+              org-number
+              <span
+                class="demo-prio-tag"
+                style="background: #fef3c7; color: #92400e"
+                >PRIORITY 2</span
+              >
+            </label>
+            <input id="input-orgNumber" type="text" placeholder="e.g. ORG-001" />
+          </div>
+        </div>
+      </div>
+      <bison-operator-payments></bison-operator-payments>
+    </div>
+    <!-- ── Event Log ────────────────────────────────── -->
+    <div class="event-log" id="log">
+      <h3>Event Log</h3>
+    </div>
+    <!-- ── Scripts ──────────────────────────────────── -->
+    <script src="api.js" type="module"></script>
+    <script src="bison-operator-payments.js"></script>
+    <script type="module">
+      import { BisonJibPayAPI } from "./api.js";
+      // ── API Bootstrap ─────────────────────────────
+      const API_BASE =
+        "https://bison-backend-development-hhgrdbhcbwhahdfk.southeastasia-01.azurewebsites.net";
+      const API_KEY = "BwVEfJ2u5y2JPsX8qGxtXlIhHyhu3qU2VW2y6Nf9Qc6KTsETvr";
+      const api = new BisonJibPayAPI(API_BASE, API_KEY);
+      window.__bisonApi = api;
+      // ── DOM References ────────────────────────────
+      const comp = document.querySelector("bison-operator-payments");
+      const logEl = document.getElementById("log");
+      const inputEmbeddableKey = document.getElementById("input-embeddableKey");
+      const inputOpOrgId = document.getElementById("input-opOrgId");
+      const inputOrgNumber = document.getElementById("input-orgNumber");
+      // ── Helpers ────────────────────────────────────
+      function addLog(text, cls = "") {
+        const entry = document.createElement("div");
+        entry.className = `entry ${cls}`;
+        entry.textContent = `[${new Date().toLocaleTimeString()}] ${text}`;
+        logEl.appendChild(entry);
+        logEl.scrollTop = logEl.scrollHeight;
+      }
+      // ── Attribute Binding ─────────────────────────
+      function bindAttributeInput(inputEl, attrName) {
+        inputEl.addEventListener("input", (e) => {
+          const val = e.target.value.trim();
+          if (val) {
+            comp.setAttribute(attrName, val);
+            addLog(`SET ${attrName}="${val}"`, "lookup");
+          } else {
+            comp.removeAttribute(attrName);
+            addLog(`REMOVED ${attrName}`, "disabled");
+          }
+        });
+      }
+      bindAttributeInput(inputEmbeddableKey, "x-embeddable-key");
+      bindAttributeInput(inputOpOrgId, "op-org-id");
+      bindAttributeInput(inputOrgNumber, "org-number");
+      // ── Component Events ──────────────────────────
+      comp.addEventListener("bop-close", () => {
+        addLog("bop-close fired", "close");
+      });
+      comp.addEventListener("bop-success", (e) => {
+        const { bankName, accountType, lastFour } = e.detail;
+        addLog(
+          `bop-success → ${bankName} · ${accountType} · ••••${lastFour}`,
+          "success"
+        );
+      });
+      comp.addEventListener("bop-operator-lookup", (e) => {
+        const { status, data, error, reason } = e.detail;
+        switch (status) {
+          case "success":
+            addLog("bop-operator-lookup → SUCCESS", "success");
+            addLog(`  Data: ${JSON.stringify(data)}`, "success");
+            break;
+          case "error":
+            addLog("bop-operator-lookup → ERROR", "error");
+            addLog(`  ${JSON.stringify(error)}`, "error");
+            break;
+          case "disabled":
+            addLog(`bop-operator-lookup → DISABLED: ${reason}`, "disabled");
+            break;
+        }
+      });
+      addLog("Component ready. Set x-embeddable-key first, then op-org-id or org-number.");
+    </script>
+  </body>
+</html>

package/index.html ADDED Viewed

@@ -0,0 +1,199 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Operator Onboarding - Test</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+          "Helvetica Neue", Arial, sans-serif;
+        background: #f5f5f5;
+        padding: 20px;
+      }
+      .page-header {
+        text-align: center;
+        margin-bottom: 40px;
+        padding: 20px;
+        background: white;
+        border-radius: 8px;
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+      }
+      .page-header h1 {
+        color: #333;
+        margin-bottom: 10px;
+      }
+      .page-header p {
+        color: #666;
+        font-size: 14px;
+      }
+      .component-wrapper {
+        max-width: 900px;
+        margin: 0 auto;
+      }
+      .console-output {
+        max-width: 900px;
+        margin: 40px auto;
+        padding: 20px;
+        background: #1e1e1e;
+        color: #d4d4d4;
+        border-radius: 8px;
+        font-family: "Courier New", monospace;
+        font-size: 12px;
+        display: none;
+      }
+      .console-output.visible {
+        display: block;
+      }
+      .console-output h3 {
+        color: #4ec9b0;
+        margin-bottom: 15px;
+        font-size: 14px;
+      }
+      .console-output pre {
+        white-space: pre-wrap;
+        word-wrap: break-word;
+        line-height: 1.6;
+      }
+      .success-badge {
+        display: inline-block;
+        background: #28a745;
+        color: white;
+        padding: 4px 12px;
+        border-radius: 12px;
+        font-size: 12px;
+        margin-left: 10px;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="page-header">
+      <h1>Operator Onboarding Component</h1>
+      <p>Complete the 4-step onboarding process with validation</p>
+    </div>
+    <!-- Demo: Operator Verification -->
+    <div style="max-width: 900px; margin: 0 auto 20px; padding: 20px; background: white; border-radius: 8px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);">
+      <h3 style="margin-bottom: 10px;">Demo: Operator Verification</h3>
+      <p style="margin-bottom: 15px; color: #666; font-size: 14px;">
+        Try the <code>verifyOperator()</code> function to conditionally show the form:
+      </p>
+      <div style="display: flex; gap: 10px; margin-bottom: 10px;">
+        <input
+          type="text"
+          id="operatorIdInput"
+          placeholder="Enter Operator ID"
+          value="OP123456"
+          style="flex: 1; padding: 10px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px;"
+        />
+        <button
+          onclick="checkOperator(true)"
+          style="padding: 10px 20px; background: #28a745; color: white; border: none; border-radius: 4px; cursor: pointer; font-weight: 500;"
+        >
+          ✓ Verify (Success)
+        </button>
+        <button
+          onclick="checkOperator(false)"
+          style="padding: 10px 20px; background: #dc3545; color: white; border: none; border-radius: 4px; cursor: pointer; font-weight: 500;"
+        >
+          ✗ Verify (Fail)
+        </button>
+      </div>
+      <div id="verificationResult" style="padding: 10px; border-radius: 4px; font-size: 14px; display: none;"></div>
+    </div>
+    <div class="component-wrapper" id="onboardingContainer">
+      <!-- onSuccess callback can be set via attribute -->
+      <operator-onboarding on-success="handleOnboardingSuccess"></operator-onboarding>
+    </div>
+    <!-- Load the component -->
+    <script src="component.js"></script>
+    <script>
+      // Demo function to test verifyOperator
+      function checkOperator(shouldPass) {
+        const operatorId = document.getElementById('operatorIdInput').value;
+        const resultDiv = document.getElementById('verificationResult');
+        const container = document.getElementById('onboardingContainer');
+        if (!operatorId) {
+          resultDiv.style.display = 'block';
+          resultDiv.style.background = '#fff3cd';
+          resultDiv.style.color = '#856404';
+          resultDiv.style.border = '1px solid #ffeeba';
+          resultDiv.innerHTML = '⚠️ Please enter an Operator ID';
+          return;
+        }
+        // Call the verifyOperator function
+        const isVerified = verifyOperator(operatorId, shouldPass);
+        // Show result
+        resultDiv.style.display = 'block';
+        if (isVerified) {
+          resultDiv.style.background = '#d4edda';
+          resultDiv.style.color = '#155724';
+          resultDiv.style.border = '1px solid #c3e6cb';
+          resultDiv.innerHTML = `✅ Operator <strong>${operatorId}</strong> is verified! Showing onboarding form below.`;
+          // Show the onboarding form
+          container.style.display = 'block';
+        } else {
+          resultDiv.style.background = '#f8d7da';
+          resultDiv.style.color = '#721c24';
+          resultDiv.style.border = '1px solid #f5c6cb';
+          resultDiv.innerHTML = `❌ Operator <strong>${operatorId}</strong> is not verified. Onboarding form is hidden.`;
+          // Hide the onboarding form
+          container.style.display = 'none';
+        }
+      }
+      // Define the onSuccess callback in global scope
+      function handleOnboardingSuccess(data) {
+        console.log("✅ onSuccess callback received:", data);
+        alert(`Onboarding complete for ${data.businessDetails.businessName}!\n\nIn a real application, you would close the modal here.`);
+      }
+      // Wait for DOM to be ready
+      document.addEventListener("DOMContentLoaded", () => {
+        const form = document.querySelector("operator-onboarding");
+        // Option 1: Set callback via attribute (function name as string)
+        // Already set in HTML: on-success="handleOnboardingSuccess"
+        // Option 2: Set callback programmatically (alternative approach)
+        // Uncomment to use programmatic approach instead:
+        // form.setOnSuccess((data) => {
+        //   console.log("Programmatic callback:", data);
+        //   alert(`Success! ${data.businessDetails.businessName} is onboarded.`);
+        // });
+        // Also listen for the formComplete event (optional)
+        form.addEventListener("formComplete", (event) => {
+          console.log("Form Complete Event Received:", event.detail);
+        });
+        console.log("✅ Operator Onboarding Component Initialized");
+        console.log("📝 Complete the form to see the success page!");
+      });
+    </script>
+  </body>
+</html>