@test-glide/glide-payment 0.0.4 → 0.0.5
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.
- package/dist/index.cjs.js +11 -11
- package/dist/index.es.js +75 -77
- package/dist/index.umd.js +7 -7
- package/dist/native/native.cjs.js +1 -1
- package/dist/native/native.es.js +6 -6
- package/dist/react/react.cjs.js +11 -11
- package/dist/react/react.es.js +53 -55
- package/package.json +1 -1
package/dist/index.cjs.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});function u(t,n={}){const e=document.createElement(t),{className:
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});function u(t,n={}){const e=document.createElement(t),{className:a,id:l,innerHTML:m,textContent:c,attributes:o,styles:h,dataset:s,children:r,events:d}=n;if(a){const p=Array.isArray(a)?a:a.split(" ");e.classList.add(...p.filter(Boolean))}if(l&&(e.id=l),m&&(e.innerHTML=m),c&&(e.textContent=c),o)for(const[p,i]of Object.entries(o))i&&e.setAttribute(p,i);if(h)for(const[p,i]of Object.entries(h))e.style[p]=i;if(s)for(const[p,i]of Object.entries(s))e.dataset[p]=i;if(r&&e.append(...r.filter(Boolean)),d)for(const[p,i]of Object.entries(d))e.addEventListener(p,i);return e}function M(t,n){const e="id"in t?[document.getElementById(t.id)].filter(Boolean):"className"in t?Array.from(document.getElementsByClassName(t.className)):[t.element];if(!e.length){console.warn("updateElements: no elements found for",t);return}for(const a of e){const{styles:l,attributes:m,dataset:c,innerHTML:o,textContent:h,className:s}=n;if(l)for(const[r,d]of Object.entries(l))a.style[r]=d;if(m)for(const[r,d]of Object.entries(m))a.setAttribute(r,d);if(c)for(const[r,d]of Object.entries(c))a.dataset[r]=d;if(o!==void 0&&(a.innerHTML=o),h!==void 0&&(a.textContent=h),s?.add){const r=Array.isArray(s.add)?s.add:[s.add];a.classList.add(...r)}if(s?.remove){const r=Array.isArray(s.remove)?s.remove:[s.remove];a.classList.remove(...r)}s?.toggle&&(Array.isArray(s.toggle)?s.toggle:[s.toggle]).forEach(d=>a.classList.toggle(d))}}const J=`
|
|
2
2
|
<svg
|
|
3
3
|
xmlns="http://www.w3.org/2000/svg"
|
|
4
4
|
width="16"
|
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
clip-rule="evenodd"
|
|
14
14
|
></path>
|
|
15
15
|
</svg>
|
|
16
|
-
`,
|
|
16
|
+
`,Q=`
|
|
17
17
|
<svg
|
|
18
18
|
xmlns="http://www.w3.org/2000/svg"
|
|
19
19
|
width="16"
|
|
@@ -28,7 +28,7 @@
|
|
|
28
28
|
>
|
|
29
29
|
<path d="M12 2v4M16.2 7.8l2.9-2.9M18 12h4M16.2 16.2l2.9 2.9M12 18v4M4.9 19.1l2.9-2.9M2 12h4M4.9 4.9l2.9 2.9"></path>
|
|
30
30
|
</svg>
|
|
31
|
-
`,
|
|
31
|
+
`,X=`<svg
|
|
32
32
|
xmlns="http://www.w3.org/2000/svg"
|
|
33
33
|
width="20"
|
|
34
34
|
height="20"
|
|
@@ -45,28 +45,28 @@
|
|
|
45
45
|
></path>
|
|
46
46
|
</svg>`,k=`
|
|
47
47
|
<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>
|
|
48
|
-
`,
|
|
48
|
+
`,ee=({children:t,onClick:n,disabled:e=!1,size:a="medium",type:l="button",className:m="",variant:c="primary"})=>{const o=u("span",{className:"button-spinner",innerHTML:Q,dataset:{show:"false"}}),h=u("span",{className:"button-label",children:[null],textContent:t}),s=u("button",{className:`custom-button ${c} ${a} ${m}`,attributes:{type:l,...e?{disabled:"true"}:{}},events:{click:n},children:[o,h]}),r=(p=!1)=>{M({element:o},{dataset:{show:String(p)}}),d(p)},d=(p=!1)=>{p?s.setAttribute("disabled","true"):s.removeAttribute("disabled")};return{element:s,setLoading:r,setDisabled:d}},te=({content:t,position:n="top",delay:e=200,maxWidth:a=250,className:l="",id:m=""})=>{var c=u("div",{className:`tooltip ${n} ${l}`,styles:{maxWidth:`${a}px`},attributes:{role:"tooltip"},dataset:{show:"false"},innerHTML:`
|
|
49
49
|
<div class="tooltip-content">${t}</div>
|
|
50
50
|
<div class="tooltip-arrow"></div>
|
|
51
|
-
`});let
|
|
51
|
+
`});let o=null;var r=u("span",{className:"tooltip-trigger",innerHTML:k,events:{mouseenter:()=>{e>0?o=window.setTimeout(()=>{c.dataset.show="true",d()},e):(c.dataset.show="true",d())},mouseleave:()=>{o&&clearTimeout(o),c.dataset.show="false"}}});function d(){if(!r||!c)return;const i=r.getBoundingClientRect(),g=c.getBoundingClientRect(),b=8;let f,y;switch(n){case"top":f=i.top-g.height-b,y=i.left+i.width/2-g.width/2;break;case"bottom":f=i.bottom+b,y=i.left+i.width/2-g.width/2;break;case"left":f=i.top+i.height/2-g.height/2,y=i.left-g.width-b;break;case"right":f=i.top+i.height/2-g.height/2,y=i.right+b;break;default:f=i.top-g.height-b,y=i.left+i.width/2-g.width/2}const N=window.innerWidth,D=window.innerHeight;y<0&&(y=b),y+g.width>N&&(y=N-g.width-b),f<0&&(f=b),f+g.height>D&&(f=D-g.height-b),c.style.top=`${f}px`,c.style.left=`${y}px`}return u("div",{className:"tooltip-wrapper",id:`tooltip-${m}`,children:[r,c]})},ne=(t,n=!1)=>{const e={},a=Object.values(t).every(o=>!o||o.trim()===""),l=t.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",!t.expiryDate&&!n)e.expiryDate="Expiry date is required";else if(t.expiryDate){const o=t.expiryDate.replace(/\D/g,"");if(o.length<4)e.expiryDate="Enter complete expiry date (MM/YY)";else{const h=parseInt(o.substring(0,2),10),s=parseInt(o.substring(2,4),10);if(isNaN(h)||h<1||h>12)e.expiryDate="Invalid month (must be 01-12)";else if(isNaN(s)||s<0||s>99)e.expiryDate="Invalid year";else{const r=new Date,d=r.getFullYear(),p=r.getMonth()+1,i=Math.floor(d/100)*100,g=i+s,b=i+100+s;let f;g>=d&&g<=d+20?f=g:(b>=d&&b<=d+20,f=b),f<d||f===d&&h<p?e.expiryDate="Card has expired":f>d+20&&(e.expiryDate="Expiry year is too far in the future")}}}const m=t.cvv.trim();m&&!/^\d{3,4}$/.test(m)&&(e.cvv="CVV must be 3 or 4 digits");const c=t.zipCode.trim();return c&&!/^[A-Z0-9\s-]{3,10}$/i.test(c)&&(e.zipCode="Invalid ZIP code format"),{isValid:Object.keys(e).length===0,errors:e,isEmpty:a}};function se(t){const n=parseInt(t,10);if(isNaN(n)||n<0||n>99)return null;const e=new Date().getFullYear(),a=Math.floor(e/100)*100;let l=a+n;return l>=e&&l<=e+20||(l=a+100+n,l>=e&&l<=e+20)?l:a+100+n}function I(t=""){return t.trim().replaceAll(/\s/g,"").replaceAll("-","")}const re={card:t=>t.replace(/\s+/g,"").replace(/[^0-9]/gi,"").substring(0,16).match(/.{1,4}/g)?.join(" ")??"",phone:t=>{const n=t.replace(/\D/g,"").substring(0,10),e=n.match(/^(\d{3})(\d{3})(\d{4})$/);return e?`(${e[1]}) ${e[2]}-${e[3]}`:n},expiry:t=>{const n=t.replace(/[^0-9/]/g,"");return n.length<=2?n:n.includes("/")?n.substring(0,5):n.substring(0,2)+"/"+n.substring(2,4)},cvv:t=>t.replace(/\D/g,"").substring(0,4),zip:t=>{const n=t.replace(/\D/g,"").substring(0,9);return n.length>5?`${n.substring(0,5)}-${n.substring(5)}`:n}};function ae(t,n){return n==="none"?t:re[n](t)}const $=({label:t,maskType:n,id:e,name:a,type:l="text",placeholder:m="Enter value",tooltip:c="",onChange:o})=>{const h=["card","expiry","phone","cvv","zip"].includes(n)?"numeric":"",s=u("label",{className:"input-label",innerHTML:t,attributes:{for:e}});let r=!1;const p=u("input",{id:e||"input-id",className:"styled-input",attributes:{placeholder:m,type:l,inputMode:h,name:a},events:{input:i,blur:g,keydown:w=>{w.key==="Enter"&&(r=!0)}}});function i(w){const T=n!=="none"?ae(w?.target?.value,n):w?.target?.value;p.value=T,o?.(T)}function g(){r=!0,o?.(p?.value||"")}const b=u("div",{className:"input-loader",innerHTML:'<div class="loader"></div>',dataset:{show:"false"}}),f=c?u("div",{className:"input-right-element",children:[te({content:c,id:e})]}):null,y=u("div",{className:"input-wrapper",children:[p,b,f]}),N=u("div",{className:"error-message",dataset:{show:"false"},innerHTML:`
|
|
52
52
|
${k}
|
|
53
53
|
<span></span>
|
|
54
|
-
`});return{element:u("div",{className:"custom-input-group",children:[s,y,N]}),setLoading:w=>{
|
|
54
|
+
`});return{element:u("div",{className:"custom-input-group",children:[s,y,N]}),setLoading:w=>{M({element:y},{dataset:{loading:w?"true":"false"}}),M({element:p},{attributes:{disabled:w?"true":"false"}}),M({element:b},{dataset:{show:w?"true":"false"}})},setError:(w="")=>{M({element:y},{className:w&&r?{add:"input-error"}:{remove:"input-error"}}),M({element:N},{dataset:{show:w&&r?"true":"false"},innerHTML:`
|
|
55
55
|
${k}
|
|
56
56
|
<span>${w||""}</span>
|
|
57
|
-
`})}}},
|
|
57
|
+
`})}}},oe=async(t,n={})=>{const{method:e="GET",headers:a={},body:l=null,...m}=n;try{const c={method:e,headers:{Accept:"*/*","Content-Type":"application/json",...a},...m};l&&["POST","PUT","PATCH","DELETE"].includes(e.toUpperCase())&&(c.body=typeof l=="string"?l:JSON.stringify(l));const o=await fetch(t,c),h=o.headers.get("content-type");let s;if(h?.includes("application/json")?s=await o.json():s=await o.text(),!o.ok){const r=s;throw new Error(r?.message||`HTTP error! status: ${o.status}`)}return{data:s,error:null}}catch(c){return{data:null,error:c instanceof Error?c.message:"An error occurred"}}},ie=({title:t="",children:n,onClose:e,showBackBtn:a=!1,showCloseBtn:l=!0})=>{const m=u("button",{className:"back-btn",innerHTML:X,dataset:{show:String(a)},events:{click:()=>d()}}),c=u("h3",{textContent:t}),o=u("button",{className:"close-btn",innerHTML:"×",dataset:{show:String(l)},attributes:{"aria-label":"Close modal"},events:{click:()=>d()}}),h=u("div",{className:"modal-header",children:[m,c,o]}),s=u("div",{className:"modal-content",children:[n]}),r=u("dialog",{className:"custom-modal",children:[h,s],events:{cancel:i=>{i.preventDefault(),d()}}}),d=()=>{r.close(),e?.()};return{element:r,setModalVisibility:i=>{i?r.showModal():r.close()}}},le=({token:t,endpoint:n,beneficiaryCard:e=!1,isModal:a=!1,onCallback:l=()=>null})=>{const m=e?"Enter Recipient Debit Card Details":"Enter Your Debit Card Details",c=e?"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.",o=e?"Debit Card Number":"Your Debit Card Number",h=e?"Enter recipient's card number":"Enter your card number",s=`add-card-form-wrapper${e?" recipient-form":""}`,r={cardNumber:"",expiryDate:"",cvv:"",zipCode:""},{element:d,setError:p}=$({label:o,placeholder:h,id:"card-number-input",name:"cardNumber",maskType:"card",onChange(v){L("cardNumber",v,p)}}),{element:i,setError:g}=$({label:"Expiration Date",placeholder:"MM/YY",id:"expiry-input",name:"expiryDate",maskType:"expiry",onChange(v){L("expiryDate",v,g)}}),{element:b,setError:f}=$({label:"CVV",placeholder:"3-Digit",type:"number",maskType:"cvv",id:"cvv-input",name:"cvv",tooltip:"A CVV is a 3-digit number on your debit card. You can find it on the back side of the card.",onChange(v){L("cvv",v,f)}}),{element:y,setError:N}=$({label:"ZIP Code",placeholder:e?"ZIP Code":"Enter your ZIP Code",id:"zip-input",name:"zipCode",maskType:"zip",onChange(v){L("zipCode",v,N)}}),D=u("div",{className:e?"input-sections":"inputs",children:[d,i,b,y]}),A=u("p",{className:"submit-error",dataset:{show:"false"}}),{element:V,setDisabled:w,setLoading:T}=ee({children:"Link Card",type:"submit",disabled:!0}),j=(v="")=>{M({element:A},{dataset:{show:String(!!v)},innerHTML:`
|
|
58
58
|
${k}
|
|
59
59
|
${v||""}
|
|
60
|
-
`})},B=(v=!0)=>{w(v),T(v)};function L(v,H,E){r[v]=H;const{isValid:S,errors:
|
|
60
|
+
`})},B=(v=!0)=>{w(v),T(v)};function L(v,H,E){r[v]=H;const{isValid:S,errors:x}=ne(r,e);x[v]?E(x[v]):E(""),w(!S)}const O=u("div",{className:"submit-button-wrapper",children:[A,V]});async function P(v){v.preventDefault();const H=new FormData(v.target),E=Object.fromEntries(H.entries()),S=E?.cardNumber?I(E?.cardNumber):null,x=E?.expiryDate||null,_=E?.cvv?I(E?.cvv):null,G=E?.zipCode?I(E?.zipCode):null,K=x?Number(x?.split("/")[0]):null,U=x?se(x?.split("/")[1]):null;B(!0),j("");const C=await oe(n,{method:"POST",body:{token:t,pan:S,expiry_month:K,expiry_year:U,cvv:_,address:{postal_code:G}}});C.error?(console.error("Request failed:",C.error),B(!1),j(C.error),l?.({success:!1,error:C.error})):(console.log("Request success:",C.data),B(!1),l?.({success:!0,data:C.data}))}const Z=()=>u("form",{events:{submit:P},children:[D,O]}),W=()=>u("div",{className:"form-title",innerHTML:`
|
|
61
61
|
<p>${c}</p>
|
|
62
62
|
|
|
63
63
|
<div>
|
|
64
|
-
${
|
|
64
|
+
${J}
|
|
65
65
|
|
|
66
66
|
<span>Secured with 256-bit encryption</span>
|
|
67
67
|
</div>
|
|
68
|
-
`}),
|
|
68
|
+
`}),z=()=>u("div",{className:a?"":"non-modal-content",children:[W(),Z()]}),R=a?null:u("div",{className:`${s} non-modal`,children:[u("div",{className:"non-modal-header",innerHTML:`
|
|
69
69
|
<span></span>
|
|
70
70
|
<h3>${m}</h3>
|
|
71
71
|
<span></span>
|
|
72
|
-
`}),
|
|
72
|
+
`}),z()]}),{element:Y,setModalVisibility:F}=a?ie({title:m,children:z()}):{element:null,setModalVisibility:()=>{}};function q(){Y&&(document.body.appendChild(u("div",{className:s,children:[Y]})),F(!0))}return{renderFormWithModal:q,nonModalForm:R,closeModal:()=>F(!1)}};function ce({token:t,endpoint:n,beneficiaryCard:e,isModal:a,onCallback:l,onModalClose:m}){const{renderFormWithModal:c,nonModalForm:o,closeModal:h}=le({token:t,endpoint:n,beneficiaryCard:e,isModal:a,onCallback:l});return{mount(s){const r="className"in s?document.querySelector(s.className):"id"in s?document.getElementById(s.id):s.element;r&&o&&r.appendChild(o)},open(){c()},destroy(){h(),m?.()}}}exports.init=ce;
|
package/dist/index.es.js
CHANGED
|
@@ -18,7 +18,7 @@ function u(t, n = {}) {
|
|
|
18
18
|
e.addEventListener(p, i);
|
|
19
19
|
return e;
|
|
20
20
|
}
|
|
21
|
-
function
|
|
21
|
+
function M(t, n) {
|
|
22
22
|
const e = "id" in t ? [document.getElementById(t.id)].filter(Boolean) : "className" in t ? Array.from(document.getElementsByClassName(t.className)) : [t.element];
|
|
23
23
|
if (!e.length) {
|
|
24
24
|
console.warn("updateElements: no elements found for", t);
|
|
@@ -46,7 +46,7 @@ function x(t, n) {
|
|
|
46
46
|
s?.toggle && (Array.isArray(s.toggle) ? s.toggle : [s.toggle]).forEach((d) => a.classList.toggle(d));
|
|
47
47
|
}
|
|
48
48
|
}
|
|
49
|
-
const
|
|
49
|
+
const J = `
|
|
50
50
|
<svg
|
|
51
51
|
xmlns="http://www.w3.org/2000/svg"
|
|
52
52
|
width="16"
|
|
@@ -61,7 +61,7 @@ const Q = `
|
|
|
61
61
|
clip-rule="evenodd"
|
|
62
62
|
></path>
|
|
63
63
|
</svg>
|
|
64
|
-
`,
|
|
64
|
+
`, Q = `
|
|
65
65
|
<svg
|
|
66
66
|
xmlns="http://www.w3.org/2000/svg"
|
|
67
67
|
width="16"
|
|
@@ -76,7 +76,7 @@ const Q = `
|
|
|
76
76
|
>
|
|
77
77
|
<path d="M12 2v4M16.2 7.8l2.9-2.9M18 12h4M16.2 16.2l2.9 2.9M12 18v4M4.9 19.1l2.9-2.9M2 12h4M4.9 4.9l2.9 2.9"></path>
|
|
78
78
|
</svg>
|
|
79
|
-
`,
|
|
79
|
+
`, X = `<svg
|
|
80
80
|
xmlns="http://www.w3.org/2000/svg"
|
|
81
81
|
width="20"
|
|
82
82
|
height="20"
|
|
@@ -93,10 +93,10 @@ const Q = `
|
|
|
93
93
|
></path>
|
|
94
94
|
</svg>`, k = `
|
|
95
95
|
<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>
|
|
96
|
-
`,
|
|
96
|
+
`, ee = ({ children: t, onClick: n, disabled: e = !1, size: a = "medium", type: l = "button", className: m = "", variant: c = "primary" }) => {
|
|
97
97
|
const o = u("span", {
|
|
98
98
|
className: "button-spinner",
|
|
99
|
-
innerHTML:
|
|
99
|
+
innerHTML: Q,
|
|
100
100
|
dataset: { show: "false" }
|
|
101
101
|
}), h = u("span", {
|
|
102
102
|
className: "button-label",
|
|
@@ -118,7 +118,7 @@ const Q = `
|
|
|
118
118
|
h
|
|
119
119
|
]
|
|
120
120
|
}), r = (p = !1) => {
|
|
121
|
-
|
|
121
|
+
M({ element: o }, {
|
|
122
122
|
dataset: { show: String(p) }
|
|
123
123
|
}), d(p);
|
|
124
124
|
}, d = (p = !1) => {
|
|
@@ -129,7 +129,7 @@ const Q = `
|
|
|
129
129
|
setLoading: r,
|
|
130
130
|
setDisabled: d
|
|
131
131
|
};
|
|
132
|
-
},
|
|
132
|
+
}, te = ({ content: t, position: n = "top", delay: e = 200, maxWidth: a = 250, className: l = "", id: m = "" }) => {
|
|
133
133
|
var c = u("div", {
|
|
134
134
|
className: `tooltip ${n} ${l}`,
|
|
135
135
|
styles: {
|
|
@@ -163,26 +163,26 @@ const Q = `
|
|
|
163
163
|
});
|
|
164
164
|
function d() {
|
|
165
165
|
if (!r || !c) return;
|
|
166
|
-
const i = r.getBoundingClientRect(),
|
|
166
|
+
const i = r.getBoundingClientRect(), v = c.getBoundingClientRect(), b = 8;
|
|
167
167
|
let f, y;
|
|
168
168
|
switch (n) {
|
|
169
169
|
case "top":
|
|
170
|
-
f = i.top -
|
|
170
|
+
f = i.top - v.height - b, y = i.left + i.width / 2 - v.width / 2;
|
|
171
171
|
break;
|
|
172
172
|
case "bottom":
|
|
173
|
-
f = i.bottom + b, y = i.left + i.width / 2 -
|
|
173
|
+
f = i.bottom + b, y = i.left + i.width / 2 - v.width / 2;
|
|
174
174
|
break;
|
|
175
175
|
case "left":
|
|
176
|
-
f = i.top + i.height / 2 -
|
|
176
|
+
f = i.top + i.height / 2 - v.height / 2, y = i.left - v.width - b;
|
|
177
177
|
break;
|
|
178
178
|
case "right":
|
|
179
|
-
f = i.top + i.height / 2 -
|
|
179
|
+
f = i.top + i.height / 2 - v.height / 2, y = i.right + b;
|
|
180
180
|
break;
|
|
181
181
|
default:
|
|
182
|
-
f = i.top -
|
|
182
|
+
f = i.top - v.height - b, y = i.left + i.width / 2 - v.width / 2;
|
|
183
183
|
}
|
|
184
|
-
const N = window.innerWidth,
|
|
185
|
-
y < 0 && (y = b), y +
|
|
184
|
+
const N = window.innerWidth, D = window.innerHeight;
|
|
185
|
+
y < 0 && (y = b), y + v.width > N && (y = N - v.width - b), f < 0 && (f = b), f + v.height > D && (f = D - v.height - b), c.style.top = `${f}px`, c.style.left = `${y}px`;
|
|
186
186
|
}
|
|
187
187
|
return u("div", {
|
|
188
188
|
className: "tooltip-wrapper",
|
|
@@ -192,7 +192,7 @@ const Q = `
|
|
|
192
192
|
c
|
|
193
193
|
]
|
|
194
194
|
});
|
|
195
|
-
},
|
|
195
|
+
}, ne = (t, n = !1) => {
|
|
196
196
|
const e = {}, a = Object.values(t).every(
|
|
197
197
|
(o) => !o || o.trim() === ""
|
|
198
198
|
), l = t.cardNumber?.replace(/\s/g, "");
|
|
@@ -209,9 +209,9 @@ const Q = `
|
|
|
209
209
|
else if (isNaN(s) || s < 0 || s > 99)
|
|
210
210
|
e.expiryDate = "Invalid year";
|
|
211
211
|
else {
|
|
212
|
-
const r = /* @__PURE__ */ new Date(), d = r.getFullYear(), p = r.getMonth() + 1, i = Math.floor(d / 100) * 100,
|
|
212
|
+
const r = /* @__PURE__ */ new Date(), d = r.getFullYear(), p = r.getMonth() + 1, i = Math.floor(d / 100) * 100, v = i + s, b = i + 100 + s;
|
|
213
213
|
let f;
|
|
214
|
-
|
|
214
|
+
v >= d && v <= d + 20 ? f = v : (b >= d && b <= d + 20, f = b), f < d || f === d && h < p ? e.expiryDate = "Card has expired" : f > d + 20 && (e.expiryDate = "Expiry year is too far in the future");
|
|
215
215
|
}
|
|
216
216
|
}
|
|
217
217
|
}
|
|
@@ -224,7 +224,7 @@ const Q = `
|
|
|
224
224
|
isEmpty: a
|
|
225
225
|
};
|
|
226
226
|
};
|
|
227
|
-
function
|
|
227
|
+
function se(t) {
|
|
228
228
|
const n = parseInt(t, 10);
|
|
229
229
|
if (isNaN(n) || n < 0 || n > 99) return null;
|
|
230
230
|
const e = (/* @__PURE__ */ new Date()).getFullYear(), a = Math.floor(e / 100) * 100;
|
|
@@ -234,7 +234,7 @@ function re(t) {
|
|
|
234
234
|
function V(t = "") {
|
|
235
235
|
return t.trim().replaceAll(/\s/g, "").replaceAll("-", "");
|
|
236
236
|
}
|
|
237
|
-
const
|
|
237
|
+
const re = {
|
|
238
238
|
card: (t) => t.replace(/\s+/g, "").replace(/[^0-9]/gi, "").substring(0, 16).match(/.{1,4}/g)?.join(" ") ?? "",
|
|
239
239
|
phone: (t) => {
|
|
240
240
|
const n = t.replace(/\D/g, "").substring(0, 10), e = n.match(/^(\d{3})(\d{3})(\d{4})$/);
|
|
@@ -250,8 +250,8 @@ const ae = {
|
|
|
250
250
|
return n.length > 5 ? `${n.substring(0, 5)}-${n.substring(5)}` : n;
|
|
251
251
|
}
|
|
252
252
|
};
|
|
253
|
-
function
|
|
254
|
-
return n === "none" ? t :
|
|
253
|
+
function ae(t, n) {
|
|
254
|
+
return n === "none" ? t : re[n](t);
|
|
255
255
|
}
|
|
256
256
|
const $ = ({ label: t, maskType: n, id: e, name: a, type: l = "text", placeholder: m = "Enter value", tooltip: c = "", onChange: o }) => {
|
|
257
257
|
const h = ["card", "expiry", "phone", "cvv", "zip"].includes(n) ? "numeric" : "", s = u("label", {
|
|
@@ -273,17 +273,17 @@ const $ = ({ label: t, maskType: n, id: e, name: a, type: l = "text", placeholde
|
|
|
273
273
|
},
|
|
274
274
|
events: {
|
|
275
275
|
input: i,
|
|
276
|
-
blur:
|
|
276
|
+
blur: v,
|
|
277
277
|
keydown: (w) => {
|
|
278
278
|
w.key === "Enter" && (r = !0);
|
|
279
279
|
}
|
|
280
280
|
}
|
|
281
281
|
});
|
|
282
282
|
function i(w) {
|
|
283
|
-
const T = n !== "none" ?
|
|
283
|
+
const T = n !== "none" ? ae(w?.target?.value, n) : w?.target?.value;
|
|
284
284
|
p.value = T, o?.(T);
|
|
285
285
|
}
|
|
286
|
-
function
|
|
286
|
+
function v() {
|
|
287
287
|
r = !0, o?.(p?.value || "");
|
|
288
288
|
}
|
|
289
289
|
const b = u("div", {
|
|
@@ -293,7 +293,7 @@ const $ = ({ label: t, maskType: n, id: e, name: a, type: l = "text", placeholde
|
|
|
293
293
|
}), f = c ? u("div", {
|
|
294
294
|
className: "input-right-element",
|
|
295
295
|
children: [
|
|
296
|
-
|
|
296
|
+
te({ content: c, id: e })
|
|
297
297
|
]
|
|
298
298
|
}) : null, y = u("div", {
|
|
299
299
|
className: "input-wrapper",
|
|
@@ -320,18 +320,18 @@ const $ = ({ label: t, maskType: n, id: e, name: a, type: l = "text", placeholde
|
|
|
320
320
|
]
|
|
321
321
|
}),
|
|
322
322
|
setLoading: (w) => {
|
|
323
|
-
|
|
323
|
+
M({ element: y }, {
|
|
324
324
|
dataset: { loading: w ? "true" : "false" }
|
|
325
|
-
}),
|
|
325
|
+
}), M({ element: p }, {
|
|
326
326
|
attributes: { disabled: w ? "true" : "false" }
|
|
327
|
-
}),
|
|
327
|
+
}), M({ element: b }, {
|
|
328
328
|
dataset: { show: w ? "true" : "false" }
|
|
329
329
|
});
|
|
330
330
|
},
|
|
331
331
|
setError: (w = "") => {
|
|
332
|
-
|
|
332
|
+
M({ element: y }, {
|
|
333
333
|
className: w && r ? { add: "input-error" } : { remove: "input-error" }
|
|
334
|
-
}),
|
|
334
|
+
}), M({ element: N }, {
|
|
335
335
|
dataset: { show: w && r ? "true" : "false" },
|
|
336
336
|
innerHTML: `
|
|
337
337
|
${k}
|
|
@@ -340,7 +340,7 @@ const $ = ({ label: t, maskType: n, id: e, name: a, type: l = "text", placeholde
|
|
|
340
340
|
});
|
|
341
341
|
}
|
|
342
342
|
};
|
|
343
|
-
},
|
|
343
|
+
}, oe = async (t, n = {}) => {
|
|
344
344
|
const { method: e = "GET", headers: a = {}, body: l = null, ...m } = n;
|
|
345
345
|
try {
|
|
346
346
|
const c = {
|
|
@@ -365,7 +365,7 @@ const $ = ({ label: t, maskType: n, id: e, name: a, type: l = "text", placeholde
|
|
|
365
365
|
} catch (c) {
|
|
366
366
|
return { data: null, error: c instanceof Error ? c.message : "An error occurred" };
|
|
367
367
|
}
|
|
368
|
-
},
|
|
368
|
+
}, ie = ({
|
|
369
369
|
title: t = "",
|
|
370
370
|
children: n,
|
|
371
371
|
onClose: e,
|
|
@@ -374,7 +374,7 @@ const $ = ({ label: t, maskType: n, id: e, name: a, type: l = "text", placeholde
|
|
|
374
374
|
}) => {
|
|
375
375
|
const m = u("button", {
|
|
376
376
|
className: "back-btn",
|
|
377
|
-
innerHTML:
|
|
377
|
+
innerHTML: X,
|
|
378
378
|
dataset: { show: String(a) },
|
|
379
379
|
events: { click: () => d() }
|
|
380
380
|
}), c = u("h3", {
|
|
@@ -408,7 +408,7 @@ const $ = ({ label: t, maskType: n, id: e, name: a, type: l = "text", placeholde
|
|
|
408
408
|
i ? r.showModal() : r.close();
|
|
409
409
|
}
|
|
410
410
|
};
|
|
411
|
-
},
|
|
411
|
+
}, le = ({ token: t, endpoint: n, beneficiaryCard: e = !1, isModal: a = !1, onCallback: l = () => null }) => {
|
|
412
412
|
const m = e ? "Enter Recipient Debit Card Details" : "Enter Your Debit Card Details", c = e ? "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.", o = e ? "Debit Card Number" : "Your Debit Card Number", h = e ? "Enter recipient's card number" : "Enter your card number", s = `add-card-form-wrapper${e ? " recipient-form" : ""}`, r = {
|
|
413
413
|
cardNumber: "",
|
|
414
414
|
expiryDate: "",
|
|
@@ -420,17 +420,17 @@ const $ = ({ label: t, maskType: n, id: e, name: a, type: l = "text", placeholde
|
|
|
420
420
|
id: "card-number-input",
|
|
421
421
|
name: "cardNumber",
|
|
422
422
|
maskType: "card",
|
|
423
|
-
onChange(
|
|
424
|
-
L("cardNumber",
|
|
423
|
+
onChange(g) {
|
|
424
|
+
L("cardNumber", g, p);
|
|
425
425
|
}
|
|
426
|
-
}), { element: i, setError:
|
|
426
|
+
}), { element: i, setError: v } = $({
|
|
427
427
|
label: "Expiration Date",
|
|
428
428
|
placeholder: "MM/YY",
|
|
429
429
|
id: "expiry-input",
|
|
430
430
|
name: "expiryDate",
|
|
431
431
|
maskType: "expiry",
|
|
432
|
-
onChange(
|
|
433
|
-
L("expiryDate",
|
|
432
|
+
onChange(g) {
|
|
433
|
+
L("expiryDate", g, v);
|
|
434
434
|
}
|
|
435
435
|
}), { element: b, setError: f } = $({
|
|
436
436
|
label: "CVV",
|
|
@@ -440,8 +440,8 @@ const $ = ({ label: t, maskType: n, id: e, name: a, type: l = "text", placeholde
|
|
|
440
440
|
id: "cvv-input",
|
|
441
441
|
name: "cvv",
|
|
442
442
|
tooltip: "A CVV is a 3-digit number on your debit card. You can find it on the back side of the card.",
|
|
443
|
-
onChange(
|
|
444
|
-
L("cvv",
|
|
443
|
+
onChange(g) {
|
|
444
|
+
L("cvv", g, f);
|
|
445
445
|
}
|
|
446
446
|
}), { element: y, setError: N } = $({
|
|
447
447
|
label: "ZIP Code",
|
|
@@ -449,67 +449,65 @@ const $ = ({ label: t, maskType: n, id: e, name: a, type: l = "text", placeholde
|
|
|
449
449
|
id: "zip-input",
|
|
450
450
|
name: "zipCode",
|
|
451
451
|
maskType: "zip",
|
|
452
|
-
onChange(
|
|
453
|
-
L("zipCode",
|
|
452
|
+
onChange(g) {
|
|
453
|
+
L("zipCode", g, N);
|
|
454
454
|
}
|
|
455
|
-
}),
|
|
455
|
+
}), D = u("div", {
|
|
456
456
|
className: e ? "input-sections" : "inputs",
|
|
457
457
|
children: [d, i, b, y]
|
|
458
458
|
}), A = u("p", {
|
|
459
459
|
className: "submit-error",
|
|
460
460
|
dataset: { show: "false" }
|
|
461
461
|
// innerHTML: `//icon`
|
|
462
|
-
}), { element: S, setDisabled: w, setLoading: T } =
|
|
462
|
+
}), { element: S, setDisabled: w, setLoading: T } = ee({
|
|
463
463
|
children: "Link Card",
|
|
464
464
|
type: "submit",
|
|
465
465
|
disabled: !0
|
|
466
|
-
}), j = (
|
|
467
|
-
|
|
468
|
-
dataset: { show: String(!!
|
|
466
|
+
}), j = (g = "") => {
|
|
467
|
+
M({ element: A }, {
|
|
468
|
+
dataset: { show: String(!!g) },
|
|
469
469
|
innerHTML: `
|
|
470
470
|
${k}
|
|
471
|
-
${
|
|
471
|
+
${g || ""}
|
|
472
472
|
`
|
|
473
473
|
});
|
|
474
|
-
}, B = (
|
|
475
|
-
w(
|
|
474
|
+
}, B = (g = !0) => {
|
|
475
|
+
w(g), T(g);
|
|
476
476
|
};
|
|
477
|
-
function L(
|
|
478
|
-
r[
|
|
479
|
-
const { isValid: I, errors:
|
|
480
|
-
|
|
477
|
+
function L(g, H, E) {
|
|
478
|
+
r[g] = H;
|
|
479
|
+
const { isValid: I, errors: x } = ne(r, e);
|
|
480
|
+
x[g] ? E(x[g]) : E(""), w(!I);
|
|
481
481
|
}
|
|
482
482
|
const O = u("div", {
|
|
483
483
|
className: "submit-button-wrapper",
|
|
484
484
|
children: [A, S]
|
|
485
485
|
});
|
|
486
|
-
async function P(
|
|
487
|
-
|
|
488
|
-
const H = new FormData(
|
|
489
|
-
console.log(E);
|
|
490
|
-
const I = E?.cardNumber, D = E?.expiryDate, _ = E?.cvv, G = E?.zipCode, K = Number(D?.split("/")[0]), U = re(D?.split("/")[1]), J = V(I);
|
|
486
|
+
async function P(g) {
|
|
487
|
+
g.preventDefault();
|
|
488
|
+
const H = new FormData(g.target), E = Object.fromEntries(H.entries()), I = E?.cardNumber ? V(E?.cardNumber) : null, x = E?.expiryDate || null, _ = E?.cvv ? V(E?.cvv) : null, G = E?.zipCode ? V(E?.zipCode) : null, K = x ? Number(x?.split("/")[0]) : null, U = x ? se(x?.split("/")[1]) : null;
|
|
491
489
|
B(!0), j("");
|
|
492
|
-
const
|
|
490
|
+
const C = await oe(n, {
|
|
493
491
|
method: "POST",
|
|
494
492
|
body: {
|
|
495
493
|
token: t,
|
|
496
|
-
pan:
|
|
494
|
+
pan: I,
|
|
497
495
|
expiry_month: K,
|
|
498
496
|
expiry_year: U,
|
|
499
|
-
cvv:
|
|
497
|
+
cvv: _,
|
|
500
498
|
address: {
|
|
501
|
-
postal_code:
|
|
499
|
+
postal_code: G
|
|
502
500
|
}
|
|
503
501
|
}
|
|
504
502
|
});
|
|
505
|
-
|
|
503
|
+
C.error ? (console.error("Request failed:", C.error), B(!1), j(C.error), l?.({ success: !1, error: C.error })) : (console.log("Request success:", C.data), B(!1), l?.({ success: !0, data: C.data }));
|
|
506
504
|
}
|
|
507
505
|
const Z = () => u("form", {
|
|
508
506
|
events: {
|
|
509
507
|
submit: P
|
|
510
508
|
},
|
|
511
509
|
children: [
|
|
512
|
-
|
|
510
|
+
D,
|
|
513
511
|
O
|
|
514
512
|
]
|
|
515
513
|
}), W = () => u("div", {
|
|
@@ -518,12 +516,12 @@ const $ = ({ label: t, maskType: n, id: e, name: a, type: l = "text", placeholde
|
|
|
518
516
|
<p>${c}</p>
|
|
519
517
|
|
|
520
518
|
<div>
|
|
521
|
-
${
|
|
519
|
+
${J}
|
|
522
520
|
|
|
523
521
|
<span>Secured with 256-bit encryption</span>
|
|
524
522
|
</div>
|
|
525
523
|
`
|
|
526
|
-
}),
|
|
524
|
+
}), z = () => u("div", {
|
|
527
525
|
className: a ? "" : "non-modal-content",
|
|
528
526
|
children: [W(), Z()]
|
|
529
527
|
}), R = a ? null : u("div", {
|
|
@@ -537,15 +535,15 @@ const $ = ({ label: t, maskType: n, id: e, name: a, type: l = "text", placeholde
|
|
|
537
535
|
<span></span>
|
|
538
536
|
`
|
|
539
537
|
}),
|
|
540
|
-
|
|
538
|
+
z()
|
|
541
539
|
]
|
|
542
|
-
}), { element:
|
|
540
|
+
}), { element: Y, setModalVisibility: F } = a ? ie({ title: m, children: z() }) : { element: null, setModalVisibility: () => {
|
|
543
541
|
} };
|
|
544
542
|
function q() {
|
|
545
|
-
|
|
543
|
+
Y && (document.body.appendChild(
|
|
546
544
|
u("div", {
|
|
547
545
|
className: s,
|
|
548
|
-
children: [
|
|
546
|
+
children: [Y]
|
|
549
547
|
})
|
|
550
548
|
), F(!0));
|
|
551
549
|
}
|
|
@@ -555,8 +553,8 @@ const $ = ({ label: t, maskType: n, id: e, name: a, type: l = "text", placeholde
|
|
|
555
553
|
closeModal: () => F(!1)
|
|
556
554
|
};
|
|
557
555
|
};
|
|
558
|
-
function
|
|
559
|
-
const { renderFormWithModal: c, nonModalForm: o, closeModal: h } =
|
|
556
|
+
function ce({ token: t, endpoint: n, beneficiaryCard: e, isModal: a, onCallback: l, onModalClose: m }) {
|
|
557
|
+
const { renderFormWithModal: c, nonModalForm: o, closeModal: h } = le({
|
|
560
558
|
token: t,
|
|
561
559
|
endpoint: n,
|
|
562
560
|
beneficiaryCard: e,
|
|
@@ -577,5 +575,5 @@ function de({ token: t, endpoint: n, beneficiaryCard: e, isModal: a, onCallback:
|
|
|
577
575
|
};
|
|
578
576
|
}
|
|
579
577
|
export {
|
|
580
|
-
|
|
578
|
+
ce as init
|
|
581
579
|
};
|
package/dist/index.umd.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
(function(
|
|
1
|
+
(function(C,d){typeof exports=="object"&&typeof module<"u"?d(exports):typeof define=="function"&&define.amd?define(["exports"],d):(C=typeof globalThis<"u"?globalThis:C||self,d(C.BivoPayments={}))})(this,(function(C){"use strict";function d(t,n={}){const e=document.createElement(t),{className:o,id:l,innerHTML:m,textContent:c,attributes:a,styles:h,dataset:s,children:r,events:u}=n;if(o){const p=Array.isArray(o)?o:o.split(" ");e.classList.add(...p.filter(Boolean))}if(l&&(e.id=l),m&&(e.innerHTML=m),c&&(e.textContent=c),a)for(const[p,i]of Object.entries(a))i&&e.setAttribute(p,i);if(h)for(const[p,i]of Object.entries(h))e.style[p]=i;if(s)for(const[p,i]of Object.entries(s))e.dataset[p]=i;if(r&&e.append(...r.filter(Boolean)),u)for(const[p,i]of Object.entries(u))e.addEventListener(p,i);return e}function N(t,n){const e="id"in t?[document.getElementById(t.id)].filter(Boolean):"className"in t?Array.from(document.getElementsByClassName(t.className)):[t.element];if(!e.length){console.warn("updateElements: no elements found for",t);return}for(const o of e){const{styles:l,attributes:m,dataset:c,innerHTML:a,textContent:h,className:s}=n;if(l)for(const[r,u]of Object.entries(l))o.style[r]=u;if(m)for(const[r,u]of Object.entries(m))o.setAttribute(r,u);if(c)for(const[r,u]of Object.entries(c))o.dataset[r]=u;if(a!==void 0&&(o.innerHTML=a),h!==void 0&&(o.textContent=h),s?.add){const r=Array.isArray(s.add)?s.add:[s.add];o.classList.add(...r)}if(s?.remove){const r=Array.isArray(s.remove)?s.remove:[s.remove];o.classList.remove(...r)}s?.toggle&&(Array.isArray(s.toggle)?s.toggle:[s.toggle]).forEach(u=>o.classList.toggle(u))}}const P=`
|
|
2
2
|
<svg
|
|
3
3
|
xmlns="http://www.w3.org/2000/svg"
|
|
4
4
|
width="16"
|
|
@@ -48,16 +48,16 @@
|
|
|
48
48
|
`,R=({children:t,onClick:n,disabled:e=!1,size:o="medium",type:l="button",className:m="",variant:c="primary"})=>{const a=d("span",{className:"button-spinner",innerHTML:Z,dataset:{show:"false"}}),h=d("span",{className:"button-label",children:[null],textContent:t}),s=d("button",{className:`custom-button ${c} ${o} ${m}`,attributes:{type:l,...e?{disabled:"true"}:{}},events:{click:n},children:[a,h]}),r=(p=!1)=>{N({element:a},{dataset:{show:String(p)}}),u(p)},u=(p=!1)=>{p?s.setAttribute("disabled","true"):s.removeAttribute("disabled")};return{element:s,setLoading:r,setDisabled:u}},q=({content:t,position:n="top",delay:e=200,maxWidth:o=250,className:l="",id:m=""})=>{var c=d("div",{className:`tooltip ${n} ${l}`,styles:{maxWidth:`${o}px`},attributes:{role:"tooltip"},dataset:{show:"false"},innerHTML:`
|
|
49
49
|
<div class="tooltip-content">${t}</div>
|
|
50
50
|
<div class="tooltip-arrow"></div>
|
|
51
|
-
`});let a=null;var r=d("span",{className:"tooltip-trigger",innerHTML:L,events:{mouseenter:()=>{e>0?a=window.setTimeout(()=>{c.dataset.show="true",u()},e):(c.dataset.show="true",u())},mouseleave:()=>{a&&clearTimeout(a),c.dataset.show="false"}}});function u(){if(!r||!c)return;const i=r.getBoundingClientRect(),
|
|
51
|
+
`});let a=null;var r=d("span",{className:"tooltip-trigger",innerHTML:L,events:{mouseenter:()=>{e>0?a=window.setTimeout(()=>{c.dataset.show="true",u()},e):(c.dataset.show="true",u())},mouseleave:()=>{a&&clearTimeout(a),c.dataset.show="false"}}});function u(){if(!r||!c)return;const i=r.getBoundingClientRect(),v=c.getBoundingClientRect(),b=8;let f,y;switch(n){case"top":f=i.top-v.height-b,y=i.left+i.width/2-v.width/2;break;case"bottom":f=i.bottom+b,y=i.left+i.width/2-v.width/2;break;case"left":f=i.top+i.height/2-v.height/2,y=i.left-v.width-b;break;case"right":f=i.top+i.height/2-v.height/2,y=i.right+b;break;default:f=i.top-v.height-b,y=i.left+i.width/2-v.width/2}const x=window.innerWidth,D=window.innerHeight;y<0&&(y=b),y+v.width>x&&(y=x-v.width-b),f<0&&(f=b),f+v.height>D&&(f=D-v.height-b),c.style.top=`${f}px`,c.style.left=`${y}px`}return d("div",{className:"tooltip-wrapper",id:`tooltip-${m}`,children:[r,c]})},_=(t,n=!1)=>{const e={},o=Object.values(t).every(a=>!a||a.trim()===""),l=t.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",!t.expiryDate&&!n)e.expiryDate="Expiry date is required";else if(t.expiryDate){const a=t.expiryDate.replace(/\D/g,"");if(a.length<4)e.expiryDate="Enter complete expiry date (MM/YY)";else{const h=parseInt(a.substring(0,2),10),s=parseInt(a.substring(2,4),10);if(isNaN(h)||h<1||h>12)e.expiryDate="Invalid month (must be 01-12)";else if(isNaN(s)||s<0||s>99)e.expiryDate="Invalid year";else{const r=new Date,u=r.getFullYear(),p=r.getMonth()+1,i=Math.floor(u/100)*100,v=i+s,b=i+100+s;let f;v>=u&&v<=u+20?f=v:(b>=u&&b<=u+20,f=b),f<u||f===u&&h<p?e.expiryDate="Card has expired":f>u+20&&(e.expiryDate="Expiry year is too far in the future")}}}const m=t.cvv.trim();m&&!/^\d{3,4}$/.test(m)&&(e.cvv="CVV must be 3 or 4 digits");const c=t.zipCode.trim();return c&&!/^[A-Z0-9\s-]{3,10}$/i.test(c)&&(e.zipCode="Invalid ZIP code format"),{isValid:Object.keys(e).length===0,errors:e,isEmpty:o}};function G(t){const n=parseInt(t,10);if(isNaN(n)||n<0||n>99)return null;const e=new Date().getFullYear(),o=Math.floor(e/100)*100;let l=o+n;return l>=e&&l<=e+20||(l=o+100+n,l>=e&&l<=e+20)?l:o+100+n}function B(t=""){return t.trim().replaceAll(/\s/g,"").replaceAll("-","")}const K={card:t=>t.replace(/\s+/g,"").replace(/[^0-9]/gi,"").substring(0,16).match(/.{1,4}/g)?.join(" ")??"",phone:t=>{const n=t.replace(/\D/g,"").substring(0,10),e=n.match(/^(\d{3})(\d{3})(\d{4})$/);return e?`(${e[1]}) ${e[2]}-${e[3]}`:n},expiry:t=>{const n=t.replace(/[^0-9/]/g,"");return n.length<=2?n:n.includes("/")?n.substring(0,5):n.substring(0,2)+"/"+n.substring(2,4)},cvv:t=>t.replace(/\D/g,"").substring(0,4),zip:t=>{const n=t.replace(/\D/g,"").substring(0,9);return n.length>5?`${n.substring(0,5)}-${n.substring(5)}`:n}};function U(t,n){return n==="none"?t:K[n](t)}const $=({label:t,maskType:n,id:e,name:o,type:l="text",placeholder:m="Enter value",tooltip:c="",onChange:a})=>{const h=["card","expiry","phone","cvv","zip"].includes(n)?"numeric":"",s=d("label",{className:"input-label",innerHTML:t,attributes:{for:e}});let r=!1;const p=d("input",{id:e||"input-id",className:"styled-input",attributes:{placeholder:m,type:l,inputMode:h,name:o},events:{input:i,blur:v,keydown:w=>{w.key==="Enter"&&(r=!0)}}});function i(w){const k=n!=="none"?U(w?.target?.value,n):w?.target?.value;p.value=k,a?.(k)}function v(){r=!0,a?.(p?.value||"")}const b=d("div",{className:"input-loader",innerHTML:'<div class="loader"></div>',dataset:{show:"false"}}),f=c?d("div",{className:"input-right-element",children:[q({content:c,id:e})]}):null,y=d("div",{className:"input-wrapper",children:[p,b,f]}),x=d("div",{className:"error-message",dataset:{show:"false"},innerHTML:`
|
|
52
52
|
${L}
|
|
53
53
|
<span></span>
|
|
54
54
|
`});return{element:d("div",{className:"custom-input-group",children:[s,y,x]}),setLoading:w=>{N({element:y},{dataset:{loading:w?"true":"false"}}),N({element:p},{attributes:{disabled:w?"true":"false"}}),N({element:b},{dataset:{show:w?"true":"false"}})},setError:(w="")=>{N({element:y},{className:w&&r?{add:"input-error"}:{remove:"input-error"}}),N({element:x},{dataset:{show:w&&r?"true":"false"},innerHTML:`
|
|
55
55
|
${L}
|
|
56
56
|
<span>${w||""}</span>
|
|
57
|
-
`})}}},J=async(t,n={})=>{const{method:e="GET",headers:o={},body:l=null,...m}=n;try{const c={method:e,headers:{Accept:"*/*","Content-Type":"application/json",...o},...m};l&&["POST","PUT","PATCH","DELETE"].includes(e.toUpperCase())&&(c.body=typeof l=="string"?l:JSON.stringify(l));const a=await fetch(t,c),h=a.headers.get("content-type");let s;if(h?.includes("application/json")?s=await a.json():s=await a.text(),!a.ok){const r=s;throw new Error(r?.message||`HTTP error! status: ${a.status}`)}return{data:s,error:null}}catch(c){return{data:null,error:c instanceof Error?c.message:"An error occurred"}}},Q=({title:t="",children:n,onClose:e,showBackBtn:o=!1,showCloseBtn:l=!0})=>{const m=d("button",{className:"back-btn",innerHTML:W,dataset:{show:String(o)},events:{click:()=>u()}}),c=d("h3",{textContent:t}),a=d("button",{className:"close-btn",innerHTML:"×",dataset:{show:String(l)},attributes:{"aria-label":"Close modal"},events:{click:()=>u()}}),h=d("div",{className:"modal-header",children:[m,c,a]}),s=d("div",{className:"modal-content",children:[n]}),r=d("dialog",{className:"custom-modal",children:[h,s],events:{cancel:i=>{i.preventDefault(),u()}}}),u=()=>{r.close(),e?.()};return{element:r,setModalVisibility:i=>{i?r.showModal():r.close()}}},X=({token:t,endpoint:n,beneficiaryCard:e=!1,isModal:o=!1,onCallback:l=()=>null})=>{const m=e?"Enter Recipient Debit Card Details":"Enter Your Debit Card Details",c=e?"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.",a=e?"Debit Card Number":"Your Debit Card Number",h=e?"Enter recipient's card number":"Enter your card number",s=`add-card-form-wrapper${e?" recipient-form":""}`,r={cardNumber:"",expiryDate:"",cvv:"",zipCode:""},{element:u,setError:p}=$({label:a,placeholder:h,id:"card-number-input",name:"cardNumber",maskType:"card",onChange(
|
|
57
|
+
`})}}},J=async(t,n={})=>{const{method:e="GET",headers:o={},body:l=null,...m}=n;try{const c={method:e,headers:{Accept:"*/*","Content-Type":"application/json",...o},...m};l&&["POST","PUT","PATCH","DELETE"].includes(e.toUpperCase())&&(c.body=typeof l=="string"?l:JSON.stringify(l));const a=await fetch(t,c),h=a.headers.get("content-type");let s;if(h?.includes("application/json")?s=await a.json():s=await a.text(),!a.ok){const r=s;throw new Error(r?.message||`HTTP error! status: ${a.status}`)}return{data:s,error:null}}catch(c){return{data:null,error:c instanceof Error?c.message:"An error occurred"}}},Q=({title:t="",children:n,onClose:e,showBackBtn:o=!1,showCloseBtn:l=!0})=>{const m=d("button",{className:"back-btn",innerHTML:W,dataset:{show:String(o)},events:{click:()=>u()}}),c=d("h3",{textContent:t}),a=d("button",{className:"close-btn",innerHTML:"×",dataset:{show:String(l)},attributes:{"aria-label":"Close modal"},events:{click:()=>u()}}),h=d("div",{className:"modal-header",children:[m,c,a]}),s=d("div",{className:"modal-content",children:[n]}),r=d("dialog",{className:"custom-modal",children:[h,s],events:{cancel:i=>{i.preventDefault(),u()}}}),u=()=>{r.close(),e?.()};return{element:r,setModalVisibility:i=>{i?r.showModal():r.close()}}},X=({token:t,endpoint:n,beneficiaryCard:e=!1,isModal:o=!1,onCallback:l=()=>null})=>{const m=e?"Enter Recipient Debit Card Details":"Enter Your Debit Card Details",c=e?"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.",a=e?"Debit Card Number":"Your Debit Card Number",h=e?"Enter recipient's card number":"Enter your card number",s=`add-card-form-wrapper${e?" recipient-form":""}`,r={cardNumber:"",expiryDate:"",cvv:"",zipCode:""},{element:u,setError:p}=$({label:a,placeholder:h,id:"card-number-input",name:"cardNumber",maskType:"card",onChange(g){A("cardNumber",g,p)}}),{element:i,setError:v}=$({label:"Expiration Date",placeholder:"MM/YY",id:"expiry-input",name:"expiryDate",maskType:"expiry",onChange(g){A("expiryDate",g,v)}}),{element:b,setError:f}=$({label:"CVV",placeholder:"3-Digit",type:"number",maskType:"cvv",id:"cvv-input",name:"cvv",tooltip:"A CVV is a 3-digit number on your debit card. You can find it on the back side of the card.",onChange(g){A("cvv",g,f)}}),{element:y,setError:x}=$({label:"ZIP Code",placeholder:e?"ZIP Code":"Enter your ZIP Code",id:"zip-input",name:"zipCode",maskType:"zip",onChange(g){A("zipCode",g,x)}}),D=d("div",{className:e?"input-sections":"inputs",children:[u,i,b,y]}),H=d("p",{className:"submit-error",dataset:{show:"false"}}),{element:V,setDisabled:w,setLoading:k}=R({children:"Link Card",type:"submit",disabled:!0}),z=(g="")=>{N({element:H},{dataset:{show:String(!!g)},innerHTML:`
|
|
58
58
|
${L}
|
|
59
|
-
${
|
|
60
|
-
`})},S=(
|
|
59
|
+
${g||""}
|
|
60
|
+
`})},S=(g=!0)=>{w(g),k(g)};function A(g,j,E){r[g]=j;const{isValid:I,errors:M}=_(r,e);M[g]?E(M[g]):E(""),w(!I)}const te=d("div",{className:"submit-button-wrapper",children:[H,V]});async function ne(g){g.preventDefault();const j=new FormData(g.target),E=Object.fromEntries(j.entries()),I=E?.cardNumber?B(E?.cardNumber):null,M=E?.expiryDate||null,ie=E?.cvv?B(E?.cvv):null,le=E?.zipCode?B(E?.zipCode):null,ce=M?Number(M?.split("/")[0]):null,de=M?G(M?.split("/")[1]):null;S(!0),z("");const T=await J(n,{method:"POST",body:{token:t,pan:I,expiry_month:ce,expiry_year:de,cvv:ie,address:{postal_code:le}}});T.error?(console.error("Request failed:",T.error),S(!1),z(T.error),l?.({success:!1,error:T.error})):(console.log("Request success:",T.data),S(!1),l?.({success:!0,data:T.data}))}const se=()=>d("form",{events:{submit:ne},children:[D,te]}),re=()=>d("div",{className:"form-title",innerHTML:`
|
|
61
61
|
<p>${c}</p>
|
|
62
62
|
|
|
63
63
|
<div>
|
|
@@ -65,8 +65,8 @@
|
|
|
65
65
|
|
|
66
66
|
<span>Secured with 256-bit encryption</span>
|
|
67
67
|
</div>
|
|
68
|
-
`}),
|
|
68
|
+
`}),Y=()=>d("div",{className:o?"":"non-modal-content",children:[re(),se()]}),oe=o?null:d("div",{className:`${s} non-modal`,children:[d("div",{className:"non-modal-header",innerHTML:`
|
|
69
69
|
<span></span>
|
|
70
70
|
<h3>${m}</h3>
|
|
71
71
|
<span></span>
|
|
72
|
-
`}),
|
|
72
|
+
`}),Y()]}),{element:F,setModalVisibility:O}=o?Q({title:m,children:Y()}):{element:null,setModalVisibility:()=>{}};function ae(){F&&(document.body.appendChild(d("div",{className:s,children:[F]})),O(!0))}return{renderFormWithModal:ae,nonModalForm:oe,closeModal:()=>O(!1)}};function ee({token:t,endpoint:n,beneficiaryCard:e,isModal:o,onCallback:l,onModalClose:m}){const{renderFormWithModal:c,nonModalForm:a,closeModal:h}=X({token:t,endpoint:n,beneficiaryCard:e,isModal:o,onCallback:l});return{mount(s){const r="className"in s?document.querySelector(s.className):"id"in s?document.getElementById(s.id):s.element;r&&a&&r.appendChild(a)},open(){c()},destroy(){h(),m?.()}}}C.init=ee,Object.defineProperty(C,Symbol.toStringTag,{value:"Module"})}));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),C=require("react"),z=(i,l=!1)=>{const e={},p=Object.values(i).every(o=>!o||o.trim()===""),t=i.cardNumber?.replace(/\s/g,"");if(t?/^\d{13,19}$/.test(t)||(e.cardNumber="Card number must be 13-19 digits"):e.cardNumber="Card number is required",!i.expiryDate&&!l)e.expiryDate="Expiry date is required";else if(i.expiryDate){const o=i.expiryDate.replace(/\D/g,"");if(o.length<4)e.expiryDate="Enter complete expiry date (MM/YY)";else{const y=parseInt(o.substring(0,2),10),a=parseInt(o.substring(2,4),10);if(isNaN(y)||y<1||y>12)e.expiryDate="Invalid month (must be 01-12)";else if(isNaN(a)||a<0||a>99)e.expiryDate="Invalid year";else{const f=new Date,d=f.getFullYear(),j=f.getMonth()+1,h=Math.floor(d/100)*100,v=h+a,m=h+100+a;let x;v>=d&&v<=d+20?x=v:(m>=d&&m<=d+20,x=m),x<d||x===d&&y<j?e.expiryDate="Card has expired":x>d+20&&(e.expiryDate="Expiry year is too far in the future")}}}const b=i.cvv.trim();b&&!/^\d{3,4}$/.test(b)&&(e.cvv="CVV must be 3 or 4 digits");const s=i.zipCode.trim();return s&&!/^[A-Z0-9\s-]{3,10}$/i.test(s)&&(e.zipCode="Invalid ZIP code format"),{isValid:Object.keys(e).length===0,errors:e,isEmpty:p}};function k(i){const l=parseInt(i,10);if(isNaN(l)||l<0||l>99)return null;const e=new Date().getFullYear(),p=Math.floor(e/100)*100;let t=p+l;return t>=e&&t<=e+20||(t=p+100+l,t>=e&&t<=e+20)?t:p+100+l}function I(i=""){return i.trim().replaceAll(/\s/g,"").replaceAll("-","")}const A=async(i,l={})=>{const{method:e="GET",headers:p={},body:t=null,...b}=l;try{const s={method:e,headers:{Accept:"*/*","Content-Type":"application/json",...p},...b};t&&["POST","PUT","PATCH","DELETE"].includes(e.toUpperCase())&&(s.body=typeof t=="string"?t:JSON.stringify(t));const o=await fetch(i,s),y=o.headers.get("content-type");let a;if(y?.includes("application/json")?a=await o.json():a=await o.text(),!o.ok){const f=a;throw new Error(f?.message||`HTTP error! status: ${o.status}`)}return{data:a,error:null}}catch(s){return{data:null,error:s instanceof Error?s.message:"An error occurred"}}},{View:g,Text:c,TextInput:S,ActivityIndicator:O,TouchableOpacity:q,StyleSheet:L}=require("react-native"),R=({token:i,endpoint:l,beneficiaryCard:e=!1,onCallback:p})=>{const[t,b]=C.useState({cardNumber:"",expiryDate:"",cvv:"",zipCode:""}),[s,o]=C.useState({}),[y,a]=C.useState(null),[f,d]=C.useState(!1),j=C.useMemo(()=>z(t,e).isValid,[t]),h=(u,N)=>{const D={...t,[u]:N};b(D);const{errors:T}=z(D,e);o(T),y&&a(null)},v=async()=>{const{isValid:u,errors:N}=z(t,e);if(!u){o(N);return}const{cardNumber:D,expiryDate:T,cvv:
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),C=require("react"),z=(i,l=!1)=>{const e={},p=Object.values(i).every(o=>!o||o.trim()===""),t=i.cardNumber?.replace(/\s/g,"");if(t?/^\d{13,19}$/.test(t)||(e.cardNumber="Card number must be 13-19 digits"):e.cardNumber="Card number is required",!i.expiryDate&&!l)e.expiryDate="Expiry date is required";else if(i.expiryDate){const o=i.expiryDate.replace(/\D/g,"");if(o.length<4)e.expiryDate="Enter complete expiry date (MM/YY)";else{const y=parseInt(o.substring(0,2),10),a=parseInt(o.substring(2,4),10);if(isNaN(y)||y<1||y>12)e.expiryDate="Invalid month (must be 01-12)";else if(isNaN(a)||a<0||a>99)e.expiryDate="Invalid year";else{const f=new Date,d=f.getFullYear(),j=f.getMonth()+1,h=Math.floor(d/100)*100,v=h+a,m=h+100+a;let x;v>=d&&v<=d+20?x=v:(m>=d&&m<=d+20,x=m),x<d||x===d&&y<j?e.expiryDate="Card has expired":x>d+20&&(e.expiryDate="Expiry year is too far in the future")}}}const b=i.cvv.trim();b&&!/^\d{3,4}$/.test(b)&&(e.cvv="CVV must be 3 or 4 digits");const s=i.zipCode.trim();return s&&!/^[A-Z0-9\s-]{3,10}$/i.test(s)&&(e.zipCode="Invalid ZIP code format"),{isValid:Object.keys(e).length===0,errors:e,isEmpty:p}};function k(i){const l=parseInt(i,10);if(isNaN(l)||l<0||l>99)return null;const e=new Date().getFullYear(),p=Math.floor(e/100)*100;let t=p+l;return t>=e&&t<=e+20||(t=p+100+l,t>=e&&t<=e+20)?t:p+100+l}function I(i=""){return i.trim().replaceAll(/\s/g,"").replaceAll("-","")}const A=async(i,l={})=>{const{method:e="GET",headers:p={},body:t=null,...b}=l;try{const s={method:e,headers:{Accept:"*/*","Content-Type":"application/json",...p},...b};t&&["POST","PUT","PATCH","DELETE"].includes(e.toUpperCase())&&(s.body=typeof t=="string"?t:JSON.stringify(t));const o=await fetch(i,s),y=o.headers.get("content-type");let a;if(y?.includes("application/json")?a=await o.json():a=await o.text(),!o.ok){const f=a;throw new Error(f?.message||`HTTP error! status: ${o.status}`)}return{data:a,error:null}}catch(s){return{data:null,error:s instanceof Error?s.message:"An error occurred"}}},{View:g,Text:c,TextInput:S,ActivityIndicator:O,TouchableOpacity:q,StyleSheet:L}=require("react-native"),R=({token:i,endpoint:l,beneficiaryCard:e=!1,onCallback:p})=>{const[t,b]=C.useState({cardNumber:"",expiryDate:"",cvv:"",zipCode:""}),[s,o]=C.useState({}),[y,a]=C.useState(null),[f,d]=C.useState(!1),j=C.useMemo(()=>z(t,e).isValid,[t]),h=(u,N)=>{const D={...t,[u]:N};b(D);const{errors:T}=z(D,e);o(T),y&&a(null)},v=async()=>{const{isValid:u,errors:N}=z(t,e);if(!u){o(N);return}const{cardNumber:D,expiryDate:T,cvv:Y,zipCode:w}=t,M=Number(T?.split("/")[0]),P=k(T?.split("/")[1]??""),V=I(D);if(!M||!P){a("Invalid expiry date");return}d(!0),a(null);const E=await A(l,{method:"POST",body:{token:i,pan:V,expiry_month:M||null,expiry_year:P||null,cvv:Y?I(Y):null,address:{postal_code:w?I(w):null}}});d(!1),E.error?(a(E.error),p?.({success:!1,error:E.error})):p?.({success:!0,data:E.data})},m=e?"Enter Recipient Debit Card Details":"Enter Your Debit Card Details",x=e?"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.";return n.jsxs(g,{style:r.container,children:[n.jsx(c,{style:r.title,children:m}),n.jsx(c,{style:r.description,children:x}),n.jsxs(g,{style:r.field,children:[n.jsx(c,{style:r.label,children:e?"Debit Card Number":"Your Debit Card Number"}),n.jsx(S,{value:t.cardNumber,onChangeText:u=>h("cardNumber",u),keyboardType:"number-pad",placeholder:e?"Enter recipient's card number":"Enter your card number",style:r.input}),!!s.cardNumber&&n.jsx(c,{style:r.error,children:s.cardNumber})]}),n.jsxs(g,{style:r.row,children:[n.jsxs(g,{style:[r.field,r.half],children:[n.jsx(c,{style:r.label,children:"Expiration Date"}),n.jsx(S,{value:t.expiryDate,onChangeText:u=>h("expiryDate",u),keyboardType:"number-pad",placeholder:"MM/YY",style:r.input}),!!s.expiryDate&&n.jsx(c,{style:r.error,children:s.expiryDate})]}),n.jsxs(g,{style:[r.field,r.half],children:[n.jsx(c,{style:r.label,children:"CVV"}),n.jsx(S,{value:t.cvv,onChangeText:u=>h("cvv",u),keyboardType:"number-pad",secureTextEntry:!0,placeholder:"3-Digit",style:r.input}),!!s.cvv&&n.jsx(c,{style:r.error,children:s.cvv})]})]}),n.jsxs(g,{style:r.field,children:[n.jsx(c,{style:r.label,children:"ZIP Code"}),n.jsx(S,{value:t.zipCode,onChangeText:u=>h("zipCode",u),keyboardType:"number-pad",placeholder:e?"ZIP Code":"Enter your ZIP Code",style:r.input}),!!s.zipCode&&n.jsx(c,{style:r.error,children:s.zipCode})]}),!!y&&n.jsx(c,{style:r.submitError,children:y}),n.jsx(q,{style:[r.button,!j||f?r.buttonDisabled:null],onPress:v,disabled:!j||f,children:f?n.jsx(O,{color:"#ffffff"}):n.jsx(c,{style:r.buttonText,children:"Link Card"})})]})},r=L.create({container:{padding:16,borderRadius:12,backgroundColor:"#ffffff",gap:12},title:{fontSize:18,fontWeight:"600"},description:{fontSize:14,color:"#444"},field:{marginTop:8},row:{flexDirection:"row",gap:12},half:{flex:1},label:{fontSize:13,marginBottom:4,color:"#222"},input:{borderWidth:1,borderColor:"#ccc",borderRadius:8,paddingHorizontal:10,paddingVertical:8,fontSize:14},error:{color:"#cc0000",fontSize:12,marginTop:4},submitError:{color:"#cc0000",fontSize:13,marginTop:8},button:{marginTop:16,paddingVertical:12,borderRadius:999,alignItems:"center",justifyContent:"center",backgroundColor:"#111827"},buttonDisabled:{opacity:.6},buttonText:{color:"#ffffff",fontSize:15,fontWeight:"500"}});exports.AddCard=R;
|
package/dist/native/native.es.js
CHANGED
|
@@ -96,8 +96,8 @@ const L = async (s, l = {}) => {
|
|
|
96
96
|
i(I);
|
|
97
97
|
return;
|
|
98
98
|
}
|
|
99
|
-
const { cardNumber: T, expiryDate: E, cvv:
|
|
100
|
-
if (!
|
|
99
|
+
const { cardNumber: T, expiryDate: E, cvv: M, zipCode: V } = t, k = Number(E?.split("/")[0]), P = O(E?.split("/")[1] ?? ""), j = w(T);
|
|
100
|
+
if (!k || !P) {
|
|
101
101
|
a("Invalid expiry date");
|
|
102
102
|
return;
|
|
103
103
|
}
|
|
@@ -107,11 +107,11 @@ const L = async (s, l = {}) => {
|
|
|
107
107
|
body: {
|
|
108
108
|
token: s,
|
|
109
109
|
pan: j,
|
|
110
|
-
expiry_month:
|
|
111
|
-
expiry_year:
|
|
112
|
-
cvv: w(
|
|
110
|
+
expiry_month: k || null,
|
|
111
|
+
expiry_year: P || null,
|
|
112
|
+
cvv: M ? w(M) : null,
|
|
113
113
|
address: {
|
|
114
|
-
postal_code: w(
|
|
114
|
+
postal_code: V ? w(V) : null
|
|
115
115
|
}
|
|
116
116
|
}
|
|
117
117
|
});
|
package/dist/react/react.cjs.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const Q=require("react/jsx-runtime"),O=require("react");function p(t,n={}){const e=document.createElement(t),{className:a,id:i,innerHTML:m,textContent:l,attributes:r,styles:u,dataset:s,children:o,events:d}=n;if(a){const h=Array.isArray(a)?a:a.split(" ");e.classList.add(...h.filter(Boolean))}if(i&&(e.id=i),m&&(e.innerHTML=m),l&&(e.textContent=l),r)for(const[h,c]of Object.entries(r))c&&e.setAttribute(h,c);if(u)for(const[h,c]of Object.entries(u))e.style[h]=c;if(s)for(const[h,c]of Object.entries(s))e.dataset[h]=c;if(o&&e.append(...o.filter(Boolean)),d)for(const[h,c]of Object.entries(d))e.addEventListener(h,c);return e}function C(t,n){const e="id"in t?[document.getElementById(t.id)].filter(Boolean):"className"in t?Array.from(document.getElementsByClassName(t.className)):[t.element];if(!e.length){console.warn("updateElements: no elements found for",t);return}for(const a of e){const{styles:i,attributes:m,dataset:l,innerHTML:r,textContent:u,className:s}=n;if(i)for(const[o,d]of Object.entries(i))a.style[o]=d;if(m)for(const[o,d]of Object.entries(m))a.setAttribute(o,d);if(l)for(const[o,d]of Object.entries(l))a.dataset[o]=d;if(r!==void 0&&(a.innerHTML=r),u!==void 0&&(a.textContent=u),s?.add){const o=Array.isArray(s.add)?s.add:[s.add];a.classList.add(...o)}if(s?.remove){const o=Array.isArray(s.remove)?s.remove:[s.remove];a.classList.remove(...o)}s?.toggle&&(Array.isArray(s.toggle)?s.toggle:[s.toggle]).forEach(d=>a.classList.toggle(d))}}const X=`
|
|
2
2
|
<svg
|
|
3
3
|
xmlns="http://www.w3.org/2000/svg"
|
|
4
4
|
width="16"
|
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
clip-rule="evenodd"
|
|
14
14
|
></path>
|
|
15
15
|
</svg>
|
|
16
|
-
`,
|
|
16
|
+
`,ee=`
|
|
17
17
|
<svg
|
|
18
18
|
xmlns="http://www.w3.org/2000/svg"
|
|
19
19
|
width="16"
|
|
@@ -28,7 +28,7 @@
|
|
|
28
28
|
>
|
|
29
29
|
<path d="M12 2v4M16.2 7.8l2.9-2.9M18 12h4M16.2 16.2l2.9 2.9M12 18v4M4.9 19.1l2.9-2.9M2 12h4M4.9 4.9l2.9 2.9"></path>
|
|
30
30
|
</svg>
|
|
31
|
-
`,
|
|
31
|
+
`,te=`<svg
|
|
32
32
|
xmlns="http://www.w3.org/2000/svg"
|
|
33
33
|
width="20"
|
|
34
34
|
height="20"
|
|
@@ -45,28 +45,28 @@
|
|
|
45
45
|
></path>
|
|
46
46
|
</svg>`,k=`
|
|
47
47
|
<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>
|
|
48
|
-
`,
|
|
48
|
+
`,ne=({children:t,onClick:n,disabled:e=!1,size:a="medium",type:i="button",className:m="",variant:l="primary"})=>{const r=p("span",{className:"button-spinner",innerHTML:ee,dataset:{show:"false"}}),u=p("span",{className:"button-label",children:[null],textContent:t}),s=p("button",{className:`custom-button ${l} ${a} ${m}`,attributes:{type:i,...e?{disabled:"true"}:{}},events:{click:n},children:[r,u]}),o=(h=!1)=>{C({element:r},{dataset:{show:String(h)}}),d(h)},d=(h=!1)=>{h?s.setAttribute("disabled","true"):s.removeAttribute("disabled")};return{element:s,setLoading:o,setDisabled:d}},se=({content:t,position:n="top",delay:e=200,maxWidth:a=250,className:i="",id:m=""})=>{var l=p("div",{className:`tooltip ${n} ${i}`,styles:{maxWidth:`${a}px`},attributes:{role:"tooltip"},dataset:{show:"false"},innerHTML:`
|
|
49
49
|
<div class="tooltip-content">${t}</div>
|
|
50
50
|
<div class="tooltip-arrow"></div>
|
|
51
|
-
`});let r=null;var o=p("span",{className:"tooltip-trigger",innerHTML:k,events:{mouseenter:()=>{e>0?r=window.setTimeout(()=>{l.dataset.show="true",d()},e):(l.dataset.show="true",d())},mouseleave:()=>{r&&clearTimeout(r),l.dataset.show="false"}}});function d(){if(!o||!l)return;const c=o.getBoundingClientRect(),v=l.getBoundingClientRect(),b=8;let f,y;switch(n){case"top":f=c.top-v.height-b,y=c.left+c.width/2-v.width/2;break;case"bottom":f=c.bottom+b,y=c.left+c.width/2-v.width/2;break;case"left":f=c.top+c.height/2-v.height/2,y=c.left-v.width-b;break;case"right":f=c.top+c.height/2-v.height/2,y=c.right+b;break;default:f=c.top-v.height-b,y=c.left+c.width/2-v.width/2}const N=window.innerWidth,
|
|
51
|
+
`});let r=null;var o=p("span",{className:"tooltip-trigger",innerHTML:k,events:{mouseenter:()=>{e>0?r=window.setTimeout(()=>{l.dataset.show="true",d()},e):(l.dataset.show="true",d())},mouseleave:()=>{r&&clearTimeout(r),l.dataset.show="false"}}});function d(){if(!o||!l)return;const c=o.getBoundingClientRect(),v=l.getBoundingClientRect(),b=8;let f,y;switch(n){case"top":f=c.top-v.height-b,y=c.left+c.width/2-v.width/2;break;case"bottom":f=c.bottom+b,y=c.left+c.width/2-v.width/2;break;case"left":f=c.top+c.height/2-v.height/2,y=c.left-v.width-b;break;case"right":f=c.top+c.height/2-v.height/2,y=c.right+b;break;default:f=c.top-v.height-b,y=c.left+c.width/2-v.width/2}const N=window.innerWidth,D=window.innerHeight;y<0&&(y=b),y+v.width>N&&(y=N-v.width-b),f<0&&(f=b),f+v.height>D&&(f=D-v.height-b),l.style.top=`${f}px`,l.style.left=`${y}px`}return p("div",{className:"tooltip-wrapper",id:`tooltip-${m}`,children:[o,l]})},re=(t,n=!1)=>{const e={},a=Object.values(t).every(r=>!r||r.trim()===""),i=t.cardNumber?.replace(/\s/g,"");if(i?/^\d{13,19}$/.test(i)||(e.cardNumber="Card number must be 13-19 digits"):e.cardNumber="Card number is required",!t.expiryDate&&!n)e.expiryDate="Expiry date is required";else if(t.expiryDate){const r=t.expiryDate.replace(/\D/g,"");if(r.length<4)e.expiryDate="Enter complete expiry date (MM/YY)";else{const u=parseInt(r.substring(0,2),10),s=parseInt(r.substring(2,4),10);if(isNaN(u)||u<1||u>12)e.expiryDate="Invalid month (must be 01-12)";else if(isNaN(s)||s<0||s>99)e.expiryDate="Invalid year";else{const o=new Date,d=o.getFullYear(),h=o.getMonth()+1,c=Math.floor(d/100)*100,v=c+s,b=c+100+s;let f;v>=d&&v<=d+20?f=v:(b>=d&&b<=d+20,f=b),f<d||f===d&&u<h?e.expiryDate="Card has expired":f>d+20&&(e.expiryDate="Expiry year is too far in the future")}}}const m=t.cvv.trim();m&&!/^\d{3,4}$/.test(m)&&(e.cvv="CVV must be 3 or 4 digits");const l=t.zipCode.trim();return l&&!/^[A-Z0-9\s-]{3,10}$/i.test(l)&&(e.zipCode="Invalid ZIP code format"),{isValid:Object.keys(e).length===0,errors:e,isEmpty:a}};function oe(t){const n=parseInt(t,10);if(isNaN(n)||n<0||n>99)return null;const e=new Date().getFullYear(),a=Math.floor(e/100)*100;let i=a+n;return i>=e&&i<=e+20||(i=a+100+n,i>=e&&i<=e+20)?i:a+100+n}function S(t=""){return t.trim().replaceAll(/\s/g,"").replaceAll("-","")}const ae={card:t=>t.replace(/\s+/g,"").replace(/[^0-9]/gi,"").substring(0,16).match(/.{1,4}/g)?.join(" ")??"",phone:t=>{const n=t.replace(/\D/g,"").substring(0,10),e=n.match(/^(\d{3})(\d{3})(\d{4})$/);return e?`(${e[1]}) ${e[2]}-${e[3]}`:n},expiry:t=>{const n=t.replace(/[^0-9/]/g,"");return n.length<=2?n:n.includes("/")?n.substring(0,5):n.substring(0,2)+"/"+n.substring(2,4)},cvv:t=>t.replace(/\D/g,"").substring(0,4),zip:t=>{const n=t.replace(/\D/g,"").substring(0,9);return n.length>5?`${n.substring(0,5)}-${n.substring(5)}`:n}};function ie(t,n){return n==="none"?t:ae[n](t)}const $=({label:t,maskType:n,id:e,name:a,type:i="text",placeholder:m="Enter value",tooltip:l="",onChange:r})=>{const u=["card","expiry","phone","cvv","zip"].includes(n)?"numeric":"",s=p("label",{className:"input-label",innerHTML:t,attributes:{for:e}});let o=!1;const h=p("input",{id:e||"input-id",className:"styled-input",attributes:{placeholder:m,type:i,inputMode:u,name:a},events:{input:c,blur:v,keydown:w=>{w.key==="Enter"&&(o=!0)}}});function c(w){const T=n!=="none"?ie(w?.target?.value,n):w?.target?.value;h.value=T,r?.(T)}function v(){o=!0,r?.(h?.value||"")}const b=p("div",{className:"input-loader",innerHTML:'<div class="loader"></div>',dataset:{show:"false"}}),f=l?p("div",{className:"input-right-element",children:[se({content:l,id:e})]}):null,y=p("div",{className:"input-wrapper",children:[h,b,f]}),N=p("div",{className:"error-message",dataset:{show:"false"},innerHTML:`
|
|
52
52
|
${k}
|
|
53
53
|
<span></span>
|
|
54
|
-
`});return{element:p("div",{className:"custom-input-group",children:[s,y,N]}),setLoading:w=>{
|
|
54
|
+
`});return{element:p("div",{className:"custom-input-group",children:[s,y,N]}),setLoading:w=>{C({element:y},{dataset:{loading:w?"true":"false"}}),C({element:h},{attributes:{disabled:w?"true":"false"}}),C({element:b},{dataset:{show:w?"true":"false"}})},setError:(w="")=>{C({element:y},{className:w&&o?{add:"input-error"}:{remove:"input-error"}}),C({element:N},{dataset:{show:w&&o?"true":"false"},innerHTML:`
|
|
55
55
|
${k}
|
|
56
56
|
<span>${w||""}</span>
|
|
57
|
-
`})}}},
|
|
57
|
+
`})}}},le=async(t,n={})=>{const{method:e="GET",headers:a={},body:i=null,...m}=n;try{const l={method:e,headers:{Accept:"*/*","Content-Type":"application/json",...a},...m};i&&["POST","PUT","PATCH","DELETE"].includes(e.toUpperCase())&&(l.body=typeof i=="string"?i:JSON.stringify(i));const r=await fetch(t,l),u=r.headers.get("content-type");let s;if(u?.includes("application/json")?s=await r.json():s=await r.text(),!r.ok){const o=s;throw new Error(o?.message||`HTTP error! status: ${r.status}`)}return{data:s,error:null}}catch(l){return{data:null,error:l instanceof Error?l.message:"An error occurred"}}},ce=({title:t="",children:n,onClose:e,showBackBtn:a=!1,showCloseBtn:i=!0})=>{const m=p("button",{className:"back-btn",innerHTML:te,dataset:{show:String(a)},events:{click:()=>d()}}),l=p("h3",{textContent:t}),r=p("button",{className:"close-btn",innerHTML:"×",dataset:{show:String(i)},attributes:{"aria-label":"Close modal"},events:{click:()=>d()}}),u=p("div",{className:"modal-header",children:[m,l,r]}),s=p("div",{className:"modal-content",children:[n]}),o=p("dialog",{className:"custom-modal",children:[u,s],events:{cancel:c=>{c.preventDefault(),d()}}}),d=()=>{o.close(),e?.()};return{element:o,setModalVisibility:c=>{c?o.showModal():o.close()}}},de=({token:t,endpoint:n,beneficiaryCard:e=!1,isModal:a=!1,onCallback:i=()=>null})=>{const m=e?"Enter Recipient Debit Card Details":"Enter Your Debit Card Details",l=e?"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.",r=e?"Debit Card Number":"Your Debit Card Number",u=e?"Enter recipient's card number":"Enter your card number",s=`add-card-form-wrapper${e?" recipient-form":""}`,o={cardNumber:"",expiryDate:"",cvv:"",zipCode:""},{element:d,setError:h}=$({label:r,placeholder:u,id:"card-number-input",name:"cardNumber",maskType:"card",onChange(g){L("cardNumber",g,h)}}),{element:c,setError:v}=$({label:"Expiration Date",placeholder:"MM/YY",id:"expiry-input",name:"expiryDate",maskType:"expiry",onChange(g){L("expiryDate",g,v)}}),{element:b,setError:f}=$({label:"CVV",placeholder:"3-Digit",type:"number",maskType:"cvv",id:"cvv-input",name:"cvv",tooltip:"A CVV is a 3-digit number on your debit card. You can find it on the back side of the card.",onChange(g){L("cvv",g,f)}}),{element:y,setError:N}=$({label:"ZIP Code",placeholder:e?"ZIP Code":"Enter your ZIP Code",id:"zip-input",name:"zipCode",maskType:"zip",onChange(g){L("zipCode",g,N)}}),D=p("div",{className:e?"input-sections":"inputs",children:[d,c,b,y]}),A=p("p",{className:"submit-error",dataset:{show:"false"}}),{element:I,setDisabled:w,setLoading:T}=ne({children:"Link Card",type:"submit",disabled:!0}),V=(g="")=>{C({element:A},{dataset:{show:String(!!g)},innerHTML:`
|
|
58
58
|
${k}
|
|
59
59
|
${g||""}
|
|
60
|
-
`})},B=(g=!0)=>{w(g),T(g)};function L(g,H,E){o[g]=H;const{isValid:j,errors:
|
|
60
|
+
`})},B=(g=!0)=>{w(g),T(g)};function L(g,H,E){o[g]=H;const{isValid:j,errors:x}=re(o,e);x[g]?E(x[g]):E(""),w(!j)}const P=p("div",{className:"submit-button-wrapper",children:[A,I]});async function Z(g){g.preventDefault();const H=new FormData(g.target),E=Object.fromEntries(H.entries()),j=E?.cardNumber?S(E?.cardNumber):null,x=E?.expiryDate||null,G=E?.cvv?S(E?.cvv):null,K=E?.zipCode?S(E?.zipCode):null,U=x?Number(x?.split("/")[0]):null,J=x?oe(x?.split("/")[1]):null;B(!0),V("");const M=await le(n,{method:"POST",body:{token:t,pan:j,expiry_month:U,expiry_year:J,cvv:G,address:{postal_code:K}}});M.error?(console.error("Request failed:",M.error),B(!1),V(M.error),i?.({success:!1,error:M.error})):(console.log("Request success:",M.data),B(!1),i?.({success:!0,data:M.data}))}const R=()=>p("form",{events:{submit:Z},children:[D,P]}),W=()=>p("div",{className:"form-title",innerHTML:`
|
|
61
61
|
<p>${l}</p>
|
|
62
62
|
|
|
63
63
|
<div>
|
|
64
|
-
${
|
|
64
|
+
${X}
|
|
65
65
|
|
|
66
66
|
<span>Secured with 256-bit encryption</span>
|
|
67
67
|
</div>
|
|
68
|
-
`}),
|
|
68
|
+
`}),z=()=>p("div",{className:a?"":"non-modal-content",children:[W(),R()]}),q=a?null:p("div",{className:`${s} non-modal`,children:[p("div",{className:"non-modal-header",innerHTML:`
|
|
69
69
|
<span></span>
|
|
70
70
|
<h3>${m}</h3>
|
|
71
71
|
<span></span>
|
|
72
|
-
`}),
|
|
72
|
+
`}),z()]}),{element:Y,setModalVisibility:F}=a?ce({title:m,children:z()}):{element:null,setModalVisibility:()=>{}};function _(){Y&&(document.body.appendChild(p("div",{className:s,children:[Y]})),F(!0))}return{renderFormWithModal:_,nonModalForm:q,closeModal:()=>F(!1)}};function ue({token:t,endpoint:n,beneficiaryCard:e,isModal:a,onCallback:i,onModalClose:m}){const{renderFormWithModal:l,nonModalForm:r,closeModal:u}=de({token:t,endpoint:n,beneficiaryCard:e,isModal:a,onCallback:i});return{mount(s){const o="className"in s?document.querySelector(s.className):"id"in s?document.getElementById(s.id):s.element;o&&r&&o.appendChild(r)},open(){l()},destroy(){u(),m?.()}}}function pe({token:t,endpoint:n,isModal:e=!1,beneficiaryCard:a=!1,isOpen:i=!1,onCallback:m=()=>null,onClose:l=()=>null}){const r=O.useRef(null);return O.useEffect(()=>{let u=ue({token:t,endpoint:n,beneficiaryCard:a,isModal:e,onCallback:m,onModalClose:l});if(e)i?u.open():u.destroy();else{if(!r?.current)return;u.mount({element:r.current})}return()=>{u.destroy()}},[e,t,n,a,i]),e?null:Q.jsx("div",{ref:r})}exports.AddCard=pe;
|
package/dist/react/react.es.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import { useRef as
|
|
1
|
+
import { jsx as J } from "react/jsx-runtime";
|
|
2
|
+
import { useRef as Q, useEffect as X } from "react";
|
|
3
3
|
function p(t, n = {}) {
|
|
4
4
|
const e = document.createElement(t), { className: a, id: i, innerHTML: m, textContent: l, attributes: r, styles: u, dataset: s, children: o, events: d } = n;
|
|
5
5
|
if (a) {
|
|
@@ -20,7 +20,7 @@ function p(t, n = {}) {
|
|
|
20
20
|
e.addEventListener(h, c);
|
|
21
21
|
return e;
|
|
22
22
|
}
|
|
23
|
-
function
|
|
23
|
+
function C(t, n) {
|
|
24
24
|
const e = "id" in t ? [document.getElementById(t.id)].filter(Boolean) : "className" in t ? Array.from(document.getElementsByClassName(t.className)) : [t.element];
|
|
25
25
|
if (!e.length) {
|
|
26
26
|
console.warn("updateElements: no elements found for", t);
|
|
@@ -48,7 +48,7 @@ function x(t, n) {
|
|
|
48
48
|
s?.toggle && (Array.isArray(s.toggle) ? s.toggle : [s.toggle]).forEach((d) => a.classList.toggle(d));
|
|
49
49
|
}
|
|
50
50
|
}
|
|
51
|
-
const
|
|
51
|
+
const ee = `
|
|
52
52
|
<svg
|
|
53
53
|
xmlns="http://www.w3.org/2000/svg"
|
|
54
54
|
width="16"
|
|
@@ -63,7 +63,7 @@ const te = `
|
|
|
63
63
|
clip-rule="evenodd"
|
|
64
64
|
></path>
|
|
65
65
|
</svg>
|
|
66
|
-
`,
|
|
66
|
+
`, te = `
|
|
67
67
|
<svg
|
|
68
68
|
xmlns="http://www.w3.org/2000/svg"
|
|
69
69
|
width="16"
|
|
@@ -78,7 +78,7 @@ const te = `
|
|
|
78
78
|
>
|
|
79
79
|
<path d="M12 2v4M16.2 7.8l2.9-2.9M18 12h4M16.2 16.2l2.9 2.9M12 18v4M4.9 19.1l2.9-2.9M2 12h4M4.9 4.9l2.9 2.9"></path>
|
|
80
80
|
</svg>
|
|
81
|
-
`,
|
|
81
|
+
`, ne = `<svg
|
|
82
82
|
xmlns="http://www.w3.org/2000/svg"
|
|
83
83
|
width="20"
|
|
84
84
|
height="20"
|
|
@@ -95,10 +95,10 @@ const te = `
|
|
|
95
95
|
></path>
|
|
96
96
|
</svg>`, k = `
|
|
97
97
|
<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>
|
|
98
|
-
`,
|
|
98
|
+
`, se = ({ children: t, onClick: n, disabled: e = !1, size: a = "medium", type: i = "button", className: m = "", variant: l = "primary" }) => {
|
|
99
99
|
const r = p("span", {
|
|
100
100
|
className: "button-spinner",
|
|
101
|
-
innerHTML:
|
|
101
|
+
innerHTML: te,
|
|
102
102
|
dataset: { show: "false" }
|
|
103
103
|
}), u = p("span", {
|
|
104
104
|
className: "button-label",
|
|
@@ -120,7 +120,7 @@ const te = `
|
|
|
120
120
|
u
|
|
121
121
|
]
|
|
122
122
|
}), o = (h = !1) => {
|
|
123
|
-
|
|
123
|
+
C({ element: r }, {
|
|
124
124
|
dataset: { show: String(h) }
|
|
125
125
|
}), d(h);
|
|
126
126
|
}, d = (h = !1) => {
|
|
@@ -131,7 +131,7 @@ const te = `
|
|
|
131
131
|
setLoading: o,
|
|
132
132
|
setDisabled: d
|
|
133
133
|
};
|
|
134
|
-
},
|
|
134
|
+
}, re = ({ content: t, position: n = "top", delay: e = 200, maxWidth: a = 250, className: i = "", id: m = "" }) => {
|
|
135
135
|
var l = p("div", {
|
|
136
136
|
className: `tooltip ${n} ${i}`,
|
|
137
137
|
styles: {
|
|
@@ -183,8 +183,8 @@ const te = `
|
|
|
183
183
|
default:
|
|
184
184
|
f = c.top - v.height - b, y = c.left + c.width / 2 - v.width / 2;
|
|
185
185
|
}
|
|
186
|
-
const N = window.innerWidth,
|
|
187
|
-
y < 0 && (y = b), y + v.width > N && (y = N - v.width - b), f < 0 && (f = b), f + v.height >
|
|
186
|
+
const N = window.innerWidth, D = window.innerHeight;
|
|
187
|
+
y < 0 && (y = b), y + v.width > N && (y = N - v.width - b), f < 0 && (f = b), f + v.height > D && (f = D - v.height - b), l.style.top = `${f}px`, l.style.left = `${y}px`;
|
|
188
188
|
}
|
|
189
189
|
return p("div", {
|
|
190
190
|
className: "tooltip-wrapper",
|
|
@@ -194,7 +194,7 @@ const te = `
|
|
|
194
194
|
l
|
|
195
195
|
]
|
|
196
196
|
});
|
|
197
|
-
},
|
|
197
|
+
}, oe = (t, n = !1) => {
|
|
198
198
|
const e = {}, a = Object.values(t).every(
|
|
199
199
|
(r) => !r || r.trim() === ""
|
|
200
200
|
), i = t.cardNumber?.replace(/\s/g, "");
|
|
@@ -226,7 +226,7 @@ const te = `
|
|
|
226
226
|
isEmpty: a
|
|
227
227
|
};
|
|
228
228
|
};
|
|
229
|
-
function
|
|
229
|
+
function ae(t) {
|
|
230
230
|
const n = parseInt(t, 10);
|
|
231
231
|
if (isNaN(n) || n < 0 || n > 99) return null;
|
|
232
232
|
const e = (/* @__PURE__ */ new Date()).getFullYear(), a = Math.floor(e / 100) * 100;
|
|
@@ -236,7 +236,7 @@ function ie(t) {
|
|
|
236
236
|
function V(t = "") {
|
|
237
237
|
return t.trim().replaceAll(/\s/g, "").replaceAll("-", "");
|
|
238
238
|
}
|
|
239
|
-
const
|
|
239
|
+
const ie = {
|
|
240
240
|
card: (t) => t.replace(/\s+/g, "").replace(/[^0-9]/gi, "").substring(0, 16).match(/.{1,4}/g)?.join(" ") ?? "",
|
|
241
241
|
phone: (t) => {
|
|
242
242
|
const n = t.replace(/\D/g, "").substring(0, 10), e = n.match(/^(\d{3})(\d{3})(\d{4})$/);
|
|
@@ -252,8 +252,8 @@ const le = {
|
|
|
252
252
|
return n.length > 5 ? `${n.substring(0, 5)}-${n.substring(5)}` : n;
|
|
253
253
|
}
|
|
254
254
|
};
|
|
255
|
-
function
|
|
256
|
-
return n === "none" ? t :
|
|
255
|
+
function le(t, n) {
|
|
256
|
+
return n === "none" ? t : ie[n](t);
|
|
257
257
|
}
|
|
258
258
|
const $ = ({ label: t, maskType: n, id: e, name: a, type: i = "text", placeholder: m = "Enter value", tooltip: l = "", onChange: r }) => {
|
|
259
259
|
const u = ["card", "expiry", "phone", "cvv", "zip"].includes(n) ? "numeric" : "", s = p("label", {
|
|
@@ -282,7 +282,7 @@ const $ = ({ label: t, maskType: n, id: e, name: a, type: i = "text", placeholde
|
|
|
282
282
|
}
|
|
283
283
|
});
|
|
284
284
|
function c(w) {
|
|
285
|
-
const T = n !== "none" ?
|
|
285
|
+
const T = n !== "none" ? le(w?.target?.value, n) : w?.target?.value;
|
|
286
286
|
h.value = T, r?.(T);
|
|
287
287
|
}
|
|
288
288
|
function v() {
|
|
@@ -295,7 +295,7 @@ const $ = ({ label: t, maskType: n, id: e, name: a, type: i = "text", placeholde
|
|
|
295
295
|
}), f = l ? p("div", {
|
|
296
296
|
className: "input-right-element",
|
|
297
297
|
children: [
|
|
298
|
-
|
|
298
|
+
re({ content: l, id: e })
|
|
299
299
|
]
|
|
300
300
|
}) : null, y = p("div", {
|
|
301
301
|
className: "input-wrapper",
|
|
@@ -322,18 +322,18 @@ const $ = ({ label: t, maskType: n, id: e, name: a, type: i = "text", placeholde
|
|
|
322
322
|
]
|
|
323
323
|
}),
|
|
324
324
|
setLoading: (w) => {
|
|
325
|
-
|
|
325
|
+
C({ element: y }, {
|
|
326
326
|
dataset: { loading: w ? "true" : "false" }
|
|
327
|
-
}),
|
|
327
|
+
}), C({ element: h }, {
|
|
328
328
|
attributes: { disabled: w ? "true" : "false" }
|
|
329
|
-
}),
|
|
329
|
+
}), C({ element: b }, {
|
|
330
330
|
dataset: { show: w ? "true" : "false" }
|
|
331
331
|
});
|
|
332
332
|
},
|
|
333
333
|
setError: (w = "") => {
|
|
334
|
-
|
|
334
|
+
C({ element: y }, {
|
|
335
335
|
className: w && o ? { add: "input-error" } : { remove: "input-error" }
|
|
336
|
-
}),
|
|
336
|
+
}), C({ element: N }, {
|
|
337
337
|
dataset: { show: w && o ? "true" : "false" },
|
|
338
338
|
innerHTML: `
|
|
339
339
|
${k}
|
|
@@ -342,7 +342,7 @@ const $ = ({ label: t, maskType: n, id: e, name: a, type: i = "text", placeholde
|
|
|
342
342
|
});
|
|
343
343
|
}
|
|
344
344
|
};
|
|
345
|
-
},
|
|
345
|
+
}, ce = async (t, n = {}) => {
|
|
346
346
|
const { method: e = "GET", headers: a = {}, body: i = null, ...m } = n;
|
|
347
347
|
try {
|
|
348
348
|
const l = {
|
|
@@ -367,7 +367,7 @@ const $ = ({ label: t, maskType: n, id: e, name: a, type: i = "text", placeholde
|
|
|
367
367
|
} catch (l) {
|
|
368
368
|
return { data: null, error: l instanceof Error ? l.message : "An error occurred" };
|
|
369
369
|
}
|
|
370
|
-
},
|
|
370
|
+
}, de = ({
|
|
371
371
|
title: t = "",
|
|
372
372
|
children: n,
|
|
373
373
|
onClose: e,
|
|
@@ -376,7 +376,7 @@ const $ = ({ label: t, maskType: n, id: e, name: a, type: i = "text", placeholde
|
|
|
376
376
|
}) => {
|
|
377
377
|
const m = p("button", {
|
|
378
378
|
className: "back-btn",
|
|
379
|
-
innerHTML:
|
|
379
|
+
innerHTML: ne,
|
|
380
380
|
dataset: { show: String(a) },
|
|
381
381
|
events: { click: () => d() }
|
|
382
382
|
}), l = p("h3", {
|
|
@@ -410,7 +410,7 @@ const $ = ({ label: t, maskType: n, id: e, name: a, type: i = "text", placeholde
|
|
|
410
410
|
c ? o.showModal() : o.close();
|
|
411
411
|
}
|
|
412
412
|
};
|
|
413
|
-
},
|
|
413
|
+
}, ue = ({ token: t, endpoint: n, beneficiaryCard: e = !1, isModal: a = !1, onCallback: i = () => null }) => {
|
|
414
414
|
const m = e ? "Enter Recipient Debit Card Details" : "Enter Your Debit Card Details", l = e ? "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.", r = e ? "Debit Card Number" : "Your Debit Card Number", u = e ? "Enter recipient's card number" : "Enter your card number", s = `add-card-form-wrapper${e ? " recipient-form" : ""}`, o = {
|
|
415
415
|
cardNumber: "",
|
|
416
416
|
expiryDate: "",
|
|
@@ -454,19 +454,19 @@ const $ = ({ label: t, maskType: n, id: e, name: a, type: i = "text", placeholde
|
|
|
454
454
|
onChange(g) {
|
|
455
455
|
L("zipCode", g, N);
|
|
456
456
|
}
|
|
457
|
-
}),
|
|
457
|
+
}), D = p("div", {
|
|
458
458
|
className: e ? "input-sections" : "inputs",
|
|
459
459
|
children: [d, c, b, y]
|
|
460
460
|
}), A = p("p", {
|
|
461
461
|
className: "submit-error",
|
|
462
462
|
dataset: { show: "false" }
|
|
463
463
|
// innerHTML: `//icon`
|
|
464
|
-
}), { element: j, setDisabled: w, setLoading: T } =
|
|
464
|
+
}), { element: j, setDisabled: w, setLoading: T } = se({
|
|
465
465
|
children: "Link Card",
|
|
466
466
|
type: "submit",
|
|
467
467
|
disabled: !0
|
|
468
468
|
}), S = (g = "") => {
|
|
469
|
-
|
|
469
|
+
C({ element: A }, {
|
|
470
470
|
dataset: { show: String(!!g) },
|
|
471
471
|
innerHTML: `
|
|
472
472
|
${k}
|
|
@@ -478,8 +478,8 @@ const $ = ({ label: t, maskType: n, id: e, name: a, type: i = "text", placeholde
|
|
|
478
478
|
};
|
|
479
479
|
function L(g, H, E) {
|
|
480
480
|
o[g] = H;
|
|
481
|
-
const { isValid: I, errors:
|
|
482
|
-
|
|
481
|
+
const { isValid: I, errors: x } = oe(o, e);
|
|
482
|
+
x[g] ? E(x[g]) : E(""), w(!I);
|
|
483
483
|
}
|
|
484
484
|
const O = p("div", {
|
|
485
485
|
className: "submit-button-wrapper",
|
|
@@ -487,20 +487,18 @@ const $ = ({ label: t, maskType: n, id: e, name: a, type: i = "text", placeholde
|
|
|
487
487
|
});
|
|
488
488
|
async function P(g) {
|
|
489
489
|
g.preventDefault();
|
|
490
|
-
const H = new FormData(g.target), E = Object.fromEntries(H.entries());
|
|
491
|
-
console.log(E);
|
|
492
|
-
const I = E?.cardNumber, D = E?.expiryDate, _ = E?.cvv, G = E?.zipCode, K = Number(D?.split("/")[0]), U = ie(D?.split("/")[1]), J = V(I);
|
|
490
|
+
const H = new FormData(g.target), E = Object.fromEntries(H.entries()), I = E?.cardNumber ? V(E?.cardNumber) : null, x = E?.expiryDate || null, _ = E?.cvv ? V(E?.cvv) : null, G = E?.zipCode ? V(E?.zipCode) : null, K = x ? Number(x?.split("/")[0]) : null, U = x ? ae(x?.split("/")[1]) : null;
|
|
493
491
|
B(!0), S("");
|
|
494
|
-
const M = await
|
|
492
|
+
const M = await ce(n, {
|
|
495
493
|
method: "POST",
|
|
496
494
|
body: {
|
|
497
495
|
token: t,
|
|
498
|
-
pan:
|
|
496
|
+
pan: I,
|
|
499
497
|
expiry_month: K,
|
|
500
498
|
expiry_year: U,
|
|
501
|
-
cvv:
|
|
499
|
+
cvv: _,
|
|
502
500
|
address: {
|
|
503
|
-
postal_code:
|
|
501
|
+
postal_code: G
|
|
504
502
|
}
|
|
505
503
|
}
|
|
506
504
|
});
|
|
@@ -511,7 +509,7 @@ const $ = ({ label: t, maskType: n, id: e, name: a, type: i = "text", placeholde
|
|
|
511
509
|
submit: P
|
|
512
510
|
},
|
|
513
511
|
children: [
|
|
514
|
-
|
|
512
|
+
D,
|
|
515
513
|
O
|
|
516
514
|
]
|
|
517
515
|
}), W = () => p("div", {
|
|
@@ -520,12 +518,12 @@ const $ = ({ label: t, maskType: n, id: e, name: a, type: i = "text", placeholde
|
|
|
520
518
|
<p>${l}</p>
|
|
521
519
|
|
|
522
520
|
<div>
|
|
523
|
-
${
|
|
521
|
+
${ee}
|
|
524
522
|
|
|
525
523
|
<span>Secured with 256-bit encryption</span>
|
|
526
524
|
</div>
|
|
527
525
|
`
|
|
528
|
-
}),
|
|
526
|
+
}), z = () => p("div", {
|
|
529
527
|
className: a ? "" : "non-modal-content",
|
|
530
528
|
children: [W(), Z()]
|
|
531
529
|
}), R = a ? null : p("div", {
|
|
@@ -539,15 +537,15 @@ const $ = ({ label: t, maskType: n, id: e, name: a, type: i = "text", placeholde
|
|
|
539
537
|
<span></span>
|
|
540
538
|
`
|
|
541
539
|
}),
|
|
542
|
-
|
|
540
|
+
z()
|
|
543
541
|
]
|
|
544
|
-
}), { element:
|
|
542
|
+
}), { element: Y, setModalVisibility: F } = a ? de({ title: m, children: z() }) : { element: null, setModalVisibility: () => {
|
|
545
543
|
} };
|
|
546
544
|
function q() {
|
|
547
|
-
|
|
545
|
+
Y && (document.body.appendChild(
|
|
548
546
|
p("div", {
|
|
549
547
|
className: s,
|
|
550
|
-
children: [
|
|
548
|
+
children: [Y]
|
|
551
549
|
})
|
|
552
550
|
), F(!0));
|
|
553
551
|
}
|
|
@@ -557,8 +555,8 @@ const $ = ({ label: t, maskType: n, id: e, name: a, type: i = "text", placeholde
|
|
|
557
555
|
closeModal: () => F(!1)
|
|
558
556
|
};
|
|
559
557
|
};
|
|
560
|
-
function
|
|
561
|
-
const { renderFormWithModal: l, nonModalForm: r, closeModal: u } =
|
|
558
|
+
function pe({ token: t, endpoint: n, beneficiaryCard: e, isModal: a, onCallback: i, onModalClose: m }) {
|
|
559
|
+
const { renderFormWithModal: l, nonModalForm: r, closeModal: u } = ue({
|
|
562
560
|
token: t,
|
|
563
561
|
endpoint: n,
|
|
564
562
|
beneficiaryCard: e,
|
|
@@ -578,7 +576,7 @@ function me({ token: t, endpoint: n, beneficiaryCard: e, isModal: a, onCallback:
|
|
|
578
576
|
}
|
|
579
577
|
};
|
|
580
578
|
}
|
|
581
|
-
function
|
|
579
|
+
function fe({
|
|
582
580
|
token: t,
|
|
583
581
|
endpoint: n,
|
|
584
582
|
isModal: e = !1,
|
|
@@ -587,9 +585,9 @@ function ve({
|
|
|
587
585
|
onCallback: m = () => null,
|
|
588
586
|
onClose: l = () => null
|
|
589
587
|
}) {
|
|
590
|
-
const r =
|
|
591
|
-
return
|
|
592
|
-
let u =
|
|
588
|
+
const r = Q(null);
|
|
589
|
+
return X(() => {
|
|
590
|
+
let u = pe({
|
|
593
591
|
token: t,
|
|
594
592
|
endpoint: n,
|
|
595
593
|
beneficiaryCard: a,
|
|
@@ -606,8 +604,8 @@ function ve({
|
|
|
606
604
|
return () => {
|
|
607
605
|
u.destroy();
|
|
608
606
|
};
|
|
609
|
-
}, [e, t, n, a, i]), e ? null : /* @__PURE__ */
|
|
607
|
+
}, [e, t, n, a, i]), e ? null : /* @__PURE__ */ J("div", { ref: r });
|
|
610
608
|
}
|
|
611
609
|
export {
|
|
612
|
-
|
|
610
|
+
fe as AddCard
|
|
613
611
|
};
|