@test-glide/glide-payment 0.0.2 → 0.0.3

package/dist/index.es.js

@@ -1,21 +1,21 @@
-function p(n, e = {}) {
-  const t = document.createElement(n), { className: l, id: r, innerHTML: h, textContent: o, attributes: c, styles: d, dataset: a, children: i, events: m } = e;
+function u(n, e = {}) {
+  const t = document.createElement(n), { className: l, id: a, innerHTML: h, textContent: i, attributes: c, styles: p, dataset: s, children: r, events: m } = e;
   if (l) {
-    const u = Array.isArray(l) ? l : l.split(" ");
-    t.classList.add(...u.filter(Boolean));
+    const d = Array.isArray(l) ? l : l.split(" ");
+    t.classList.add(...d.filter(Boolean));
   }
-  if (r && (t.id = r), h && (t.innerHTML = h), o && (t.textContent = o), c)
-    for (const [u, s] of Object.entries(c))
-      s && t.setAttribute(u, s);
-  if (d)
-    for (const [u, s] of Object.entries(d))
-      t.style[u] = s;
-  if (a)
-    for (const [u, s] of Object.entries(a))
-      t.dataset[u] = s;
-  if (i && t.append(...i.filter(Boolean)), m)
-    for (const [u, s] of Object.entries(m))
-      t.addEventListener(u, s);
+  if (a && (t.id = a), h && (t.innerHTML = h), i && (t.textContent = i), c)
+    for (const [d, o] of Object.entries(c))
+      o && t.setAttribute(d, o);
+  if (p)
+    for (const [d, o] of Object.entries(p))
+      t.style[d] = o;
+  if (s)
+    for (const [d, o] of Object.entries(s))
+      t.dataset[d] = o;
+  if (r && t.append(...r.filter(Boolean)), m)
+    for (const [d, o] of Object.entries(m))
+      t.addEventListener(d, o);
   return t;
 }
 function x(n, e) {
@@ -25,25 +25,25 @@ function x(n, e) {
     return;
   }
   for (const l of t) {
-    const { styles: r, attributes: h, dataset: o, innerHTML: c, textContent: d, className: a } = e;
-    if (r)
-      for (const [i, m] of Object.entries(r))
-        l.style[i] = m;
+    const { styles: a, attributes: h, dataset: i, innerHTML: c, textContent: p, className: s } = e;
+    if (a)
+      for (const [r, m] of Object.entries(a))
+        l.style[r] = m;
     if (h)
-      for (const [i, m] of Object.entries(h))
-        l.setAttribute(i, m);
-    if (o)
-      for (const [i, m] of Object.entries(o))
-        l.dataset[i] = m;
-    if (c !== void 0 && (l.innerHTML = c), d !== void 0 && (l.textContent = d), a?.add) {
-      const i = Array.isArray(a.add) ? a.add : [a.add];
-      l.classList.add(...i);
+      for (const [r, m] of Object.entries(h))
+        l.setAttribute(r, m);
+    if (i)
+      for (const [r, m] of Object.entries(i))
+        l.dataset[r] = m;
+    if (c !== void 0 && (l.innerHTML = c), p !== void 0 && (l.textContent = p), s?.add) {
+      const r = Array.isArray(s.add) ? s.add : [s.add];
+      l.classList.add(...r);
     }
-    if (a?.remove) {
-      const i = Array.isArray(a.remove) ? a.remove : [a.remove];
-      l.classList.remove(...i);
+    if (s?.remove) {
+      const r = Array.isArray(s.remove) ? s.remove : [s.remove];
+      l.classList.remove(...r);
     }
-    a?.toggle && (Array.isArray(a.toggle) ? a.toggle : [a.toggle]).forEach((m) => l.classList.toggle(m));
+    s?.toggle && (Array.isArray(s.toggle) ? s.toggle : [s.toggle]).forEach((m) => l.classList.toggle(m));
   }
 }
 const Q = `
@@ -93,21 +93,21 @@ const Q = `
   ></path>
 </svg>`, k = `
 <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256"><path d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm16-40a8,8,0,0,1-8,8,16,16,0,0,1-16-16V128a8,8,0,0,1,0-16,16,16,0,0,1,16,16v40A8,8,0,0,1,144,176ZM112,84a12,12,0,1,1,12,12A12,12,0,0,1,112,84Z"></path></svg>  
-`, te = ({ children: n, onClick: e, disabled: t = !1, size: l = "medium", type: r = "button", className: h = "", variant: o = "primary" }) => {
-  const c = p("span", {
+`, te = ({ children: n, onClick: e, disabled: t = !1, size: l = "medium", type: a = "button", className: h = "", variant: i = "primary" }) => {
+  const c = u("span", {
     className: "button-spinner",
     innerHTML: X,
     dataset: { show: "false" }
-  }), d = p("span", {
+  }), p = u("span", {
     className: "button-label",
     children: [
       null
     ],
     textContent: n
-  }), a = p("button", {
-    className: `custom-button ${o} ${l} ${h}`,
+  }), s = u("button", {
+    className: `custom-button ${i} ${l} ${h}`,
     attributes: {
-      type: r,
+      type: a,
       ...t ? { disabled: "true" } : {}
     },
     events: {
@@ -115,23 +115,23 @@ const Q = `
     },
     children: [
       c,
-      d
+      p
     ]
-  }), i = (u = !1) => {
+  }), r = (d = !1) => {
     x({ element: c }, {
-      dataset: { show: String(u) }
-    }), m(u);
-  }, m = (u = !1) => {
-    u ? a.setAttribute("disabled", "true") : a.removeAttribute("disabled");
+      dataset: { show: String(d) }
+    }), m(d);
+  }, m = (d = !1) => {
+    d ? s.setAttribute("disabled", "true") : s.removeAttribute("disabled");
   };
   return {
-    element: a,
-    setLoading: i,
+    element: s,
+    setLoading: r,
     setDisabled: m
   };
-}, ne = ({ content: n, position: e = "top", delay: t = 200, maxWidth: l = 250, className: r = "", id: h = "" }) => {
-  var o = p("div", {
-    className: `tooltip ${e} ${r}`,
+}, ne = ({ content: n, position: e = "top", delay: t = 200, maxWidth: l = 250, className: a = "", id: h = "" }) => {
+  var i = u("div", {
+    className: `tooltip ${e} ${a}`,
     styles: {
       // top: `${tooltipPosition.top}px`,
       // left: `${tooltipPosition.left}px`,
@@ -147,71 +147,71 @@ const Q = `
     `
   });
   let c = null;
-  var i = p("span", {
+  var r = u("span", {
     className: "tooltip-trigger",
     innerHTML: k,
     events: {
       mouseenter: () => {
         t > 0 ? c = window.setTimeout(() => {
-          o.dataset.show = "true", m();
-        }, t) : (o.dataset.show = "true", m());
+          i.dataset.show = "true", m();
+        }, t) : (i.dataset.show = "true", m());
       },
       mouseleave: () => {
-        c && clearTimeout(c), o.dataset.show = "false";
+        c && clearTimeout(c), i.dataset.show = "false";
       }
     }
   });
   function m() {
-    if (!i || !o) return;
-    const s = i.getBoundingClientRect(), v = o.getBoundingClientRect(), y = 8;
+    if (!r || !i) return;
+    const o = r.getBoundingClientRect(), v = i.getBoundingClientRect(), y = 8;
     let w, g;
     switch (e) {
       case "top":
-        w = s.top - v.height - y, g = s.left + s.width / 2 - v.width / 2;
+        w = o.top - v.height - y, g = o.left + o.width / 2 - v.width / 2;
         break;
       case "bottom":
-        w = s.bottom + y, g = s.left + s.width / 2 - v.width / 2;
+        w = o.bottom + y, g = o.left + o.width / 2 - v.width / 2;
         break;
       case "left":
-        w = s.top + s.height / 2 - v.height / 2, g = s.left - v.width - y;
+        w = o.top + o.height / 2 - v.height / 2, g = o.left - v.width - y;
         break;
       case "right":
-        w = s.top + s.height / 2 - v.height / 2, g = s.right + y;
+        w = o.top + o.height / 2 - v.height / 2, g = o.right + y;
         break;
       default:
-        w = s.top - v.height - y, g = s.left + s.width / 2 - v.width / 2;
+        w = o.top - v.height - y, g = o.left + o.width / 2 - v.width / 2;
     }
     const N = window.innerWidth, M = window.innerHeight;
-    g < 0 && (g = y), g + v.width > N && (g = N - v.width - y), w < 0 && (w = y), w + v.height > M && (w = M - v.height - y), o.style.top = `${w}px`, o.style.left = `${g}px`;
+    g < 0 && (g = y), g + v.width > N && (g = N - v.width - y), w < 0 && (w = y), w + v.height > M && (w = M - v.height - y), i.style.top = `${w}px`, i.style.left = `${g}px`;
   }
-  return p("div", {
+  return u("div", {
     className: "tooltip-wrapper",
     id: `tooltip-${h}`,
     children: [
-      i,
-      o
+      r,
+      i
     ]
   });
 }, se = (n) => {
   const e = {}, t = Object.values(n).every(
-    (r) => !r || r.trim() === ""
+    (a) => !a || a.trim() === ""
   ), l = n.cardNumber?.replace(/\s/g, "");
   if (l ? /^\d{13,19}$/.test(l) || (e.cardNumber = "Card number must be 13-19 digits") : e.cardNumber = "Card number is required", !n.expiryDate)
     e.expiryDate = "Expiry date is required";
   else {
-    const r = n.expiryDate.replace(/\D/g, "");
-    if (r.length < 4)
+    const a = n.expiryDate.replace(/\D/g, "");
+    if (a.length < 4)
       e.expiryDate = "Enter complete expiry date (MM/YY)";
     else {
-      const h = parseInt(r.substring(0, 2), 10), o = parseInt(r.substring(2, 4), 10);
+      const h = parseInt(a.substring(0, 2), 10), i = parseInt(a.substring(2, 4), 10);
       if (isNaN(h) || h < 1 || h > 12)
         e.expiryDate = "Invalid month (must be 01-12)";
-      else if (isNaN(o) || o < 0 || o > 99)
+      else if (isNaN(i) || i < 0 || i > 99)
         e.expiryDate = "Invalid year";
       else {
-        const c = /* @__PURE__ */ new Date(), d = c.getFullYear(), a = c.getMonth() + 1, i = Math.floor(d / 100) * 100, m = i + o, u = i + 100 + o;
-        let s;
-        m >= d && m <= d + 20 ? s = m : (u >= d && u <= d + 20, s = u), s < d || s === d && h < a ? e.expiryDate = "Card has expired" : s > d + 20 && (e.expiryDate = "Expiry year is too far in the future");
+        const c = /* @__PURE__ */ new Date(), p = c.getFullYear(), s = c.getMonth() + 1, r = Math.floor(p / 100) * 100, m = r + i, d = r + 100 + i;
+        let o;
+        m >= p && m <= p + 20 ? o = m : (d >= p && d <= p + 20, o = d), o < p || o === p && h < s ? e.expiryDate = "Card has expired" : o > p + 20 && (e.expiryDate = "Expiry year is too far in the future");
       }
     }
   }
@@ -225,8 +225,8 @@ function re(n) {
   const e = parseInt(n, 10);
   if (isNaN(e) || e < 0 || e > 99) return null;
   const t = (/* @__PURE__ */ new Date()).getFullYear(), l = Math.floor(t / 100) * 100;
-  let r = l + e;
-  return r >= t && r <= t + 20 || (r = l + 100 + e, r >= t && r <= t + 20) ? r : l + 100 + e;
+  let a = l + e;
+  return a >= t && a <= t + 20 || (a = l + 100 + e, a >= t && a <= t + 20) ? a : l + 100 + e;
 }
 function V(n = "") {
   return n.trim().replaceAll(/\s/g, "").replaceAll("-", "");
@@ -250,56 +250,56 @@ const oe = {
 function ae(n, e) {
   return e === "none" ? n : oe[e](n);
 }
-const $ = ({ label: n, maskType: e, id: t, name: l, type: r = "text", placeholder: h = "Enter value", tooltip: o = "", onChange: c }) => {
-  const d = ["card", "expiry", "phone", "cvv", "zip"].includes(e) ? "numeric" : "", a = p("label", {
+const $ = ({ label: n, maskType: e, id: t, name: l, type: a = "text", placeholder: h = "Enter value", tooltip: i = "", onChange: c }) => {
+  const p = ["card", "expiry", "phone", "cvv", "zip"].includes(e) ? "numeric" : "", s = u("label", {
     className: "input-label",
     innerHTML: n,
     attributes: {
       for: t
     }
   });
-  let i = !1;
-  const u = p("input", {
+  let r = !1;
+  const d = u("input", {
     id: t || "input-id",
     className: "styled-input",
     attributes: {
       placeholder: h,
-      type: r,
-      inputMode: d,
+      type: a,
+      inputMode: p,
       name: l
     },
     events: {
-      input: s,
+      input: o,
       blur: v,
       keydown: (b) => {
-        b.key === "Enter" && (i = !0);
+        b.key === "Enter" && (r = !0);
       }
     }
   });
-  function s(b) {
+  function o(b) {
     const D = e !== "none" ? ae(b?.target?.value, e) : b?.target?.value;
-    u.value = D, c?.(D);
+    d.value = D, c?.(D);
   }
   function v() {
-    i = !0, c?.(u?.value || "");
+    r = !0, c?.(d?.value || "");
   }
-  const y = p("div", {
+  const y = u("div", {
     className: "input-loader",
     innerHTML: '<div class="loader"></div>',
     dataset: { show: "false" }
-  }), w = o ? p("div", {
+  }), w = i ? u("div", {
     className: "input-right-element",
     children: [
-      ne({ content: o, id: t })
+      ne({ content: i, id: t })
     ]
-  }) : null, g = p("div", {
+  }) : null, g = u("div", {
     className: "input-wrapper",
     children: [
-      u,
+      d,
       y,
       w
     ]
-  }), N = p("div", {
+  }), N = u("div", {
     className: "error-message",
     dataset: { show: "false" },
     innerHTML: `
@@ -308,10 +308,10 @@ const $ = ({ label: n, maskType: e, id: t, name: l, type: r = "text", placeholde
     `
   });
   return {
-    element: p("div", {
+    element: u("div", {
       className: "custom-input-group",
       children: [
-        a,
+        s,
         g,
         N
       ]
@@ -319,7 +319,7 @@ const $ = ({ label: n, maskType: e, id: t, name: l, type: r = "text", placeholde
     setLoading: (b) => {
       x({ element: g }, {
         dataset: { loading: b ? "true" : "false" }
-      }), x({ element: u }, {
+      }), x({ element: d }, {
         attributes: { disabled: b ? "true" : "false" }
       }), x({ element: y }, {
         dataset: { show: b ? "true" : "false" }
@@ -327,9 +327,9 @@ const $ = ({ label: n, maskType: e, id: t, name: l, type: r = "text", placeholde
     },
     setError: (b = "") => {
       x({ element: g }, {
-        className: b && i ? { add: "input-error" } : { remove: "input-error" }
+        className: b && r ? { add: "input-error" } : { remove: "input-error" }
       }), x({ element: N }, {
-        dataset: { show: b && i ? "true" : "false" },
+        dataset: { show: b && r ? "true" : "false" },
         innerHTML: `
       ${k}
       <span>${b || ""}</span>
@@ -338,9 +338,9 @@ const $ = ({ label: n, maskType: e, id: t, name: l, type: r = "text", placeholde
     }
   };
 }, ie = async (n, e = {}) => {
-  const { method: t = "GET", headers: l = {}, body: r = null, ...h } = e;
+  const { method: t = "GET", headers: l = {}, body: a = null, ...h } = e;
   try {
-    const o = {
+    const i = {
       method: t,
       headers: {
         Accept: "*/*",
@@ -349,78 +349,78 @@ const $ = ({ label: n, maskType: e, id: t, name: l, type: r = "text", placeholde
       },
       ...h
     };
-    r && ["POST", "PUT", "PATCH", "DELETE"].includes(t.toUpperCase()) && (o.body = typeof r == "string" ? r : JSON.stringify(r));
-    const c = await fetch(n, o), d = c.headers.get("content-type");
-    let a;
-    if (d?.includes("application/json") ? a = await c.json() : a = await c.text(), !c.ok) {
-      const i = a;
+    a && ["POST", "PUT", "PATCH", "DELETE"].includes(t.toUpperCase()) && (i.body = typeof a == "string" ? a : JSON.stringify(a));
+    const c = await fetch(n, i), p = c.headers.get("content-type");
+    let s;
+    if (p?.includes("application/json") ? s = await c.json() : s = await c.text(), !c.ok) {
+      const r = s;
       throw new Error(
-        i?.message || `HTTP error! status: ${c.status}`
+        r?.message || `HTTP error! status: ${c.status}`
       );
     }
-    return { data: a, error: null };
-  } catch (o) {
-    return { data: null, error: o instanceof Error ? o.message : "An error occurred" };
+    return { data: s, error: null };
+  } catch (i) {
+    return { data: null, error: i instanceof Error ? i.message : "An error occurred" };
   }
 }, le = ({
   title: n = "",
   children: e,
   onClose: t,
   showBackBtn: l = !1,
-  showCloseBtn: r = !0
+  showCloseBtn: a = !0
 }) => {
-  const h = p("button", {
+  const h = u("button", {
     className: "back-btn",
     innerHTML: ee,
     dataset: { show: String(l) },
     events: { click: () => m() }
-  }), o = p("h3", {
+  }), i = u("h3", {
     textContent: n
-  }), c = p("button", {
+  }), c = u("button", {
     className: "close-btn",
     innerHTML: "&times;",
-    dataset: { show: String(r) },
+    dataset: { show: String(a) },
     attributes: { "aria-label": "Close modal" },
     events: { click: () => m() }
-  }), d = p("div", {
+  }), p = u("div", {
     className: "modal-header",
-    children: [h, o, c]
-  }), a = p("div", {
+    children: [h, i, c]
+  }), s = u("div", {
     className: "modal-content",
     children: [e]
-  }), i = p("dialog", {
+  }), r = u("dialog", {
     className: "custom-modal",
-    children: [d, a],
+    children: [p, s],
     events: {
-      cancel: (s) => {
-        s.preventDefault(), m();
+      cancel: (o) => {
+        o.preventDefault(), m();
       }
     }
   }), m = () => {
-    i.close(), t?.();
+    r.close(), t?.();
   };
   return {
-    element: i,
-    setModalVisibility: (s) => {
-      s ? i.showModal() : i.close();
+    element: r,
+    setModalVisibility: (o) => {
+      o ? r.showModal() : r.close();
     }
   };
-}, ce = ({ token: n, endpoint: e, beneficiaryCard: t = !1, isModal: l = !1, onCallback: r = () => null }) => {
-  const h = t ? "Enter Recipient Debit Card Details" : "Enter Your Debit Card Details", o = t ? "Enter the debit card details of the recipient you're sending funds to." : "Linking an external account allows you to send and receive money to your account.", c = t ? "Debit Card Number" : "Your Debit Card Number", d = t ? "Enter recipient's card number" : "Enter your card number", a = `add-card-form-wrapper${t ? " recipient-form" : ""}`, i = {
+}, ce = ({ token: n, endpoint: e, beneficiaryCard: t = !1, isModal: l = !1, onCallback: a = () => null }) => {
+  const h = t ? "Enter Recipient Debit Card Details" : "Enter Your Debit Card Details", i = t ? "Enter the debit card details of the recipient you're sending funds to." : "Linking an external account allows you to send and receive money to your account.", c = t ? "Debit Card Number" : "Your Debit Card Number", p = t ? "Enter recipient's card number" : "Enter your card number", s = `add-card-form-wrapper${t ? " recipient-form" : ""}`, r = {
     cardNumber: "",
     expiryDate: "",
     cvv: "",
     zipCode: ""
-  }, { element: m, setError: u } = $({
+  }, { element: m, setError: d } = $({
     label: c,
-    placeholder: d,
+    placeholder: p,
     id: "card-number-input",
     name: "cardNumber",
     maskType: "card",
     onChange(f) {
-      L("cardNumber", f, u);
+      L("cardNumber", f, d);
     }
-  }), { element: s, setError: v } = $({
+  }), { element: o, setError: v } = $({
     label: "Expiration Date",
     placeholder: "MM/YY",
     id: "expiry-input",
@@ -449,10 +449,10 @@ const $ = ({ label: n, maskType: e, id: t, name: l, type: r = "text", placeholde
     onChange(f) {
       L("zipCode", f, N);
     }
-  }), M = p("div", {
+  }), M = u("div", {
     className: t ? "input-sections" : "inputs",
-    children: [m, s, y, g]
-  }), A = p("p", {
+    children: [m, o, y, g]
+  }), A = u("p", {
     className: "submit-error",
     dataset: { show: "false" }
     // innerHTML: `//icon`
@@ -472,11 +472,11 @@ const $ = ({ label: n, maskType: e, id: t, name: l, type: r = "text", placeholde
     b(f), D(f);
   };
   function L(f, H, E) {
-    i[f] = H;
-    const { isValid: I, errors: T } = se(i);
+    r[f] = H;
+    const { isValid: I, errors: T } = se(r);
     T[f] ? E(T[f]) : E(""), b(!I);
   }
-  const O = p("div", {
+  const O = u("div", {
     className: "submit-button-wrapper",
     children: [A, j]
   });
@@ -499,9 +499,9 @@ const $ = ({ label: n, maskType: e, id: t, name: l, type: r = "text", placeholde
         }
       }
     });
-    C.error ? (console.error("Request failed:", C.error), B(!1), z(C.error), r?.({ success: !1, error: C.error })) : (console.log("Request success:", C.data), B(!1), r?.({ success: !0, data: C.data }));
+    C.error ? (console.error("Request failed:", C.error), B(!1), z(C.error), a?.({ success: !1, error: C.error })) : (console.log("Request success:", C.data), B(!1), a?.({ success: !0, data: C.data }));
   }
-  const Z = () => p("form", {
+  const Z = () => u("form", {
     events: {
       submit: P
     },
@@ -509,10 +509,10 @@ const $ = ({ label: n, maskType: e, id: t, name: l, type: r = "text", placeholde
       M,
       O
     ]
-  }), W = () => p("div", {
+  }), W = () => u("div", {
     className: "form-title",
     innerHTML: `
-    <p>${o}</p>
+    <p>${i}</p>
 
     <div>
       ${Q}
@@ -520,13 +520,13 @@ const $ = ({ label: n, maskType: e, id: t, name: l, type: r = "text", placeholde
       <span>Secured with 256-bit encryption</span>
     </div>
     `
-  }), Y = () => p("div", {
+  }), Y = () => u("div", {
     className: l ? "" : "non-modal-content",
     children: [W(), Z()]
-  }), q = l ? null : p("div", {
-    className: `${a} non-modal`,
+  }), q = l ? null : u("div", {
+    className: `${s} non-modal`,
     children: [
-      p("div", {
+      u("div", {
         className: "non-modal-header",
         innerHTML: `
         <span></span>
@@ -540,8 +540,8 @@ const $ = ({ label: n, maskType: e, id: t, name: l, type: r = "text", placeholde
   } };
   function R() {
     F && (document.body.appendChild(
-      p("div", {
-        className: a,
+      u("div", {
+        className: s,
         children: [F]
       })
     ), S(!0));
@@ -552,24 +552,24 @@ const $ = ({ label: n, maskType: e, id: t, name: l, type: r = "text", placeholde
     closeModal: () => S(!1)
   };
 };
-function de({ token: n, endpoint: e, beneficiaryCard: t, isModal: l, onCallback: r }) {
-  const { renderFormWithModal: h, nonModalForm: o, closeModal: c } = ce({
+function de({ token: n, endpoint: e, beneficiaryCard: t, isModal: l, onCallback: a, onModalClose: h }) {
+  const { renderFormWithModal: i, nonModalForm: c, closeModal: p } = ce({
     token: n,
     endpoint: e,
     beneficiaryCard: t,
     isModal: l,
-    onCallback: r
+    onCallback: a
   });
   return {
-    mount(d) {
-      const a = "className" in d ? document.querySelector(d.className) : "id" in d ? document.getElementById(d.id) : d.element;
-      a && o && a.appendChild(o);
+    mount(s) {
+      const r = "className" in s ? document.querySelector(s.className) : "id" in s ? document.getElementById(s.id) : s.element;
+      r && c && r.appendChild(c);
     },
     open() {
-      h();
+      i();
     },
     destroy() {
-      c();
+      p(), h?.();
     }
   };
 }